0
Ready to Play:                        JavaScript / HTML5                        Game Development                          ...
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   ...
And what the hell is                         HTML5 anyway?                ... but, HTML5 the marketing buzz word, has     ...
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                            ...
<canvas> is a 2D                            drawing surface.                   Low level pixel manipulation or higher leve...
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>      ...
Re-Infiltration at Dusk                          http://a.stronaut.com/z1b                           -<canvas> and <audio>...
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 ...
Good point Zach, how is the                        performance of <canvas>?                                Why thank you.F...
Performance of <canvas>                        on your desktop/laptop is                               very good.         ...
How good is very good?              You could get 60 FPS if you made Tiny Wings or             Angry Birds or Super Mario ...
What about the physics part of                    Angry Birds though?                        HTML5’s <canvas> only gives y...
Fast JavaScript engines                              to the rescue!                        There are now at least two port...
Impact Demo                        http://impactjs.com/demos/physics/Friday, June 10, 2011
2D Physics / 3D Blocks                          http://a.stronaut.com/z1i                           -NO <canvas> this time...
So you don’t have to use                        <canvas> to make a game?                  Sometimes it is better to use yo...
When/why would I use                              HTML/CSS?                           -High level, can shorten dev cycle  ...
If I make a game with HTML5                    and JavaScript won’t it just                           work on iOS?        ...
So what are the gotchyas for                      mobile HTML5 games?                  -<audio> is crippled in mobile web ...
That sounds like a lot of                              problems...             Actually there are plenty of games you can ...
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/framewor...
Impact                             http://impactjs.com/                    -<canvas> based game library/framework         ...
What about distribution?                 Of course you can put your HTML5 game on a                 web site, but there ar...
Titanium                        http://www.appcelerator.com/                             -Free and open source            ...
See also...              PhoneGap, NimbleKit, Chrome Web Store, and a             reminder: Impact can port to iOS (alpha ...
Aren’t you forgetting                    something? You haven’t said                         much about 3D...             ...
Quickly, let me mention WebGL                   -WebGL is an implementation of OpenGL                  -It is hardware acc...
That sounds spiffy, when can I                           use that?                You can use it now in Chrome 10 and Fire...
Anything else I should know?              Yeah... come to think of it you should know about                 Web Sockets. T...
Thanks, do you have a                           closing thought?               Yes... web technology is moving so rapidly ...
It’s dangerous to go alone!                                 Take this!                            http://a.stronaut.com/z1...
I’ve got a question!                           I’ve got an answer!Friday, June 10, 2011
Thank YouFriday, June 10, 2011
Upcoming SlideShare
Loading in...5
×

Ready to Play: JavaScript / HTML5 Game Development

19,024

Published on

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.

Published in: Technology, Design
1 Comment
8 Likes
Statistics
Notes
  • awesome!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
19,024
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
102
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Ready to Play: JavaScript / HTML5 Game Development"

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

      Clipping is a handy way to collect important slides you want to go back to later.

    ×