Jump to content

Static pixi stage: different ticker for rendering and for interactions?

Sébastien Lorber

Recommended Posts



I have a very simple pixi application where I draw colored rectangles on a canvas on sitting on top of an html image background: https://build-iiygaoarfn.now.sh/



The stage does not really change over time, the only thing that changes is that when a rectangle is hovered on mouse events, the rectangle is highlighted (color/opacity) may change.


The problem is that my app can have like 6000 small rectangles on the same page, and the default Application ticker makes the browser work unnecessarily because it keeps re-rendering the same thing over time (until an interaction happen)


I've tried to disable the Application ticker and render myself when needed, but if I don't use a ticker it seems my js listeners are not called at all so interactions are not working anymore.

Is there a way to get my JS listeners be fired (interactive sprites), without using a render loop, so that my stage is not re-rendered on every frame?






Link to comment
Share on other sites

Most of events are handled at the same time as mouse event is fired, so it should work, that means you are doing something wrong.

Also , I've told you to copy Application class and make your own.

Interactions are handled in shared ticker, not application one, and its not clear when is it called, because my suggest about moving InteractionManager outside was not accepted by other members of pixijs core team.


Link to comment
Share on other sites

Thanks, you are right.

Interactions did fire, it's just my refactor that broke listener registration...

I'm stil using Application, it's just I made it not autoStart, and I actually never start the underlying ticker.  I keep using the Application because it's constructed for me by the lib but it's clearly a hack, but it works fine like that.

I re-render my stage whenever the containers are changing, or when a word rectangle is hovered (when interaction listeners are fired), and not on every frame anymore.


Just wondering, when an item is hovered, is there a way to render only that item, or can I always re-render the whole stage?




Link to comment
Share on other sites

Whole stage gets rerendered.

There are few hacks how you could make partial rererenders (multiple canvases, drawing everything to single texture and then just using that etc.), but those would be worse performancewise in your application.

Link to comment
Share on other sites

@ivan.popelyshev wouldn't it make sense for Application to support a new option like "onlyRenderDirty" and a application.dirty = true attribute? that would permit to support my usecase more easily




Something like




 if ( options.onlyRenderDirty && this.dirty) {



Link to comment
Share on other sites

Thanks @Exca that's what I thought. There are opacity level differences so I guess it's technically not possible to erase a rectangle of a given opacity and redraw another one at the same place.

If there was not this opacity thing, would there be a solution to just re-draw a rectangle over the already-rendered rectangle so that it gets covered? (just for curiosity)

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...