Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ready to Play: JavaScript / HTML5 Game Development

Plug-in free (read: without Flash) web browser video game development with HTML5 and JavaScript has matured, and is here to stay. In this quick overview of the current landscape, I will cover the technology available today and what is on the horizon. I will also demo some games, discuss engines and libraries, and serve a big dose of reality about desktop browser vs mobile browser performance.

  • Be the first to comment

Ready to Play: JavaScript / HTML5 Game Development

  1. 1. Ready to Play: JavaScript / HTML5 Game Development @zacharyjohnson, June 10, 2011
  2. 2. What does HTML5 have to do with video games?Friday, June 10, 2011
  3. 3. And what the hell is HTML5 anyway? Mostly, HTML5 the markup language, is just a bunch of new tags like: <canvas>, <audio>, <video>, <article>, <nav> ...Friday, June 10, 2011
  4. 4. And what the hell is HTML5 anyway? ... but, HTML5 the marketing buzz word, has come to mean: all those new tags, plus CSS3 and highly optimized browser JavaScript engines.Friday, June 10, 2011
  5. 5. Can I actually use this stuff now?Friday, June 10, 2011
  6. 6. Yes, let’s start with <canvas> and <audio>!Friday, June 10, 2011
  7. 7. <audio> lets you play... audio. Background music, sound effects, volume control, multiple channels. Basic and generic JavaScript API.Friday, June 10, 2011
  8. 8. <canvas> is a 2D drawing surface. Low level pixel manipulation or higher level functions to draw paths, images, circles, etc. Generic JavaScript API, not game-specific.Friday, June 10, 2011
  9. 9. Can I see it in action? Why yes! Yes you can!Friday, June 10, 2011
  10. 10. Commander Clone -<canvas> and <audio> -Akihabara Engine -Experimental Gameplay ProjectFriday, June 10, 2011
  11. 11. Re-Infiltration at Dusk -<canvas> and <audio> -Custom EngineFriday, June 10, 2011
  12. 12. Works in Safari, Chrome, Firefox, Opera, and...Friday, June 10, 2011
  13. 13. ... [drum roll] ...Friday, June 10, 2011
  14. 14. ... Internet Explorer 9!Friday, June 10, 2011
  15. 15. [applause]Friday, June 10, 2011
  16. 16. Yeah but it probably sucks in IE right? No, actually it is crazy fast in IE9 because it is hardware accelerated via DirectX.Friday, June 10, 2011
  17. 17. Good point Zach, how is the performance of <canvas>? Why thank you.Friday, June 10, 2011
  18. 18. Performance of <canvas> on your desktop/laptop is very good. Hardware acceleration of graphics in Chrome and IE9, partial acceleration in Safari and Firefox... rapidly progressing.Friday, June 10, 2011
  19. 19. How good is very good? You could get 60 FPS if you made Tiny Wings or Angry Birds or Super Mario World or Zelda: A Link to the Past.Friday, June 10, 2011
  20. 20. What about the physics part of Angry Birds though? HTML5’s <canvas> only gives you a place to draw graphics...Friday, June 10, 2011
  21. 21. Fast JavaScript engines to the rescue! There are now at least two ports of the Box2D physics library to JavaScript.Friday, June 10, 2011
  22. 22. Impact Demo, June 10, 2011
  23. 23. 2D Physics / 3D Blocks -NO <canvas> this time -HTML and CSS3 -Box2D.jsFriday, June 10, 2011
  24. 24. So you don’t have to use <canvas> to make a game? Sometimes it is better to use your web development skillz and make all your sprites and layers with HTML and CSS.Friday, June 10, 2011
  25. 25. When/why would I use HTML/CSS? -High level, can shorten dev cycle -Can be more backwards compatible -Can outperform <canvas> on mobile/ iOS (for now)Friday, June 10, 2011
  26. 26. If I make a game with HTML5 and JavaScript won’t it just work on iOS? Well... that depends!Friday, June 10, 2011
  27. 27. So what are the gotchyas for mobile HTML5 games? -<audio> is crippled in mobile web browser -<canvas> is slow, not yet hardware accelerated -HTML/CSS *do* have some acceleration!! -Should use touch events, not mouse events -JavaScript engine slower, trouble with math- heavy things like physicsFriday, June 10, 2011
  28. 28. That sounds like a lot of problems... Actually there are plenty of games you can make for mobile phones with “HTML5” and a commercial market is already forming.Friday, June 10, 2011
  29. 29. Are there any tools to help me? Sure, let me tell you about a few tools...Friday, June 10, 2011
  30. 30. Akihabara -<canvas> based game library/framework -Free and open source (MIT license) -several game genre examples -mobile web support out-of-the-box, but keep your game and graphics simpleFriday, June 10, 2011
  31. 31. Impact -<canvas> based game library/framework -$99 flat fee, supports custom modules -Visual level editor -Box2D physics already plugged in -mobile support out-of-the-box, web *AND* beta conversion tool to make a native OpenGL iOS appFriday, June 10, 2011
  32. 32. What about distribution? Of course you can put your HTML5 game on a web site, but there are other options as well...Friday, June 10, 2011
  33. 33. Titanium -Free and open source -Package game as native app for Windows, Linux, Mac, Mac App Store, iOS App Store, Android.Friday, June 10, 2011
  34. 34. See also... PhoneGap, NimbleKit, Chrome Web Store, and a reminder: Impact can port to iOS (alpha support)Friday, June 10, 2011
  35. 35. Aren’t you forgetting something? You haven’t said much about 3D... That’s because all the good games are in 2D. I kid, I kid.Friday, June 10, 2011
  36. 36. Quickly, let me mention WebGL -WebGL is an implementation of OpenGL -It is hardware accelerated and low level -GL pros will be right at home with shaders, etc. -Google already ported Quake II to WebGLFriday, June 10, 2011
  37. 37. That sounds spiffy, when can I use that? You can use it now in Chrome 10 and Firefox 4. Safari support is imminent, and Opera support will follow. NO <3 on Internet Explorer or iOS.Friday, June 10, 2011
  38. 38. Anything else I should know? Yeah... come to think of it you should know about Web Sockets. This brings network i/o for multiplayer games to Safari, Chrome, and iOS with Firefox support coming soon. Check out:, June 10, 2011
  39. 39. Thanks, do you have a closing thought? Yes... web technology is moving so rapidly that, the longer your game’s dev cycle is, the more compelling JavaScript / HTML5 become!Friday, June 10, 2011
  40. 40. It’s dangerous to go alone! Take this!, June 10, 2011
  41. 41. I’ve got a question! I’ve got an answer!Friday, June 10, 2011
  42. 42. Thank YouFriday, June 10, 2011