Jump to content

Redraw only specific area of stage


Recommended Posts

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 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...