1. Gil Megidish gil@megidish.net

2. And I love writing / rewriting / reverse engineering games

4. Canvas Video Audio Web Sockets Web Storage Web Worker Web Database Selectors Validation File API Semantic Elements What The Heck is HTML5

5. Games + Javascript? = wtf

6. Why Bother With Javascript? Fun to develop –Hacker ’ s spielplatz! Fast deployment –Serve static files Easy to debug –alert(), firebug.. Still better than the alternative! Open source and free tools –Notepad, vi, emacs B.Y.O. framework –jQuery? spielplatz

7. But Why REALLY? Has been around for ages Won ’ t go away any time soon Wide support: –Web browsers –Mobile devices –Facebook applications –On a rocket near you

8. LOGIC GRAPHICS INPUT SOUND Anatomy of a Game MUSIC MULTIPLAYER GAME ASSETS

9. LOGIC GRAPHICS INPUT SOUND Anatomy of a Game MUSIC MULTIPLAYER GAME ASSETS javascript code onkeydown, onmousedown ajax, WebSocket Images, Audio, Video and Binary supported by browsers

10. Graphics

11. Framebuffer (raw) 0,00,10,20,30,40,50,60,70,x 1,01,11,21,31,41,51,61,71,x y,0y,1y,2y,3y,4y,5y,6y,7y,x x y … … …..................

13. Tile + Sprite Memory

15. Scene Graph Placeholder For Future Presentation

17. Canvas is King

18. DEMO TIME!

19. Three Demos To Rule Them All Framebuffer demo http://www.megidish.net/apple2js/ Sprites demo http://www.megidish.net/alphageeks6/luigi/ Vector graphics demo http://www.megidish.net/awjs/

20. Catch me a canvas Guru Meditation: No canvas supported! var canvas = document.getElementById(“graphics”); var context = canvas.getContext(“2d”);

22. Drawing Primitives ctx.fillStyle = “#c80000"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); Other drawing methods: arc, bezierCurve, lineTo, quadraticCurve, rect, stroke, fillText, strokeText, beginPath/closePath and fill

23. (but who needs that ?)

24. Drawing Images var sprite = new Image(); sprite.src = “ luigi.png ” ; var x = 0, y = 0; ctx.drawImage(sprite, x, y);

25. Drawing Images 2 var spritemap = new Image(); spritemap.src = “ sprite-map.png ” ; ctx.drawImage( spritemap, sx, sy, sw, sh, dx, dy, dw, dh ); Sprite maps save loading time by fewer requests and better compression. drawImage() also provides scaling and cropping.

26. Going Crazy With Images // context state checkpoint ctx.save(); ctx.translate(0, 80); ctx.rotate(-45 * Math.PI / 180.0); ctx.scale(3.0, 1.0); ctx.drawImage(luigi, 0, 0); // revert all context changes ctx.restore();

27. Accessing Pixels var block = ctx.getImageData(sx, sy, sw, sh); block = { width: width in pixels, height: height in pixels, data: array of 4*width*height bytes }; Alternatively: ctx.createImageData(w, h);

28. Accessing Pixels var block = ctx.getImageData(0, 0, canvas.width/2, canvas.height); for (var y=0; y<block.height; y++) { for (var x=0; x<block.width; x++) { block.data[(y*block.width+x)*4+0] ^= 0xff; block.data[(y*block.width+x)*4+1] ^= 0xff; block.data[(y*block.width+x)*4+2] ^= 0xff; } ctx.putImageData(block, 0, 0);

29. Why Access Pixels ? Complicated things impossible without putImageData() Read image pixels getImageData combined with primitive drawing = save image to disk! These examples are available to http://www.chromeexperiments.com/

30. The Jazz Singer

31. Let There Be Sound! $( “ sfx001 ” ).play();

32. Let There Be Sound! $( “ sfx001 ” ).play(); Other methods: $( “ sfx001 ” ).pause(); Other attributes: $( “ sfx001 ” ).currentTime = 35.0; $( “ sfx001 ” ).volume = 0.5; $( “ sfx001 ” ).duration (read only)

33. Putting It All Together

34. Typical Game Loop function gameTick() { processKeyboard(); moveEnemies(); drawGraphics(); updateAudio(); } var fps = 60; setInterval(gameTick, 1000 / fps);

35. The Future is Upon Us!

36. Quake2 HTML5

37. What ’ s Coming Up Next WebGL –OpenGL interface for Javascript –As of May, 2010: good luck finding a stable browser! WebSocket –UDP and nonblocking transport layer –Not there yet! (KAAZING?) WebStorage –Save games?

38. Code Like It ’ s 2020! ftw! ‘s‘s Blackberry coming June 1 st !

39. Q&A

40. Yes! You can use in Internet Explorer 6? PS. Remember to upgrade your mother ’ s IE!

41. Links! Chrome Experiments: Not Your Momma ’ s JS –http://www.chromeexperiments.comhttp://www.chromeexperiments.com Appcelerator ’ s Titanium –www.appcelerator.comwww.appcelerator.com Box 2D: real time physics for JS games –http://box2d-js.sourceforge.net/index2.htmlhttp://box2d-js.sourceforge.net/index2.html Mozilla ’ s Canvas tutorial –https://developer.mozilla.org/en/Canvas_tutorialhttps://developer.mozilla.org/en/Canvas_tutorial

43. GO MAKE GAMES! http://www.megidish.net