Ready to Play: JavaScript / HTML5 Game Development

Ready to Play:
JavaScript / HTML5
Game Development
@zacharyjohnson
http://www.zachstronaut.com/

Friday, June 10, 2011

What does HTML5 have
to do with video games?


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> ...


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.


Can I actually use
this stuff now?


Yes, let’s start with
<canvas> and <audio>!


<audio> lets you play... audio.
Background music, sound effects, volume
control, multiple channels.

Basic and generic JavaScript API.


<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.


Can I see it in action?
Why yes! Yes you can!


Commander Clone
http://a.stronaut.com/z1e

-<canvas> and <audio>
-Akihabara Engine
-Experimental Gameplay Project


Re-Infiltration at Dusk
http://a.stronaut.com/z1b

-<canvas> and <audio>
-Custom Engine


Works in Safari,
Chrome, Firefox, Opera,
and...


... [drum roll] ...


... Internet Explorer 9!


[applause]


Yeah but it probably sucks
in IE right?
No, actually it is crazy fast in IE9 because it is
hardware accelerated via DirectX.


Good point Zach, how is the
performance of <canvas>?
Why thank you.


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.


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.


What about the physics part of
Angry Birds though?
HTML5’s <canvas> only gives you
a place to draw graphics...


Fast JavaScript engines
to the rescue!
There are now at least two ports of the
Box2D physics library to JavaScript.


Impact Demo
http://impactjs.com/demos/physics/


2D Physics / 3D Blocks
http://a.stronaut.com/z1i

-NO <canvas> this time
-HTML and CSS3
-Box2D.js


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.


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)


If I make a game with HTML5
and JavaScript won’t it just
work on iOS?
Well... that depends!


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


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.


Are there any tools to help me?
Sure, let me tell you about a few tools...


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


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


What about distribution?
Of course you can put your HTML5 game on a
web site, but there are other options as well...


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.


See also...
PhoneGap, NimbleKit, Chrome Web Store, and a
reminder: Impact can port to iOS (alpha support)


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.


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


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.


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/


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!


It’s dangerous to go alone!
Take this!
http://a.stronaut.com/z1g


I’ve got a question!
I’ve got an answer!


Thank You


Ready to Play: JavaScript / HTML5 Game Development

More Related Content

Similar to Ready to Play: JavaScript / HTML5 Game Development (20)

Recently uploaded (20)

Ready to Play: JavaScript / HTML5 Game Development

Editor's Notes