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

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

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

Can I actually use this stuff now?Friday, June 10, 2011

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

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

<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

Can I see it in action? Why yes! Yes you can!Friday, June 10, 2011

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

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

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

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

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

[applause]Friday, June 10, 2011

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

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

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

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

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

Fast JavaScript engines to the rescue! There are now at least two ports of the Box2D physics library to JavaScript.Friday, June 10, 2011

Impact Demo http://impactjs.com/demos/physics/Friday, June 10, 2011

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

It’s dangerous to go alone! Take this! http://a.stronaut.com/z1gFriday, June 10, 2011

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

Thank YouFriday, June 10, 2011

http://www.zachstronaut.com	8431
http://www.wouterbaars.net	1004
url_unknown	62
http://translate.googleusercontent.com	19
http://www.slideshare.net	11
http://andiblog.de	5
http://www.techgig.com	1
http://webcache.googleusercontent.com	1
http://fanyi.youdao.com	1

Ready to Play: JavaScript / HTML5 Game Development

by Zachary Johnson on Jun 10, 2011

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 9,535

Statistics

Ready to Play: JavaScript / HTML5 Game Development Presentation Transcript