Your SlideShare is downloading. ×
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Ready to Play: JavaScript / HTML5 Game Development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Ready to Play: JavaScript / HTML5 Game Development

18,868

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 …

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
18,868
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
100
Comments
1
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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

    • 1. Ready to Play: JavaScript / HTML5 Game Development @zacharyjohnson http://www.zachstronaut.com/Friday, June 10, 2011
    • 2. What does HTML5 have to do with video games?Friday, June 10, 2011
    • 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. 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. Can I actually use this stuff now?Friday, June 10, 2011
    • 6. Yes, let’s start with <canvas> and <audio>!Friday, June 10, 2011
    • 7. <audio> lets you play... audio. Background music, sound effects, volume control, multiple channels. Basic and generic JavaScript API.Friday, June 10, 2011
    • 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. Can I see it in action? Why yes! Yes you can!Friday, June 10, 2011
    • 10. Commander Clone http://a.stronaut.com/z1e -<canvas> and <audio> -Akihabara Engine -Experimental Gameplay ProjectFriday, June 10, 2011
    • 11. Re-Infiltration at Dusk http://a.stronaut.com/z1b -<canvas> and <audio> -Custom EngineFriday, June 10, 2011
    • 12. Works in Safari, Chrome, Firefox, Opera, and...Friday, June 10, 2011
    • 13. ... [drum roll] ...Friday, June 10, 2011
    • 14. ... Internet Explorer 9!Friday, June 10, 2011
    • 15. [applause]Friday, June 10, 2011
    • 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. Good point Zach, how is the performance of <canvas>? Why thank you.Friday, June 10, 2011
    • 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. 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. 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. 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. Impact Demo http://impactjs.com/demos/physics/Friday, June 10, 2011
    • 23. 2D Physics / 3D Blocks http://a.stronaut.com/z1i -NO <canvas> this time -HTML and CSS3 -Box2D.jsFriday, June 10, 2011
    • 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. 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. If I make a game with HTML5 and JavaScript won’t it just work on iOS? Well... that depends!Friday, June 10, 2011
    • 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. 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. Are there any tools to help me? Sure, let me tell you about a few tools...Friday, June 10, 2011
    • 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. 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. 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. 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. See also... PhoneGap, NimbleKit, Chrome Web Store, and a reminder: Impact can port to iOS (alpha support)Friday, June 10, 2011
    • 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. 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. 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. 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. 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. It’s dangerous to go alone! Take this! http://a.stronaut.com/z1gFriday, June 10, 2011
    • 41. I’ve got a question! I’ve got an answer!Friday, June 10, 2011
    • 42. Thank YouFriday, June 10, 2011

    ×