Newbie’s thoughts on HTML5 Game Development

There is a lot of mixed opinions about HTML5 & Game Development. You ask one person, they will say HTML5 is not ready, or it’s too slow for real games. Another will say JavaScript isn’t a real programming language and it’s a horrible mess. Some will say HTML5 is ready to go and anyone can get started. So what’s going on? As a 14 year old who loves to program I finally decided to try out game development. HTML5/JavaScript were the technologies I chose to use for developing my first game, “Stellar Alien”. I was leaning more towards Java or Python, but I’ve always preferred the Web Platform. The Web is the most open platform of all and it’s a very large audience you can reach out to (after all, it’s the world-wide web!).

Naturally, when I heard about HTML5 and its capabilities, I decided to play around with it to see what it was about, although I was a bit skeptical. HTML is just a markup language after all, how are people making games that are comparable to the ones that were developed in “Adobe Flash” with it? I started diving in and found that the game logic is actually written in JavaScript and HTML5 provides a new <canvas> API that allows JavaScript to draw on a 2D Surface.

After a few months, I completed my first game in HTML5/JavaScript, “Stellar Alien”. It was a very interesting project and I learned a lot about game development, developing a large project & programming in general. I’ve decided to post my thoughts & opinions on HTML5 Game Development because I think it may interest some Web Developers who’ve been meaning to experiment with HTML5, but are skeptical due to all of the mixed feedback about developing games in HTML5.

HTML5 is ready

But it’s not perfect. Neither are your other popular browser-based games alternatives such as Flash, Unity3D, or Java(via applet). There are some quirks and you find yourself sometimes coming up with a little “hack” to get something to work properly, and those aren’t fun. HTML5 Game Engines can really save you the pain of getting started in HTML5 Game Development, although I wrote Stellar Alien without one and it was not too bad.

Although I do think it’s ready, I don’t think EVERYTHING should be in HTML5/JavaScript now. It depends on your game and your goal. Although I do think you should always try to prefer HTML5. It’s a very open platform and you don’t have to work and pay for Flash’s IDE, or work in Unity3D. Just fire up your favorite text editor and get going.

Browser Support is decent

It’s not 2009 anymore! I see a lot of reasons why people do not fully dive into HTML5 including old-news about it having bad browser support or it will only work with a very minimal amount of browsers. It is 2013 at the time of this writing and the support for the important HTML5 Technologies most 2D games need (<canvas> tag, <audio> tag, localStorage) is great. <canvas> is supported on all major browsers that you should care about, including Firefox, Chrome, Opera, IE9, & Safari. It is the same for the new <audio> tag. Although the HTML5 Audio has some bad issues I’ll discuss in a minute.

Canvas is fast(enough)

And if it’s not, you can make optimizations, like any other software you would write.
You can implement “dirty rectangles” so your game will only clear pixels where it’s necessary and not the whole canvas every frame(although some game engines take care of this).  If you have a large background image like my game has, you should draw that background image on another canvas, that isn’t in a loop, and then draw your foreground canvas on top of the background. This is so that your large image is only drawn once, and not every frame.

Game engines, game engines!

Not everyone wants to start coding a game from scratch like I did. I understand that. You can get started much quicker by using a game engine. There are many game engines out there for HTML5 that really make developing in it a lot more pleasant. ImpactJS is a very popular game engine, although it’s $99 dollars. If you dislike commercial game engines like me, and want something free & open source, then check out CraftyJS, it’s one of the favorite ones I’ve played around with. Also look at this table on Github that lists tons of open source game engines to use:https://github.com/bebraw/jswiki/wiki/Game-Engines

HTML5 Audio sucks

The HTML5 <audio> tag wasn’t fun to develop in. It is buggy, it is bad, it just isn’t good. And sound is an important part of a game. I’ve noticed some sound would stutter, like there was some latency issues, some wouldn’t even play at all!

But not all hope is lost! The Web Audio API is a more advanced JavaScript API for doing all that crazy audio stuff on the Web than the <audio> tag, and it’s awesome! At a glance, it looks like a complex API, but you simplify it and build your own little audio system.

So should you use Web Audio or the <audio> tag? Well, it depends on your game really. All my game had to do was play a few sounds, some background music, and it was okay, so I ended up using an open source audio library called YAAK, which uses <audio> tags, but saves me some of the pain of working with them. Other games may need more complex audio programming, and some even have gameplay that depend on sound! That is where Web Audio should definitely be the one your game should be using.

One problem with the Web Audio API is that it’s newer than the <audio> tag. Which means browser support isn’t as good. Web Audio is supported on Chrome & Safari 6.0. Firefox has planned support for Web Audio but they are seriously taking their sweet time (perhaps they’re focusing on their awesome new OS).

Conclusion

Developing my first game in HTML5/JavaScript was a blast (most of the time). I will definitely consider developing my upcoming games in HTML5 again. I hope more indie game developers, web developers, web designers, or newbies to game development to dive into HTML5 for making their games and have a great time hacking!

  • http://clay.io/development-tools Austin Hallock

    It’s nice to see the blog posts trend transition from more negative experiences to more positive experiences for HTML5 games. Well written post with some good tips for those first getting into HTML5 game development.

    I’d like to also throw in for anyone reading this, that I think the true value of HTML5 is the fact that it is cross-platform by nature. It’s fairly easy to get games working on mobile devices, but is something that should be considered when planning out the game (you have to take things like user input into account).

  • http://stoner-dan.github.com Henry

    Wow I love the layout of this blog…