Downloaded 1,560 times
![<games /> Gil Megidish [email_address]](https://image.slidesharecdn.com/games-100518125023-phpapp01/85/Game-Development-With-HTML5-1-320.jpg)
![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);](https://image.slidesharecdn.com/games-100518125023-phpapp01/85/Game-Development-With-HTML5-29-320.jpg)
![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!](https://image.slidesharecdn.com/games-100518125023-phpapp01/85/Game-Development-With-HTML5-41-320.jpg)
![<games /> Gil Megidish [email_address]](https://image.slidesharecdn.com/games-100518125023-phpapp01/75/Game-Development-With-HTML5-1-2048.jpg)
![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);](https://image.slidesharecdn.com/games-100518125023-phpapp01/75/Game-Development-With-HTML5-29-2048.jpg)
![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!](https://image.slidesharecdn.com/games-100518125023-phpapp01/75/Game-Development-With-HTML5-41-2048.jpg)
Uploaded byGil Megidish
Game Development With HTML5
The document discusses the development of games using HTML5, JavaScript, and related technologies, highlighting the advantages of the HTML5 canvas for graphics and audio. It includes various code examples, demos, and resources for creating games, while mentioning the limitations and future prospects of web technologies like WebGL and WebSocket. The content emphasizes the ease of debugging and open-source tools available for developers.
More Related Content
Similar to Game Development With HTML5
Game Development With HTML5
- 1. <games /> GilMegidish [email_address]
- 2. And I lovewriting / rewriting / reverse engineering games
- 3.
- 4. What The Heckis HTML5 Canvas Video Audio Web Sockets Web Storage Web Worker Web Database Selectors Validation File API Semantic Elements
- 5. Man will makeit to Mars before HTML5 is on my Firefox! W3C’s ETA: Year 2022
- 6. Games + Javascript?= wtf
- 7. Why Bother WithJavascript? 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
- 8. 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
- 9. Anatomy of aGame LOGIC GRAPHICS INPUT SOUND MUSIC MULTIPLAYER GAME ASSETS
- 10. Anatomy of aGame 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.
- 12. Framebuffer (raw) 0,00,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 … … … . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
- 13.
- 14. Tile + SpriteMemory
- 15.
- 16. Scene Graph PlaceholderFor Future Presentation
- 17.
- 18.
- 19.
- 20. Three Demos ToRule 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/
- 21. Catch me acanvas <canvas id=“graphics” width=“640” height=“480”> Guru Meditation: No canvas supported! </canvas> var canvas = document.getElementById(“graphics”); var context = canvas.getContext(“2d”);
- 22.
- 23. 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
- 24. (but who needsthat ?)
- 25. Drawing Images varsprite = new Image(); sprite.src = “luigi.png”; var x = 0, y = 0; ctx.drawImage(sprite, x, y);
- 26. Drawing Images 2var 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.
- 27. Going Crazy WithImages // 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();
- 28. Accessing Pixels varblock = 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);
- 29. Accessing Pixels varblock = 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);
- 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.
- 32. Let There BeSound! <audio id=“sfx001” src=“/mp3/boom.mp3”></audio> $(“sfx001”).play();
- 33. Let There BeSound! <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)
- 34. Putting It AllTogether
- 35. Typical Game Loopfunction gameTick() { processKeyboard(); moveEnemies(); drawGraphics(); updateAudio(); } var fps = 60; setInterval(gameTick, 1000 / fps);
- 36. The Future isUpon Us!
- 37.
- 38. What’s Coming UpNext 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?
- 39. Code Like It’s2020! ftw! ‘ s Blackberry coming June 1 st !
- 40.
- 41. Q&A Yes! Youcan 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!
- 42. 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.
- 44. GO MAKE GAMES!http://www.megidish.net