Jump to content

Anchors are confusing


SebastianNette
 Share

Recommended Posts

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? 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

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.

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

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...