Embed Size (px)
DESCRIPTION
Basic knowledge about build a game using canvas. It's cover basic sprite animation and collision detection. Also include a game example.
Citation preview
BUILD YOUR OWN GAME WITH HTML5
Yohan TottingThinkRooms Studio
@tyohan
Saturday, February 2, 13
HALOYohan Totting
Application Developer Founder of ThinkRooms StudioFOWAB & HackerspaceBDG Initiator
Saturday, February 2, 13
HTML5 GAME COMPONENTS
Saturday, February 2, 13
AUDIO
HTML5 Audio
Audio API+
Saturday, February 2, 13
CANVAS
canvas = document.getElementById('canvas');ctx = canvas.getContext('2d');
<canvas id=”game-canvas”></canvas>
OR
Saturday, February 2, 13
SPRITEsprite = new Image();sprite.src = 'sprite.png';
ctx.drawImage(sprite,srcX,srcY,frameWidth,frameHeight,frameX,frameY,renderWidth,renderHeight);
frame
Saturday, February 2, 13
ANIMATING SPRITEsprite = new Image();sprite.src = 'sprite.png';
function update(){//check if object is movingif(moving===true){//move to next framesrcX=srcX+frameWidth;
//reset frame when it reach last frameif(srcX>srcWidth){
srcX=0;}
}}
function draw(){ctx.drawImage(sprite,srcX,srcY,srcWidth,srcHeight,frameX,frameY,frameWidth,frameHeight);}
Saturday, February 2, 13
BOXCOLLISIONDETECTION
BoxABoxB
if((BoxA.x + BoxA.width >= BoxB.x) && (BoxB.x + BoxB.width >= BoxA.x) &&((BoxA.y + BoxA.height >= BoxB.y) && (BoxB.y + BoxB.height >= BoxA.y)){ hit();}
Saturday, February 2, 13
FLOW
Setup()
Update()
Draw()
CheckCollation()
Animate()UpdateScore()
Saturday, February 2, 13
GAME ENGINE
LimeJS
Saturday, February 2, 13
TRY IT!
http://j.mp/fdhtml5game
https://blog.mozilla.org/labs/2012/07/webgamestub-or-so-you-want-a-quick-start-on-a-2d-canvas-game/
Saturday, February 2, 13
CREATE YOUR OWN GAME!
Yohan TottingThinkRooms Studio
Saturday, February 2, 13
