Things we learned about Canvas

Tips and tricks we learned about canvas while programming Marble Run. Marble Run won Mozillas Game On 2010 challenge.

Transcript

1. THINGS WE LEARNED ABOUT CANVAS
2. marblerun.at
3. EBERHARD GRÄTHER egraether.com // @egraether MATHIAS PAUMGARTEN mathias-paumgarten.com // @fourtimesdaily DAVID STRAUß stravid.com // @stravid
4. LEARNED BY DOING + PAUL IRISH http://paulirish.com/2011/requestanimationframe-for-smart-animating/ ERNESTO JIMÉNEZ http://www.slideshare.net/ernesto.jimenez/5-tips-for-your-html5-games MARK PILGRIM http://www.slideshare.net/ernesto.jimenez/5-tips-for-your-html5-games
5. CANVAS
6. API
7. <canvas> CanvasRenderingContext2D
8. var canvas = document.createElement("canvas"); var context = canvas.getContext("2d"); context.lineTo(…); context.fillStyle = 0x34C903; context.fillRect(…);
9. PIXEL
10. 0,5 0 1,5 1 2,5 2 3,5 3 4  CODE
11. 0 0,5 1 1,5 2 2,5 3 3,5 4 0,5 0 CODE SCREEN 1,5 1 2,5 2 3,5 3 4 
12. 0,5 0 1,5 1 2,5 2 3,5 3 4  CODE
13. 0 0,5 1 1,5 2 2,5 3 3,5 4 0,5 0 1,5 1 2,5 2 3,5 3 4  CODE SCREEN
14. GAMELOOP
15. function updateGame() { update(); draw(); setTimeout(updateGame, 25); }
16. requestAnimationFrame
17. requestAnimationFrame(/* function */ callback, /* DOMElement */ element);
18. // requestAnim shim layer by Paul Irish window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(/* function */ callback, /* DOMElement */ element){ window.setTimeout(callback, 25); }; })();
19. YOU DON’T ALWAYS NEED A GAMELOOP
20. CLEARING
22. canvas.width = canvas.width;
23. context.clearRect(x, y, width, height);
24. $$$$$$$$$$$$$ $$$$$$$$$$$$$ $$$$$$$$$$$$$ $$$$$$$$$$$$$ $$$$$$$$$$$$$
25. DIRTY RECTANGLES DIRTY RECTANGLES DIRTY RECTANGLES
26. ⟶
27. ⟶
28. 1 GAME != 1 CANVAS
30. var staticContext = staticCanvas.getContext("2d"), dynamicContext = dynamicCanvas.getContext("2d"); function draw() { drawStatics(); drawDynamics(); },
31. function drawStatics() { if (renderStaticsNew) { // clear whole canvas staticCanvas.width = staticCanvas.width; // drawings ... renderStaticsNew = false; } },
32. function drawDynamics() { // clear Dirty Rectangles for (var i = 0; i < dirtyRects.length; i++) { dynamicContext.clearRect( dirtyRects[i].x, dirtyRects[i].y, dirtyRects[i].width, dirtyRects[i].height ); } // drawings ... }
33. Small (obvious) Performance Tips
34. USER EXPERIENCE
35. PATTERN
36. var pattern; var image = new Image(); image.src = "path.png"; image.onload = function() { pattern = context.createPattern(this, "repeat"); } … context.fillStyle = pattern;
37. SHADOW
38. STOPANIMATION
39. context.beginPath()
40. Q // A THANKS.