game development with html5
DESCRIPTION
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.TRANSCRIPT
![Page 2: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/2.jpg)
And I love writing / rewriting / reverse engineering games
![Page 3: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/3.jpg)
![Page 4: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/4.jpg)
Canvas
Video
Audio
Web Sockets
Web Storage
Web Worker
Web Database
Selectors
Validation
File API
Semantic Elements
What The Heck is HTML5
![Page 5: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/5.jpg)
Man will make it to Mars before HTML5 is on my Firefox!
Man will make it to Mars before HTML5 is on my Firefox!
W3C’s ETA:
Year 2022
![Page 6: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/6.jpg)
Games + Javascript?= wtf
![Page 7: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/7.jpg)
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
![Page 8: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/8.jpg)
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
![Page 9: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/9.jpg)
LOGIC
GRAPHICS
INPUT
SOUND
Anatomy of a Game
MUSIC
MULTIPLAYER
GAME ASSETS
![Page 10: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/10.jpg)
LOGIC
GRAPHICS
INPUT
SOUND
Anatomy of a Game
MUSIC
MULTIPLAYER
GAME ASSETS
javascript code
<canvas>
onkeydown, onmousedown
<audio>
<audio>
ajax, WebSocket
Images, Audio, Video and Binary supported by browsers
![Page 11: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/11.jpg)
Graphics
![Page 12: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/12.jpg)
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…
…
…
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
![Page 13: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/13.jpg)
![Page 14: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/14.jpg)
Tile + Sprite Memory
![Page 15: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/15.jpg)
![Page 16: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/16.jpg)
Scene Graph
Placeholder For Future Presentation
![Page 17: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/17.jpg)
![Page 18: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/18.jpg)
Canvas is KingCanvas is King
![Page 19: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/19.jpg)
DEMO TIME!
![Page 20: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/20.jpg)
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/
![Page 21: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/21.jpg)
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”);
![Page 22: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/22.jpg)
![Page 23: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/23.jpg)
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
![Page 24: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/24.jpg)
(but who needs that ?)
![Page 25: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/25.jpg)
Drawing Images
var sprite = new Image();sprite.src = “luigi.png”;
var x = 0, y = 0;ctx.drawImage(sprite, x, y);
![Page 26: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/26.jpg)
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.
![Page 27: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/27.jpg)
Going Crazy With Images
// context state checkpointctx.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 changesctx.restore();
![Page 28: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/28.jpg)
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);
![Page 29: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/29.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);
![Page 30: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/30.jpg)
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/
![Page 31: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/31.jpg)
The Jazz Singer
![Page 32: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/32.jpg)
Let There Be Sound!
<audio id=“sfx001” src=“/mp3/boom.mp3”></audio>$(“sfx001”).play();
![Page 33: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/33.jpg)
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)
![Page 34: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/34.jpg)
Putting It All Together
![Page 35: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/35.jpg)
Typical Game Loop
function gameTick(){
processKeyboard();moveEnemies();drawGraphics();updateAudio();
}
var fps = 60;setInterval(gameTick, 1000 / fps);
![Page 36: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/36.jpg)
The Future is Upon Us!
![Page 37: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/37.jpg)
Quake2 HTML5
![Page 38: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/38.jpg)
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?
![Page 39: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/39.jpg)
Code Like It’s 2020!
ftw!‘s
Blackberry coming June 1st!
![Page 40: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/40.jpg)
Q&A
![Page 41: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/41.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!
![Page 42: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/42.jpg)
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
![Page 43: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/43.jpg)
![Page 44: Game Development With HTML5](https://reader035.vdocument.in/reader035/viewer/2022062307/554ca7ccb4c905c10d8b5842/html5/thumbnails/44.jpg)
GO MAKE GAMES!GO MAKE GAMES!
http://www.megidish.net