Game Development With HTML5

<games /> Gil Megidish [email_address]

And I love writing / rewriting / reverse engineering games

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

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

Games + Javascript? = wtf

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

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

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

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

Graphics

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 … … … . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Tile + Sprite Memory

Scene Graph Placeholder For Future Presentation

Canvas is King

DEMO TIME!

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/

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”);

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

(but who needs that ?)

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

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.

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

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);

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;
}
}
ctx.putImageData(block, 0, 0);

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/

The Jazz Singer

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

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)

Putting It All Together

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

The Future is Upon Us!

Quake2 HTML5

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?

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

Q&A
Yes! You can use <canvas> in Internet Explorer 6?

PS. Remember to upgrade your mother’s IE!

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

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

http://www.scoop.it	491
http://www.dnjg.be	285
http://www.slideshare.net	139
http://paper.li	121
http://dev.bundlr.com	106
http://nicoworld.altervista.org	102
http://blog.dreamcss.com	55
http://bundlr.com	34
http://feerojkumarp.blogspot.com	18
https://twitter.com	13
http://us-w1.rockmelt.com	8
http://www2.verious.com	5
http://dnjg.be	4
http://www.linkedin.com	4
http://feerojkumarp.blogspot.in	2
http://buildgamehtml5.blogspot.com	2
http://secure.bundlr.com	2
http://www.twylah.com	1
http://www.yutzu.com	1
https://si0.twimg.com	1
http://e52.bundlr.com	1
http://dev.gobundlr.com	1
http://pinterest.com	1

Game Development With HTML5

by Gil Megidish

Accessibility

Categories

Upload Details

Usage Rights

23 Embeds 1,397

Statistics

Game Development With HTML5 Presentation Transcript