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.

1. Ready to Play:
JavaScript / HTML5
Game Development
@zacharyjohnson
http://www.zachstronaut.com/
Friday, June 10, 2011

2. What does HTML5 have
to do with video games?
Friday, June 10, 2011

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. 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. Can I actually use
this stuff now?
Friday, June 10, 2011

6. Yes, let’s start with
<canvas> and <audio>!
Friday, June 10, 2011

7. <audio> lets you play... audio.
Background music, sound effects, volume
control, multiple channels.
Basic and generic JavaScript API.
Friday, June 10, 2011

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. Can I see it in action?
Why yes! Yes you can!
Friday, June 10, 2011

10. Commander Clone
http://a.stronaut.com/z1e
-<canvas> and <audio>
-Akihabara Engine
-Experimental Gameplay Project
Friday, June 10, 2011

11. Re-Infiltration at Dusk
http://a.stronaut.com/z1b
-<canvas> and <audio>
-Custom Engine
Friday, June 10, 2011

12. Works in Safari,
Chrome, Firefox, Opera,
and...
Friday, June 10, 2011

13. ... [drum roll] ...
Friday, June 10, 2011

14. ... Internet Explorer 9!
Friday, June 10, 2011

15. [applause]
Friday, June 10, 2011

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. Good point Zach, how is the
performance of <canvas>?
Why thank you.
Friday, June 10, 2011

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. 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. 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. 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. Impact Demo
http://impactjs.com/demos/physics/
Friday, June 10, 2011

23. 2D Physics / 3D Blocks
http://a.stronaut.com/z1i
-NO <canvas> this time
-HTML and CSS3
-Box2D.js
Friday, June 10, 2011

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. 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. If I make a game with HTML5
and JavaScript won’t it just
work on iOS?
Well... that depends!
Friday, June 10, 2011

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 physics
Friday, June 10, 2011

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. Are there any tools to help me?
Sure, let me tell you about a few tools...
Friday, June 10, 2011

30. Akihabara
http://www.kesiev.com/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 simple
Friday, June 10, 2011

31. Impact
http://impactjs.com/
-<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 app
Friday, June 10, 2011

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. Titanium
http://www.appcelerator.com/
-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. See also...
PhoneGap, NimbleKit, Chrome Web Store, and a
reminder: Impact can port to iOS (alpha support)
Friday, June 10, 2011

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. 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 WebGL
Friday, June 10, 2011

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. 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: http://caniuse.com/
Friday, June 10, 2011

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. It’s dangerous to go alone!
Take this!
http://a.stronaut.com/z1g
Friday, June 10, 2011

41. I’ve got a question!
I’ve got an answer!
Friday, June 10, 2011

42. Thank You
Friday, June 10, 2011