Sprite.anchor

[kadv]

Hello,

 

I am trying to understand the Sprite.anchor property. Is it essentially where a touch/mouse point will be anchored relative to the sprite's bounds? Any other implications of changing anchor points?

 

In one case, I was playing with the pixi dragging example, and found that not setting the anchor would cause a mouseup to not register so easily, presumably because the mouse pointer was at the edge of the top-left corner by default. So I was in practically perpetual drag mode .

 

Thanks for your help, and for an awesome, reasonably-sized, and free library.

 

PS. Am pretty new to pixi.js and 2D game dev in general, so pardon the dumb questions, if I did not phrase things right, or used the wrong terms, please correct me.

[Mat Groves]

Hey there! You are spot on! not setting the anchor point means that the top left corner is the 0,0 of the sprite. Here is a little more info on anchor points:

 

Its important to note that the anchor point is not a pixel value,  it is a % of the texture’s dimensions with a range from 0.0 to 1.0 (0% to 100%). If the anchor point is 0×0 (pixi.js’ default), then the texture’s upper left corner aligns with the sprites position. If the anchor point is 0.5×0.5 then the texture is centered on the sprites position. If the anchor point is 1×1 then the texture’s lower right corner aligns with the sprites position.

 

Hope that helps!

[kadv]

Thanks for your reply. Now I am having trouble understanding the relationship between the texture and the sprite. My understanding is the sprite's bounds are defined by the texture's size -- so does this change/move with changing anchor points? But in terms of rendering though, I don't see the sprite looking any different? How does anchoring affect something like the hitArea?

[xerver]

The anchor point will effect positioning, the position of a Sprite will align with its anchor.

[kadv]

Neat, thanks. Get it better now after playing with distances between sprites.