Anchors are confusing

[Sebi]

Hi Guys,

I'm pretty confused by anchors in v3.

 

For instance, I have a Sprite and set the anchor to (0.5, 0.5) and place that Sprite in the middle of the canvas.

Now I add some children to that Sprite.

 

How comes that those children when set to position (0,0) are not in the top left corner of the parent Sprite but instead in the center of it?

I also have a second Sprite with the same anchor (0.5, 0.5) and then I am trying to scale it. But the Sprite doesn't scale from the center.

 

So I take that the anchor just determines where the texture is drawn but does not affect any transforms?

How would I scale a Sprite from the center? 

[Jorisslagter]

Yes, you are right. Anchor doesn't affect any transforms. I believe it's in it own way more a offset for drawing purposes. 

By looking in the Sprite.js code in de Pixi.js source I see that by setting an anchor point, the position stays untouched. These methods are simply for two different things. Setting the position, gives the sprite a placement in the scene. When you would give a sprite an anchor, you simply tell Pixi.js from what point you want the Sprite to rotate/drawn. See here.

The sprite is added to a global space and forms a new zero point to the children. The children are added to the sprite. But when you change the position of the children, the position will be relative to the position of the first sprite (local). So 0,0 means, directly on top of the parent. If you don't want this behavior. I'am thinking why you want to add children to this sprite? You can just put them in an other container. 

[alex_h]

1 hour ago, SebastianNette said:

How would I scale a Sprite from the center? 

I haven't used pixi v3 yet but in v2 you could do this by using the pivot rather than the anchor. The pivot is measured in pixels rather than being a 0 - 1 value.

[ivan.popelyshev]

Yep. sprite.anchor and sprite.pivot are different things.

[alex_h]

2 hours ago, SebastianNette said:

For instance, I have a Sprite and set the anchor to (0.5, 0.5) and place that Sprite in the middle of the canvas.

Now I add some children to that Sprite.

I know this is probably a personal preference thing but I'd argue that this is quite hacky use of a sprite. If you want to add children you should really be using a container unless there's a really good reason not to. This then eliminates the problem because as far as I can remember only sprites have anchors, containers don't. 

[Sebi]

Just now, alex_h said:

I know this is probably a personal preference thing but I'd argue that this is quite hacky use of a sprite. If you want to add children you should really be using a container unless there's a really good reason not to. This then eliminates the problem because as far as I can remember only sprites have anchors, containers don't. 

Yea, that was just my lazyness, lol.

I remembered that Containers didn't have an anchor property back then, so I wanted to use a Sprite instead.

That whole pivot thing seems way too inconvenient :/

 

So basically, if the size of the object can change, I have to re-set the pivot every frame since it works in absolute pixel. meh.

[alex_h]

If you use a container then you don't have to change anything. Just nest your sprite at 0, 0 with it's anchor set to 0.5, 0.5. Then apply the scaling to the container.

[Sebi]

That would work but it feels pretty lame to add an extra Container just to scale a single sprite.

Thanks though, guess I'll have to do that in the end.

[alex_h]

Also if you use the pivot on the sprite itself rather than having a container and are just planning to scale it then no, you don't have to update the pivot value. The pivot values refer to untransformed local space so you just set them to width * 0.5 and height * 0.5. The only time it can get complicated is if you are using multi-resolution graphics (eg @2x, @4x, in which case you have to divide the width and height values by the current resolution.

[ivan.popelyshev]

@SebastianNette

That's not lame, that's how it works in other engines too. If you want to use different scales for Sprites and its children - use extra container. Look at it from other point of view: what if you need to change not only size but also rotation or position? Do we have to use a pair of each transform type? childrenScale, spriteScale, childrenRotation, spriteRotation, childrenPosition, spritePosition? Of course extra container is better.

However, there are other possible ways to change the sprite size without affecting scale.x and scale.y, but that depends on specific case. Why do you need different size of sprite?