Jump to content

attach callback to whenever a sprite is rendered


Recommended Posts

Well title pretty much summarize it..


I want to attach a callback that will be called every time a certain sprite is rendered. What's the best (pixi-friendly) way to do it?

Looking at the code looks like I could override _renderWebGL and _renderCanvas to first do what I want and then call the original function, but that's kinda ugly.

Any ideas?

Thanks.  :)

Link to comment
Share on other sites

PIXI friendly way is to make your own PIXI.Container and put Sprite inside.


Are you sure that you want to intercept the rendering process? There's updateTransform() thing that executed before renderer starts it work, to calculate matrices based on parent matrix, position, rotation and scale. That's how pixi-spine handles it autoUpdate:

function MySprite() {    this.autoUpdate = true;    PIXI.Sprite.apply(this, arguments);}MySprite.prototype = Object.create(PIXI.Container);MySprite.prototype.constructor = MySprite;MySprite.prototype.updateTransform = function() {   PIXI.Container.prototype.apply(this, arguments);   if (this.autoUpdate) { /* DO STUFF WITH this.children[0] */ }}//and that's how you create itvar spr = new MySprite();spr.addChild(new PIXI.Sprite(texture));

Dont forget that updateTransform() is called only for object which has ".visible == true". Render methods are called for objects which have both ".visible==true" and ".renderable==true".

Link to comment
Share on other sites

Well looks like its working.


Thanks a lot!

EDIT: PS it appears to be working even if I do visible = false, but that's OK for me. (as a test I override this function on a single sprite and not in the prototype, and I see that its keep getting called even after setting its visible to false)

Link to comment
Share on other sites

Current pixi philosophy is "Container is the man". Some facts from container's life:


1) All containers has a transform that will be applied to all children using updateTransform()


2) If there are filters, PIXI.Container can render all its children to separate buffer, and then apply filters.


3) PIXI.Container bounds are determined by children bounds, it combines all rects inside.


4) PIXI.Sprite is a container, but its bounds are determined by its texture. It actually treats itself as a background for its children.


5) PIXI.ParticleContainer is smartass thing that handles 100k sprites. But they must have the same texture and container decides the rendering process.


6) container.cacheAsBitmap = true; will create temporary texture, render children to it and stop all rendering and updating process for them. Everything will be static unless you specify =false; in that property.


Summary: PIXI.Container is very powerful thing. Its worse than Entity/Component architecture but give it some time, it will evolve.

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