Is it possible to specify an anchor a DisplayObjectContainer?

[trueicecold]

Hey all

 

I have a DisplayObjectContainer containing images and some texts in it. I would like the container to be positioned at the center, scaled to 0.2, and animate back to scale 1, taking up the entire screen.

 

Problem is there is no anchor property, so what I did is:

 

Scale the container

Calculate the new scaled width and height, and reposition it on the screen

animate the scale, and reposition the container after every iteration of the animation

 

It becomes quite tedious to perform this special animation... Is there a better way to achieve this behavior?

 

Thanks a lot!

[mrBRC]

The DisplayObjectContainer inherits virtually all its properties from DisplayObject.. except for the children array.


What you need is the PIXI.Sprite .. which inherits from the DisplayObjectContainer

 

Or.. you need to review the pixi.dev.js file lines 1625 through 2086 and create your own object that also 'inherits' from DisplayObjectContainer and utilizes some of the features of Sprite.

 

 

[lukaszwojciak]

Well there is a better way
Instead of using .anchor on the displayObjectContainer use .pivot:
http://www.goodboydigital.com/pixijs/docs/classes/DisplayObjectContainer.html

And you're set

[trueicecold]

Thanks all

 

lukaszwojciak, I've tried pivot, but it acts differently than anchor, the rotation and scaling point remains at 0,0 instead of 50%, 50%, when I set it to width/2, height/2...

mrBRC, I can just treat a sprite as a Container? will that act as a container, while having an anchor?? how do I create an empty Sprite, then? with no textures/frames?

[mrBRC]

the sprite does indeed 'inherit' the DisplayObjectContainer, which in turn inherits the DisplayObject

 

the constructor of sprite requires a texture.. I suspect you can generate a transparent texture using the PIXI.graphic and that would suffice.. 
 

var graphic = new PIXI.Graphics()graphic.beginFill(0xFFFFFF,0)graphic.drawRect(0,0,1,1)graphic.endFill()var mySpriteContainer = new PIXI.Sprite(graphic.generateTexture(false));mySpriteContainer.anchor = new PIXI.Point(0.5, 0.5);/* You may not need to worry about setting the following, as the bounding box and size is really going to take in account the children *///mySpriteContainer.width = *width*;//mySpriteContainer.height = *height*;mySpriteContainer.addChild(new PIXI.Sprite(PIXI.Texture.fromFrame(*yourTexture*)));/*mySpriteContainer.children.length-1 is just a last child index.. which has to be greater than 0 because we just ensured it by adding a child..*/var lastChild = mySpriteContainer.children[mySpriteContainer.children.length-1];// default is 0,0 so this declaration is unnecessary, but I suspect you plan on changing itlastChild.position = new PIXI.Point(0,0);//default is 0,0 so this declaration is also unnecessary, but, again, I suspect you plan on changing it//anchor it to the top left of containerlastChild.anchor = new PIXI.Point(0,0);//the width should inherit from your baseTexture//the height should inherit from your baseTexture...

don't use the width and height of the mySpriteContainer for any calculations.. using the boundingbox if necessary

Edited July 3, 2014 by mrBRC

[trueicecold]

This is some prime answer, mrBRC. Thank you very much!

[mrBRC]

actually.. I found out that anytime you draw using graphics... it's a good idea to call the updateBounds() method

var graphic = new PIXI.Graphics();graphic.beginFill(0xFFFFFF,0);graphic.drawRect(0,0,1,1);graphic.updateBounds();graphic.endFill();

it may not be entirely necessary for your purpose here, but since I use the graphic.bounds for clamping in my viewport, I figured it was worth a mention.

[trueicecold]

Thanks mrBRC

[alwayzambitious]

Hi GANG!

 

Im excited for finallly leaving flash to learn pixi...this is a good tip lukas, but why do u think the creators didnt just make it called anchor...

 

just curious... back to learning..

 

Well there is a better way
Instead of using .anchor on the displayObjectContainer use .pivot:
http://www.goodboydigital.com/pixijs/docs/classes/DisplayObjectContainer.html

And you're set

[clement_cvL]

@alwayzambitious I may be wrong, but the "anchor" property is just much more handy to work with but it works with percentage, with only these values: 0, .5, 1, but in majority of case it's well enough!

 

However, all elements have also a pivot property which works with pixels, and that's sometime super useful (for example, I used it (only once) to place the centroid of a polygon in the correct place... ) 

It's more tricky but... could save some developer life! (but I still don't understand why it doesn't work for trueicecold)