Pixi.js Sprite Anchor Point and Positioning

In Pixi.js, the anchor point of a Sprite defines the origin of its texture, dictating how the sprite is positioned, rotated, and scaled relative to its coordinates. This article explains what the anchor point is, how it affects sprite positioning, and how to manipulate it to achieve precise rendering control in your 2D WebGL projects.

What is the Pixi.js Sprite Anchor Point?

By default, when you create a Sprite in Pixi.js, its anchor point is set to the top-left corner, represented by the coordinates (0, 0).

Unlike standard position coordinates which are measured in pixels, the anchor point uses a normalized scale from 0.0 to 1.0. These values represent percentages of the sprite’s texture width and height: * (0, 0): Top-left corner (default) * (0.5, 0.5): Exact center of the sprite * (1, 1): Bottom-right corner * (0.5, 1): Bottom-center (commonly used for character sprites in platformers or RPGs)

How Changing the Anchor Affects Positioning

When you assign coordinates to a sprite using sprite.x and sprite.y, you are telling Pixi.js where to place the sprite’s anchor point on the screen.

For example, if you position a \(100 \times 100\) pixel sprite at (200, 200):

With Anchor (0, 0) (Top-Left): The top-left corner of the sprite is placed at (200, 200). The rest of the sprite renders to the right and down, spanning from \(200\) to \(300\) on both axes.
With Anchor (0.5, 0.5) (Center): The center of the sprite is placed at (200, 200). The sprite renders from \(150\) to \(250\) on both axes.
With Anchor (1, 1) (Bottom-Right): The bottom-right corner of the sprite is placed at (200, 200). The sprite renders to the left and up, spanning from \(100\) to \(200\).

How Anchor Affects Rotation and Scaling

The anchor point also serves as the origin point (or origin of transform) for rotation and scaling:

Rotation: If the anchor is (0.5, 0.5), the sprite will spin perfectly in place around its center. If the anchor is (0, 0), the sprite will swing in a circle around its top-left corner.
Scaling: If you scale a sprite (e.g., sprite.scale.set(2)), it will grow outward from the anchor point. A centered anchor results in symmetrical growth, while a top-left anchor causes the sprite to expand down and to the right.

How to Code the Anchor Point in Pixi.js

You can modify the anchor point of a sprite in two ways:

Setting X and Y individually:

const sprite = PIXI.Sprite.from('player.png');
sprite.anchor.x = 0.5;
sprite.anchor.y = 1.0;

Setting both values simultaneously:

// Sets both X and Y to 0.5 (centering the anchor)
sprite.anchor.set(0.5);

// Sets X to 0.5 and Y to 1.0
sprite.anchor.set(0.5, 1.0);

Anchor vs. Pivot

It is important not to confuse anchor with pivot. While they achieve similar visual results, they operate differently:

Anchor: Only exists on Sprite and TilingSprite objects. It uses normalized values (0 to 1) relative to the texture size.
Pivot: Exists on all DisplayObject instances (including Container and Graphics). It uses absolute pixel values (e.g., sprite.pivot.set(50, 50)) rather than percentages.