Embed Size (px)
Citation preview
Canvas: we must go deeper
Szymon Piłkowski(freelancer, previously crytek & bigpoint)
http://twitter.com/ard
Canvas?!
The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.
Canvas is a bitmap
• one-dimensional array
• [R,G,B,A,// pixel 0,0 R,G,B,A,// pixel 1,0 R,G,B,A,// pixel 2,0 (...)]
• point 0,0 placed in top left corner
Canvas basics
• Immediate access (almost)
• Low-level API
• No scene graph, no direct access to drawn elements
• Basic animation = redrawing everything each frame
Drawing on canvas
(example from MDN)
Simple Game Loop
Pre-rendering / Buffering
• Buffer is a copy of bitmap state (single frame) which is kept in memory
• Buffers are known in Computer Graphics for 40 years
• Using buffers you’re able to save and restore drawn states
• ... and you can use them in JavaScript, too
Buffers in JS
• Wrong way:
• Slow, slow, slow
• still popular
Buffers in JS
• Good waycontext.drawImage: “can take either an HTMLImageElement, an HTMLCanvasElement, or an HTMLVideoElement for the image argument.”
(another way: use toDataURL method)
• As fast as drawing normal images
Buffers: performance optimisation
Buffers in games
(image from isocity by Rob Evans)
Render cycle
Background layer (rendered once, never cleared)
Static layer (rendered anew when invalidated)
Dynamic layer (rendered anew each frame)
Render cycle (code)
(needs to be tweaked per game)
Pre-processing sprites
• Saving disk space
• Saving designers time
• Improving the pipeline
(from onslaught! arena case study on html5rocks.com)
Pre-processing sprites
Collision detection
• Problem: canvas is just a bitmap.
• You can’t attach events to drawn objects
• Detecting collision between a point (mouse pointer) and any rendered shape (image or primitive) is not straight-forward
Hitmap / Collision map
1. map objects to unique colors
Hitmap / Collision map2. store in memory a copy of each object drawn in single color (using
composite operations)
Hitmap / Collision map3. when checking collisions, do a single render
of candidates to a buffer
4. grab color from point and compare with colorMap
end()
• questions?
• http://twitter.com/ard
• Thanks!
