ready to play: javascript / html5 game development

Ready to Play: JavaScript / HTML5 Game Development

@zacharyjohnsonhttp://www.zachstronaut.com/

Friday, June 10, 2011

http://www.zachstronaut.com

http://www.zachstronaut.com

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 Clonehttp://a.stronaut.com/z1e

-<canvas> and <audio>-Akihabara Engine

-Experimental Gameplay Project


http://a.stronaut.com/z1e

http://a.stronaut.com/z1e

Re-Infiltration at Duskhttp://a.stronaut.com/z1b

-<canvas> and <audio>-Custom Engine


http://a.stronaut.com/z1b

http://a.stronaut.com/z1b

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 youa place to draw graphics...


Fast JavaScript engines to the rescue!

There are now at least two ports of theBox2D physics library to JavaScript.


Impact Demohttp://impactjs.com/demos/physics/


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

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

2D Physics / 3D Blockshttp://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...


Akihabarahttp://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


http://www.kesiev.com/akihabara/

http://www.kesiev.com/akihabara/

Impacthttp://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


http://impactjs.com

http://impactjs.com

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


Titaniumhttp://www.appcelerator.com/

-Free and open source-Package game as native app for Windows, Linux, Mac, Mac App Store, iOS App Store,

Android.


http://www.appcelerator.com

http://www.appcelerator.com

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/


http://caniuse.com

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

Technology