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

Ready to Play: JavaScript / HTML5 Game Development

on

  • 18,854 views

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.

Statistics

Views

Total Views
18,854
Views on SlideShare
8,907
Embed Views
9,947

Actions

Likes
8
Downloads
99
Comments
1

9 Embeds 9,947

http://www.zachstronaut.com 8693
http://www.wouterbaars.net 1154
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
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • awesome!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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

Ready to Play: JavaScript / HTML5 Game Development Ready to Play: JavaScript / HTML5 Game Development Presentation Transcript

  • 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