<games />

1. <games /> Gil Megidish gil@megidish.net

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

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

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. Anatomy of a Game LOGIC GRAPHICS INPUT SOUND MUSIC MULTIPLAYER GAME ASSETS

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

10. Graphics

11. Framebuffer (raw) x y 0,0 0,1 0,2 0,3 0,4 0,5 0,6 0,7 … 0,x 1,0 1,1 1,2 1,3 1,4 1,5 1,6 1,7 … 1,x . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . y,0 y,1 y,2 y,3 y,4 y,5 y,6 y,7 … y,x

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 <canvas id=“graphics” width=“640” height=“480”> Guru Meditation: No canvas supported! </canvas> 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() getImageData combined with primitive drawing = save image to disk! Read image pixels These examples are available to http://www.chromeexperiments.com/

30. The Jazz Singer

31. Let There Be Sound! <audio id=“sfx001” src=“/mp3/boom.mp3”></audio> $(“sfx001”).play();

32. Let There Be Sound! <audio id=“sfx001” src=“/mp3/boom.mp3”></audio> $(“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 Blackberry coming June 1st!

39. Q&A

40. Q&A • Yes! You can use <canvas> in Internet Explorer 6? <!--[if IE]> <script type="text/javascript“ src="/js/excanvas.js"> </script> <![endif]--> PS. Remember to upgrade your mother’s IE!

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

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