1. JavaScript Game Development
An Overview
Grant Goodale
grant@massivelyfun.com
@ggoodale (me)
@massivelyfun (us)
#seagamejs
February 8, 2012

2. =
(for games)

3. Open Web Technologies
DOM / CSS3
Yes, you can build DOM games! (Word2, CraftyJS)
Most widely supported
H/W Accelerated CSS3 in most browsers
JavaScript (Code)
Performance is an active topic of research

4. Open Web Technologies
Canvas: Low-level 2D drawable region
Hardware-accelerated almost everywhere
Spec: http://j.mp/canvas_spec
Tutorials: https://developer.mozilla.org/en/
Canvas_tutorial

5. Open Web Technologies
WebGL: H/W accelerated 3D interface on top of
canvas
Runs on the GPU (must be shader-capable)
shaders specified in a dialect of GLSL
No mobile support yet, not supported in IE

6. Open Web Technologies
WebSockets (low-level data transport)
Supported in all major browsers, but spec version
varies
Web Workers (background processing)
Multithreaded background tasks in JavaScript
Supported in all desktop browsers, iOS 5.x

7. Why do I care?
“I am a __________ and
would like to build ____
games for _____.”
Image: http://umad.com

8. Why do I care?
(Check all that apply)
I Am: I Want To:
a web developer build web games
a Flash game developer build Facebook games
a C/C#/C++ game build games for mobile
developer devices
not a developer (yet) build in 2D
build in 3D

9. Distribution!
ABI Research: 2.1 billion HTML5-capable mobile
devices by 2015
Windows 8 Metro - no plugins (pure HTML5)
Rich Hilleman, CCO EA @ New Game Conf:
"When you get paid on the way out the door, you
want the maximum distribution possible from all
possible sites."

10. We’re just getting started
Rich Hilleman, speaking of desktop browsers:
“No reason we can’t have immersive experiences
on this platform”
“PS2-level hardware is where we’re at now, more
than enough for immersive experiences”
Accelerants: Spaceport, appMobi open source,
Bocoup, us. :)

11. The Rough Spots
Development tools
Performance (not at the front of the curve, but
dramatically improved over 6 months ago)
Asset management / asset pipeline
Sound

12. Coming from Flash?
ThinkPixel’s PL (https://github.com/thinkpixellab/pl/
tree/master/src/retained)
Easel.js: http://easeljs.com/
Retained-mode graphics
Hierarchical Display List
See also: Zoë http://easeljs.com/zoe.html (sprite
sheets from SWF animations)

13. Coming from C/C#/C++?
WebGL 3D is challenging right now (IE, mobile support
lacking)
three.js works on 2D canvas and is AMAZING: http://
mrdoob.github.com/three.js/
Gamepad support, mouse lock, fullscreen - all being
worked on, none ready yet
BF3 for the web is a year or two out.

14. Coming from Web Dev?
Get reading!
Dozens of tutorials, engines, and other resources to
help you get started:
Engines: http://easeljs.com, http://impactjs.com
Canvas tutorial: https://developer.mozilla.org/en/
Canvas_tutorial
WebGL: http://learningwebgl.com

15. We’re Hiring!
jobs@massivelyfun.com