game development with html5
Post on 08-May-2015
61.161 Views
Preview:
DESCRIPTION
TRANSCRIPT
<games /><games />
Gil Megidishgil@megidish.net
And I love writing / rewriting / reverse engineering games
Canvas
Video
Audio
Web Sockets
Web Storage
Web Worker
Web Database
Selectors
Validation
File API
Semantic Elements
What The Heck is HTML5
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
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
LOGIC
GRAPHICS
INPUT
SOUND
Anatomy of a Game
MUSIC
MULTIPLAYER
GAME ASSETS
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
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 KingCanvas 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 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.
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();
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;block.data[(y*block.width+x)*4+1] ^= 0xff;block.data[(y*block.width+x)*4+2] ^= 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 1st!
Q&A
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!
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!GO MAKE GAMES!
http://www.megidish.net
top related