ready to play: javascript / html5 game development
DESCRIPTION
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.TRANSCRIPT
![Page 1: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/1.jpg)
Ready to Play: JavaScript / HTML5 Game Development
@zacharyjohnsonhttp://www.zachstronaut.com/
Friday, June 10, 2011
![Page 2: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/2.jpg)
What does HTML5 have to do with video games?
Friday, June 10, 2011
![Page 3: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/3.jpg)
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
![Page 4: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/4.jpg)
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
![Page 5: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/5.jpg)
Can I actually use this stuff now?
Friday, June 10, 2011
![Page 6: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/6.jpg)
Yes, let’s start with <canvas> and <audio>!
Friday, June 10, 2011
![Page 7: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/7.jpg)
<audio> lets you play... audio.Background music, sound effects, volume
control, multiple channels.
Basic and generic JavaScript API.
Friday, June 10, 2011
![Page 8: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/8.jpg)
<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
![Page 9: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/9.jpg)
Can I see it in action?Why yes! Yes you can!
Friday, June 10, 2011
![Page 10: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/10.jpg)
Commander Clonehttp://a.stronaut.com/z1e
-<canvas> and <audio>-Akihabara Engine
-Experimental Gameplay Project
Friday, June 10, 2011
![Page 11: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/11.jpg)
Re-Infiltration at Duskhttp://a.stronaut.com/z1b
-<canvas> and <audio>-Custom Engine
Friday, June 10, 2011
![Page 12: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/12.jpg)
Works in Safari, Chrome, Firefox, Opera,
and...
Friday, June 10, 2011
![Page 13: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/13.jpg)
... [drum roll] ...
Friday, June 10, 2011
![Page 14: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/14.jpg)
... Internet Explorer 9!
Friday, June 10, 2011
![Page 15: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/15.jpg)
[applause]
Friday, June 10, 2011
![Page 16: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/16.jpg)
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
![Page 17: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/17.jpg)
Good point Zach, how is the performance of <canvas>?
Why thank you.
Friday, June 10, 2011
![Page 18: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/18.jpg)
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
![Page 19: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/19.jpg)
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
![Page 20: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/20.jpg)
What about the physics part of Angry Birds though?
HTML5’s <canvas> only gives youa place to draw graphics...
Friday, June 10, 2011
![Page 21: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/21.jpg)
Fast JavaScript engines to the rescue!
There are now at least two ports of theBox2D physics library to JavaScript.
Friday, June 10, 2011
![Page 22: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/22.jpg)
Impact Demohttp://impactjs.com/demos/physics/
Friday, June 10, 2011
![Page 23: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/23.jpg)
2D Physics / 3D Blockshttp://a.stronaut.com/z1i
-NO <canvas> this time-HTML and CSS3
-Box2D.js
Friday, June 10, 2011
![Page 24: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/24.jpg)
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
![Page 25: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/25.jpg)
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
![Page 26: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/26.jpg)
If I make a game with HTML5 and JavaScript won’t it just
work on iOS?Well... that depends!
Friday, June 10, 2011
![Page 27: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/27.jpg)
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
![Page 28: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/28.jpg)
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
![Page 29: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/29.jpg)
Are there any tools to help me?Sure, let me tell you about a few tools...
Friday, June 10, 2011
![Page 30: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/30.jpg)
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
Friday, June 10, 2011
![Page 31: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/31.jpg)
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
Friday, June 10, 2011
![Page 32: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/32.jpg)
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
![Page 33: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/33.jpg)
Titaniumhttp://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
![Page 34: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/34.jpg)
See also...PhoneGap, NimbleKit, Chrome Web Store, and a
reminder: Impact can port to iOS (alpha support)
Friday, June 10, 2011
![Page 35: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/35.jpg)
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
![Page 36: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/36.jpg)
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
![Page 37: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/37.jpg)
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
![Page 38: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/38.jpg)
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
![Page 39: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/39.jpg)
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
![Page 40: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/40.jpg)
It’s dangerous to go alone! Take this!
http://a.stronaut.com/z1g
Friday, June 10, 2011
![Page 41: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/41.jpg)
I’ve got a question!I’ve got an answer!
Friday, June 10, 2011
![Page 42: Ready to Play: JavaScript / HTML5 Game Development](https://reader031.vdocuments.mx/reader031/viewer/2022020207/554bc8c9b4c90594278b5758/html5/thumbnails/42.jpg)
Thank You
Friday, June 10, 2011