canvas outside update loop ?

[jerome]

Hello,

 

After reading about the renderTexture object, I understand I can draw an image and keep it persistent, if not cleared, along the update loop (ex : computed background).

However I guess this image is cleared as the canvas is cleared on every frame refresh and then fully redrawn.

Maybe would it be less expensive not to redraw this image on each frame, but to display it in another canvas html element not altered by the update loop for this very specific need ?

 

I don't know if I express myself well, but I mean something like in this small game I wish to port to Phaser too : http://jerome.bousquie.fr/raphael/jeux/tank/jeu2.html

(no framework, no preloader -so reload until you see the tanks, french keyboard, french jokes, arrow keys+CTRL, ZQDW+shift)

In this game, caterpillar footprints and wall scraps are drawn in a z-indexed canvas not refreshed in the game loop.

 

So is there a way to create layers (canvases) outside the update loop from Phaser ?

or do we simply add them in the html code and try to access them from within the game code ?

 

What's the best way to do it ?

[rich]

It depends on the platform for your game. If you want to target WebGL then you ought to forget about things like canvas buffers. If you want Canvas only then you could use a BitmapData object, apply it as a texture for a Sprite (which is effectively the background of your game) and then the bmd will only update itself when you tell it to, which would be handy for complex scenes that don't need constantly redrawing.

[jerome]

ok 

thank you for the detailed answer

I don't know if canvas buffers are exactly what I meant in my post.

It was rather something like layered canvases (same as in this article http://www.html5rocks.com/en/tutorials/canvas/performance/?redirect_from_locale=fr#toc-mul-canvas )

 

ex : 

...<canvas id="layer1" name="background" style="position: absolute; z-index: 0"></canvas><canvas id="layer2" name="gamezone" style="position: absolute; z-index: 1"></canvas>...

layer1 is the background, it's never cleared in the game loop, sometimes scraps or footprints are drawn in it.

layer2 is the main transparent canvas cleared on each frame refresh. This would actually be the canvas generated by game.new in Phaser

[rich]

I wouldn't generally recommend this approach. There used to be horrendous issues on Samsung devices when you stacked-up canvas elements like this (although they may now be resolved). I believe it would also make porting your game to CocoonJS or similar tricky, as they're expecting one single canvas.

 

The article linked was published in 2011. I would be extremely wary of anything older than between 6-12 months, as things have moved on so far since then you're almost certainly not going to see similar results in modern browsers.

[jerome]

As I just begin in html5 game dev, it seems I missed many things those last years, arrf

 

Thank you for the recommendation :-)