Game development using HTML5 technologies presentation, May 2010. This lecture was given by Gil Megidish at AlphaGeeks #6 meetup in Tel Aviv, Israel. The talk begins with some review of the game graphics techniques, and how you can achieve these with today's browsers and client side code. 4 demos were presented: sprites with canvas (luigi), framebuffer access (apple2 emulator), primitives and polygons (another world js) and image modifiers (droste effect.) The lecture was given in Hebrew, ppt is English.

1. <games /> Gil Megidish [email_address]

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

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

5. Man will make it to Mars before HTML5 is on my Firefox! W3C’s ETA: Year 2022

6. Games + Javascript? = wtf

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

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

11. Graphics

12. Framebuffer (raw) 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 x y … … … . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

14. Tile + Sprite Memory

16. Scene Graph Placeholder For Future Presentation

18. Canvas is King

19. DEMO TIME!

20. 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/

24. (but who needs that ?)

27. 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();

30. 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/

31. The Jazz Singer

34. Putting It All Together

36. The Future is Upon Us!

37. Quake2 HTML5

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

40. Q&A

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