Redraw only specific area of stage

[DEV362]

Hi, in my game, I have 3 areas in one big stage. In first of them, there are only looped animations, which need to be redraw in each tick. In second, there are some controls components with some effects, so I need to redraw it only after user interaction, and in last one I have some game graphics, which is static, and do something only when user set some action. 

 

Redraw full stage in each tick is wasting of CPU so I want to separate the areas and redraw only what Is changing in current time. Any idea how to do that? Tx 

[ivan.popelyshev]

Look at https://github.com/pixijs/pixi.js/blob/master/src/extras/cacheAsBitmap.js

 

That will cache container in off-screen texture:

container.cacheAsBitmap = true;//was it changed? cache it again!container.cacheAsBitmap = false;container.cacheAsBitmap = true;

If you dont want to re-create whole canvas every time it updates, well, modify cacheAsBitmap.js code.

 

Also, use PIXI.ParticleContainer if you have big number of sprites in one container.

[DEV362]

Ok, but after use cache, the container is still redrawing in each loop. For example if I have a stage with resolution 1920x1080, and most of the time I need redraw only area of 800x600 px in middle of the stage, Isn't redrawing of full background pretty wasteful?

[ivan.popelyshev]

Well, common answer is:

 

it doesnt matter who does composition: we or the browser. If you profile it, you'll see that if you use multiple canvases, "program" part will consume more time.

 

 

But in my personal experience, sometimes its better to use separate canvases for background and foreground: use multiple canvases and position them with css.