Compositing sprites - anyone done it yet with pixi or grapefruit?

[carterza]

I'm trying to figure out the best way to implement composite sprites with pixijs / grapefruitjs. In case you don't know what compositing is, here's the definition from the wiki article : Compositing is the combining of visual elements from separate sources into single images, often to create the illusion that all those elements are parts of the same scene.

 

Pixijs was written so that each sprite holds reference to a single texture. If you are trying to create a game like diablo, where a players visual representation may consist of textures layered on top of each other, then you cannot use a single sprite to represent your player entity - instead you must use a collection of sprites.

 

It seems like a PIXI.DisplayObjectContainer (represents a collection of display objects. It is the base class of all display objects that act as container for other objects) would work perfectly here. This is also the class that the PIXI.Sprite class extends from. So my implementation thus far, is to use a displayobject container (grapefruit wraps this object with another container class) so a Grapefruit.Container object really, and use that object to hold reference to all of my sprites. I then add this container object to my tilemap and the sprites are rendered to the screen like I would expect - but not in the correct position.

 

The thing is, display object containers have their own position, rotation, scale, etc... properties, which isn't necessarily a bad thing. I am noticing the one thing they are lacking though - an anchor property.

 

This means I will manually have to compensate for the anchor or figure out another way to do this... This seemed like the most straightforward approach to take, without having to touch pixijs, but maybe I'm just overcomplicating things?

 

Thanks!

 

-Zach

[rich]

Anchor is for adjusting the position the texture renders to. DisplayObjectContainers don't have a texture, hence they don't have an anchor property. What you most likely need to use is the pivot property.

[xerver]

Rich beat me to it, if you are looking to change the position/rotation point, pivot is what you are looking for.