Jump to content

Is it possible to specify an anchor a DisplayObjectContainer?


Recommended Posts

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!

Link to comment
Share on other sites

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.



Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 by mrBRC
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 10 months later...



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:

And you're set :)

Link to comment
Share on other sites

@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)

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