5 tips for your HTML5 games

5 tips for yourHTML5 games @ernesto_jimenez Lead Developer, Six to Start

5 things that might be helpfuldeveloping your games

the game loop

GAME LOOPfunction updateGame () { processPlayerInput(); updateGameLogic(); draw(); setTimeout(updateGame, 25);}

GAME LOOP• Drawing is the most expensive• Game is locked while running the update• We are consuming resources

you don’t always need a game loop

frame buffering

ABOUT FLICKERINGfunction draw() { var canvas = document.getElementById(visible-canvas); var context = canvas.getContext(2d); context.fillStyle = red; // Draw 200x200 square in x: 0 y: 0 context.fillRect(0, 0, 200, 200); // Draw 200x200 square in x: 200 y: 200 context.fillRect(0, 0, 200, 200);}

USE TWO CANVASoff-screen visible

1) DRAW OFF-SCREENoff-screen visible

2) COPY THE RESULToff-screen visible

RIGHT FRAME BUFFERfunction draw() { var buffer = document.createElement(canvas); var canvas = document.getElementById(visible-canvas); buffer.width = canvas.width; buffer.height = canvas.height; var buffer_context = buffer.getContext(2d); var context = canvas.getContext(2d); buffer_context.fillStyle = red; // Draw ... context.drawImage(buffer, 0, 0);}

WRONG FRAME BUFFERfunction draw() { var buffer = document.createElement(canvas); var canvas = document.getElementById(visible-canvas); buffer.width = canvas.width; buffer.height = canvas.height; var buffer_context = buffer.getContext(2d); var context = canvas.getContext(2d); buffer_context.fillStyle = red; // Draw ... var data = buffer_context.getImageData(0, 0, canvas.width,canvas.height); context.putImageData(data, 0, 0);}

avg. time for 1,000 frame-buffer operations in Firefox 4.0b7 right frame buffer wrong frame buffer 7,000ms 6,300ms 5,600ms 4,900ms 4,200ms 3,500ms 2,800ms 2,100ms 1,400ms 700ms 0ms plain color

frame buffer is notalways useful right now Browsers are repainting the canvas after your JS

expensive drawing

getImageData &putImageData

avg. time for 1,000 fillRect in Firefox 4.0b7 fillRect 100x100px fillRect 500x500px4,000ms3,500ms3,000ms2,500ms2,000ms1,500ms1,000ms 500ms 0ms plain color 3 stops linear gradient blurred shadow

ﬁllText is coolbut it is expensive

think outside of the canvas

1 GAME != 1 CANVAS

combine differentcanvas to produce a single screen

images from Belén Albeza (@ladybenko)

dirty rectangles

redraw only those areas that have changed

images from Belén Albeza (@ladybenko)

HIGH PERFORMANCE JAVASCRIPT Nicholas C. Zakashttp://oreilly.com/catalog/9780596802806

http://www.designer-daily.com	121711
http://translate.googleusercontent.com	157
http://www.scoop.it	96
http://www.website-ontwerpen-blog.nl	67
http://feeds.feedburner.com	66
http://webcache.googleusercontent.com	32
http://lanyrd.com	17
http://veillete.blogspot.com	9
http://mail.info.lt	6
http://bowierocks.com	6
http://translate.google.com	6
http://feeds2.feedburner.com	5
http://www.profuzion.com	5
http://www.hanrss.com	4
http://www.linkedin.com	4
http://www.twylah.com	3
http://electronicsexpo.blogspot.in	3
http://blog.naver.com	3
https://twitter.com	3
http://xpresswebapps.nokia.com	3
http://www.pkwebdesigns.com.au	3
http://dev-wam.browser.ovi.com	2
http://us-w1.rockmelt.com	2
https://si0.twimg.com	2
http://static.slidesharecdn.com	2
http://twitter.com	2
http://spannow.com	2
http://feedproxy.google.com	2
http://veillete.blogspot.fr	1
http://newdesignblog.com	1
http://email.studioecos.com.br	1
http://www.weebly.com	1
http://mc2.mweb.co.za	1
http://electronicsexpo.blogspot.ca	1
http://131.253.14.98	1

5 tips for your HTML5 games

by Ernesto Jiménez

Accessibility

Categories

Upload Details

Usage Rights

35 Embeds 122K

Statistics

5 tips for your HTML5 games Presentation Transcript