Html5 Game Development

HTML5GameEngine.com

Austin Hallock — Fri, 17 May 2013 08:41:02 -0400

Most HTML5 game developers choose a game engine to develope their game with – it makes the process much easier since you don’t have to re-invent the wheel. The problem is, there are dozens and dozens of HTML5 games engines to choose from, many of them no longer maintained.

HTML5GameEngine.com was built in an attempt to consolidate the long list of game engines down to the well-respected and maintained ones. From that smaller list, each engine is tied to important information about it: example games, popularity, user ratings, important links, license information, latest release, and more.

The popularity and sample game information is grabbed from a spider that crawls the web in search of HTML5 games. Once it grabs games, it dissects them and categorizes by the game engine used to build them.

Have a look at the list of HTML5 Game Engines to find the right one for you – and when you do, be sure to rate and review it!

Boston Festival of Indie Games on Kickstarter

Pascal Rettig — Fri, 26 Apr 2013 09:30:48 -0400

The Boston Festival of Indie Games, one of the premier, community-run Indie Game Festivals in the country celebrating independent game development in New England and neighboring regions has launched a Kickstarter to help fund this year's Festival.

The Boston FIG celebrates all types of games: video games, location-based games, tabletop and live action role-playing games and is one of the few outlets where HTML5 and Web Games get a first-class seat at the table.

Attendance to the Boston FIG is free, but these things take money to host and put together - so the event is looking to Kickstarter to help get it off the ground and offering great packs of Indie games as reward tiers.

Visit the Kickstarter Page

The core concepts of WebGL

Pascal Rettig — Mon, 22 Apr 2013 11:06:07 -0400

I've you've had trouble wrapping your head around WebGL, the Mozilla Hack Blog has a create, very well-written introduction to the core concepts of WebGL

Read the article

Nintendo Web Framework

Pascal Rettig — Fri, 29 Mar 2013 08:51:24 -0400

Nintendo announced the upcoming WebKit and HTML5-based Nintendo Web Framework at GDC this week for the Wii U

Details are still sketchy but details of the GDC session are:

The Nintendo Web Framework is a development environment based on WebKit technologies, supporting application development on the Wii U system using HTML5, JavaScript, and CSS. It also supports the Wii U GamePad controller, Wii Remote controllers, and JavaScript extensions such as video playback. With the Nintendo Web Framework, development times will be reduced and Wii U applications can be easily developed using common Web technologies. Combining the handy Wii U GamePad, the TV screen, and the Internet, the potential exists for the services and games you are developing to progress by leaps and bounds.

More details and some Tweets from the session over at Neogaf.com

Ludei Adding WebGL support

Pascal Rettig — Wed, 27 Mar 2013 22:30:29 -0400

Ludei is adding WebGL support to it's iOS and Android wrappers - giving developers full 3D support on the two dominant smartphone platforms for their 3D WebGL games and Apps.

While WebGL just appeared in Chrome beta, performance is still a work in progress so Ludei's solution is most welcome for HTML5 game developers.

Read more at VentureBeat and check out the video below

WebRTC Data Channel in Firefox Nightly and Chrome Canary

Pascal Rettig — Wed, 27 Mar 2013 22:19:41 -0400

While WebSockets was a carrot for HTML5 developers imagining smooth multi-player games natively in the browser, the truth was that a TCP-based centralized mechanism was never going to cut it for real-time multiplayer. You could fake it with some clever timing and client-side prediction, but it just wasn't enough.

Enter WebRTC Data Channels - now available in Firefox Nightly and Chrome Canary. Developers are now on the cusp of having a UDP-style peer-to-peer communications that will enable the next generation of native multiplayer on the Web.

Read more at Mozilla's blog: WebRTC Data Channels for Great Multiplayer and check out the demo video below of Mozilla's BananaBread running a 5-player multiplayer

Mozilla teams up with Epic to demo Unreal Engine 3 in the Browser

Pascal Rettig — Wed, 27 Mar 2013 14:13:53 -0400

There's probably no better way to show off the power of the web as a Gaming platform than to take a full, commercial game engine and show it playing in the browser smoothly and fluidly.

Mozilla has done just that by teaming up with Epic to bring a demo of their Unreal 3 Game engine to the web using WebGL, Emscripten and Asm.js - the easier to accelerate subset of JavaScript.

Unlike other technologies like Native Client, Asm.js aims to be a compilation target for other languages that uses only a portion of the features of JavaScript to make it easier for JavaScript engines to just-in-time compile code to start to approach native speeds.

Read more on Mozilla's blog Mozilla is Unloacking the Power of the Web as a Platform for Gaming and check out the video below.

Impact++

Pascal Rettig — Fri, 15 Mar 2013 13:11:47 -0400

Impact++ is a pretty incredible set of extensions for the Impact.js HTML5 Game engine that adds in:

Realtime Dynamic Lighting
Shadows
Pixel Perfect Lighting
Performance enhanced Box2D intergration with collision map slope support
Base Entity and Character classes

Written by Colin Hover, the extension adds a whole lot of goodies to an already excellent engine.

The extension is a very young project and be careful with performance, but the demo is impressive.

Creatures Vs. Demons, Axis Engine Tech Demo

Pascal Rettig — Wed, 06 Mar 2013 10:13:05 -0500

Built on the work-in-progress Axis Game Engine, an engine designed for top-down RPGs and Action Games (in Baldurs Gate or Diablo style), the Creates Vs. Demons Tech Demo boasts an impressive full-screen Diablo-like interface with smooth animations.

Check out the Tech Demo and read more about the Creatures Vs. Demons

HTML5 World of Card Games launches

Pascal Rettig — Thu, 28 Feb 2013 08:57:13 -0500

Following up on the success of DOM-based HTML5 (technically HTML4) hit World of Solitaire (which tallies over a million monthly uniques as the first result when you type "Solitaire" into Google), one-man developer Telparia has released a set of multi-player card games at WorldOfCardGames.com, which features easy-to-play Hearts, Go Fish and Spades.

I asked developer Robert Shultz about the tech behind the game:

"The front end is all DOM based and uses JavaScript (YUI3) for the animation. There is an option in the Settings menu to enable "Hardware Acceleration" which changes all the animation to use CSS transforms instead of JavaScript. It's not enabled by default because I have found that on many computers hardware powered CSS transforms perform worse than JavaScript based animation.

The back end is node.js and redis. It uses websockets (sockjs) to communicate between the browser and server."

Head over to WorldOfCardGames.com to give it a play

Bombermine: Massively multi-player Bombmerman

Pascal Rettig — Wed, 27 Feb 2013 08:19:11 -0500

Bombermine, a massively multi-player online Bomberman using Websockets and supportung up to 1000 players per server has launched. It's an incredibly smooth experience, even with the known latency of WebSockets, and serves up lots of fun and powerups.

Click the image below to start bombing away.

Clay.io

Austin Hallock — Tue, 26 Feb 2013 10:57:09 -0500

Developing games is hard. It's even more difficult if you have to take care of all the tedious features like payment processing, achievements, leaderboards, social integration, etc. That's why Clay.io takes care of all that for you with an easy-to-use JavaScript API. We asked Clay.io Co-founder Austin Hallock, to give us the inside scoop on the platform.

At Clay.io, we think HTML5 is a fantastic environment for developing games – we are betting on it 100%. Our goal is to help with the tedious aspects of game development: distribution and high-level features, so you can focus on developing the game itself. This post highlights how the tools we’ve created can help you conquer the world with your game development.

Gamification

It’s a bit humorous that I talk about “Gamification” for games…because, well, they’re already games. The reason I use that word is today gamification is associated with features like achievements, high scores, posting scores to Facebook and Twitter, leveling up, etc… Each of these features is often looked over by developers, but they are pivotal for retaining players.

We’ve developed an HTML5 Game API with a primary goal of making these features as simple as possible to implement. For example, to post a high score, then show the leaderboard, the code with Clay.io is:

var leaderboard = new Clay.Leaderboard( { id: 'leaderboard-id' } ); leaderboard.post( function() { // post callback, show the leaderboard leaderboard.show(); });

The above code brings up the leaderboard:

The features we currently offer are:

User Accounts
In-game payments
Persistent Data Storage
Leaderboards
Achievements
Analytics
Social Integration
Screenshots
Multiplayer Rooms
Cross-Promotion

We wanted to make it as easy as possible to integrate these features, but we also wanted them to be extremely customizable with clear documentation on how to do so.

Of course, there’s always the option of doing this in-house. For some, that makes sense and is a valid approach, but the task is trickier and more time consuming than it may seem. Various odds and ends exist for each platform: the Chrome Web Store, mobile, Windows App Store, etc… and that work can add up to be quite a bit (trust us, we know that very well) – fortunately with a single service taking care of these issues, you don’t have to, and can focus on the game itself.

Distribution

There are two approaches you can take for revenue when developing a game: 1) Developing a game to be sponsored, whether it’s exclusive, or licensed out, and 2) Developing a game to generate income itself through advertising and in-game payments. The two can overlap some, but if you’re planning on going with the second option, distribution will be a big deal for you. You make more money as your game is played by more people.

HTML5 is great because there are so many marketplaces you can get your game in: The Chrome Web Store, Windows App Store, Facebook, Mozilla Marketplace, the list goes on. Each of these marketplaces however, has their own quirky needs. For example, Facebook requires your game to be hosted over SSL, the Windows App Store requires your files to be UTF-8 with BOM, many of them require their own version of a manifest file, whether it be in JSON or XML. Clay.io takes care of all these oddities for you with our HTML5 Game Distribution exporter.

Tracking Distribution

It’s not only important to spread the seed for your game, it’s also important to see which marketplaces are most effective – it’s good to know where to focus your effort moving forward.

Clay.io automatically tracks this information if you are using are the API – you can normalize it by other metrics, meaning you can view the time spent per view on each site, or number of views per purchase, etc..

Our Own Marketplace

In addition to the tools we provide for distributing your games to these other marketplaces, we’ve also developed a marketplace exclusively for HTML5 Games. Each of the other marketplaces are great, but the main thing they lack is the ability to play games on any platform/device. The Chrome Web Store limits you to Chrome on Desktop, as do the Mozilla Marketplace and Windows App Store.

Our main goal is to help HTML5 game developers as much as possible, which means we really care what you have to say on how we can improve our products and service. With that said, please reach out to us with your comments and suggestions at contact@clay.io.

Creating a virtual pet tutorial

Pascal Rettig — Tue, 26 Feb 2013 07:59:09 -0500

Pablo Farías at Zenva has posted a tutorial on BinPress.com on creating a virtual pet game with HTML5.

Check out the full tutorial and head over to Zenva for more HTML5 Game tutorials.

Isometric Diablo-like game in 550 LOC

Pascal Rettig — Mon, 18 Feb 2013 19:57:13 -0500

A simple diablo-like game with a point-and-click interface using a 2D-Canvas isometric view. Nicely done in just over 550 Lines of JavaScript.

Mod.it contest: "Make It Anything" with over $3000 in prizes

Pascal Rettig — Mon, 18 Feb 2013 13:17:41 -0500

Mod.it is a newly launched platform for collaboration and hacking on HTML5 games right from your browser (you can give Mod.it a test drive by just visiting the site - no account or login is required to get started)

As part of the lead up to the platform's official beta launch at SXSW, Mod.it is hosting a contest called "Make It Anything" that encourages uses to try out the system and create their own Mods.

The top three winners in each of 3 categories:

Most Played
Most Popular
Most Moddable

will each win a cash prize $600, $300 or $100 and will be featured during Mod.it's SXSW workshop and booth at SXSW Gaming. An additional prize will be given out to the community MVP - the user that provides the most valuable feedback during the contest.

Jump on over to Mod.it/contest to get more details (and if you want meta - the contest page presentation is just a Mod created in Mod.it using reveal.js)

Making the Move to HTML5 as a console developer

Pascal Rettig — Sat, 16 Feb 2013 18:17:00 -0500

David Galeano and Duncan Tebbs, developers at HTML5 game portal Turbulenz have posted the first part of an three part series on moving to HTML5 from console development.

The talk about a number of specifics and peculiarities of the JavaScript and what tools you can use to help make the leap.

Read the full article on GamaSutra.com

CopperCube 4.0

Pascal Rettig — Sat, 16 Feb 2013 17:25:00 -0500

CopperCube is a full 3D Game development environment with support for WebGL published (in addition to Windows, Mac, Flash and now Android)

The recently released version 4.0 of the IDE (which runs on both Windows and OS X) adds in Android support as well as particle effects. The editor comes with a 14-day trial and comes in two flavors: a $99 Light editor and a $299 Professional edition.

Check out the latest WebGL demos as well as more details at Ambiera.com

[Defunct]

Pascal Rettig — Sat, 16 Feb 2013 13:16:43 -0500

Temporarily removing the content of this post until I can verify if the course is legit.

HabitRPG: Gamify Your Life

Tyler Renelle — Mon, 11 Feb 2013 10:02:02 -0500

HabitRPG adds fun to habit-tracking, todo lists, and GTD by gamifying your life, turning your goals into a Role Playing Game. Level up as you succeed, lose HP as you fail, earn money to buy weapons and armor. It's open source and constantly improving.

JavaScript, of Course!

Habit’s built on Derby, a real-time Node.js framework. Derby employes Node, MongoDB, Socket.IO, and an Angular-like client MVC with model-view bindings and real-time persistence. I'm sure you've heard of Meteor - they're direct competitors. Frienemies even.

Choosing Derby took weighing pros and cons. On the one hand, it does so much stuff for you - the app was an absolute breeze to write. It seems like magic at first that variable bindings in your HTML are automatically persisted to the database and reflected real-time in other browsers, with a simple <input type="text" value="{edit_me}"/>. On the other hand, the framework is quite young, and Habit has seen many hard issues only to find them fixed with the next derby#master push.

Would I do it again? Absolutely.

Hosting

At first Habit was hosted on Heroku. Heroku doesn't support Websockets, but Socket.IO has a fallback option of XHR-polling. In my limited load testing, I in fact found that XHR-polling supported more concurrent users than Websockets; and the real-time communication was sufficiently fast for my needs (you'd be surprised!). However, you HTML5 multiplayer game devs will probably prefer Websockets - you need every ounce of real-time speed you can get. In that case, you can’t user Heroku.

Now, Racer (Derby's database driver) doesn't yet support session-handling over multiple processes, which Heroku and Nodejitsu use for horizontal scaling. As a result I recommend either Appfog (which gives you a comparatively beefy single instance for free) or custom hosting - we're using Liquid Web, but of course there's AWS. Incidentally, Derby doesn't use that many resources - 512MB-1GB RAM and ~50% CPU utilization at my peak load (I don't have proper metrics, sorry). The biggest concern with scalability ended up being MongoDB. Add your indexes and optimize your set() operations! See this article for more.

A Leg Up

Other things I’m using:

BrowserQuest creative commons icon set
Bootstrap

Google adds WebGL support to Chrome Flags in latest Android beta

Pascal Rettig — Fri, 25 Jan 2013 07:48:36 -0500

Google has finally made it easy to turn on WebGL on it's flagship Chrome for Android browser.

Simply make sure you have the latest Beta from the Play store and hit up everyone's favorite chrome://flags page.

More at TheNextWeb.com