p01

Chris: Good thinking about the memo-izing/caching.

FYI canvas.toDataURL() generates a PNG by default, but you can pass a MIME type as argument, e.g. "image/png" or "image/jpeg" in which case some browsers might take an optional second argument between 0 and 1 for the quality setting of the JPEG.

Yes, touching the width or height of a canvas does reset it. Do you have a JSperf page showing the speed difference ? In my experience they're virtually the same, with a slight advantage for the reset. A reset simply wipes the raw pixel buffer allocated to the Canvas and resets a few properties regardless of the previous state of the Canvase: transformation matrix, clipping path, globalCompositeOperation, ... OTOH clearRect() is subject to these potentially expensive properties. What about using multiple canvases ? One for the things you modify rarely, and another one for the things that need constant update.

EDIT: My bad, I didn't realize this post was in the Phaser sub-forum. Then I don't know how the following can be applied in the framework, but you get the idea Tons of platformers have such tiles. The first ones that come to my mind are Bubble Bobble and Rainbow Island. Basically you need to check the vertical velocity of the player during the collision detection. If the player is going up, go through. If the player is going down, collide/bounce/whatever. http://www.wildbunny.co.uk/blog/2011/12/11/how-to-make-a-2d-platform-game-part-1/ and the following part about Jump-through platforms might be useful.

Remember that the sprites sheets remain unpacked in memory and take width * height * 4 bytes. This adds up very quick on device. Therefore you should use several sprites sheets so as to not waste memory. A huge/wasteful sprite sheet can force the browser to free the memory of the image or other resources and re-load and re-decode them. You don't want that to happen during your main loop.

Thanks! dreta: The code you see above is later compressed and bootstrapped into a PNG image. The whole thing fits in 1022 bytes. The repetition of the number 34962 helps gain one or two bytes.