Positioning, Size and Rotation of PIXI Sprite - PIXI Documentation Translation (2)

1. Positioning Sprites
Now that you know how to create and display sprites, let's understand how to position and resize them.

In the previous example, the cat sprite was added to the upper left corner of the stage. The cat's x position is 0 and its y position is 0. You can change the cat's position by changing the value of its x and y properties. Here's how to make the cat center stage by setting the cat x and y property values ​​to 96.

cat.x = 96;
cat.y = 96;

Add these two lines of code anywhere in the setup function after creating the sprite.

function setup() {

  //Create the `cat` sprite
  var cat = new Sprite(resources["images/cat.png"].texture);

  //Change the sprite's position
  cat.x = 96;
  cat.y = 96;

  //Add the cat to the stage so you can see it
  stage.addChild(cat);

  //Render the stage
  renderer.render(stage);
}

(Note: In this example, Sprite is an alias for PIXI.Sprite, TextureCache is an alias for PIXI.utils.TextureCache, and resources is an alias for PIXI.loader.resources as before. I'll use the alias, from From now on, use the same format for all Pixi objects and methods.)

These two new lines of code will move cat 96 pixels to the right and 96 pixels down. The result is as follows:



the upper left corner of the cat (its left ear) represents its x and y anchor points. To move the cat to the right, increase the value of its x property. To move the cat down, increase the value of its y property. If the cat's x value is 0, it will be on the left side of the stage. If its y value is 0, it will be at the very top of the stage.



Instead of setting the sprite x and y properties individually, you can set them together in one line of code like this:

sprite.position.set(x, y)

2. Size and ratio
You can change the size of the sprite by setting the width and height properties. Here's how to give the cat a width of 80 pixels and a height of 120 pixels.

cat.width = 80;
cat.height = 120;

Add these two lines of code to the setup function as follows:

function setup() {

  //Create the `cat` sprite
  var cat = new Sprite(resources["images/cat.png"].texture);

  //Change the sprite's position
  cat.x = 96;
  cat.y = 96;

  //Change the sprite's size
  cat.width = 80;
  cat.height = 120;

  //Add the cat to the stage so you can see it
  stage.addChild(cat);
}

Here's the result:




you can see that the cat's position (its top left corner) hasn't changed, only its width and height.





Sprites also have scale.x and scale.y properties that change the sprite's width and height proportionally. Here's how to set the cat's dimensions to half size:

cat.scale.x = 0.5;
cat.scale.y = 0.5;

The scale value is a number between 0 and 1 representing a percentage of the sprite's size. 1 means 100% (full size), while 0.5 means 50% (half size). You can double the sprite's size by setting the sprite's size value to 2, like this:

cat.scale.x = 2;
cat.scale.y = 2;

Pixi has an alternative, neat way to set the scale of your sprite in one line of code using the scale.set method.

cat.scale.set(0.5, 0.5);

If it appeals to you, use it!

3. Rotation
You can rotate a sprite by setting the sprite's rotation property to a value in radians.

cat.rotation = 0.5;

But at what point does the rotation occur?

You've seen a sprite's upper left corner represent its x and y position. This point is called the anchor point. If you set the sprite's rotation property to something like 0.5, the rotation will be around the sprite's anchor point. This chart shows how this will affect our cat sprite.





You can see that the anchor point, the cat's left ear, is the center of the imaginary circle the cat is spinning around. What if you want the sprite to rotate around its center? Change the sprite's anchor point so that it is centered on the sprite, like this:

cat.anchor.x = 0.5;
cat.anchor.y = 0.5;

The anchor.x and anchor.y values ​​represent the texture's dimensions as a percentage, from 0 to 1 (0% to 100%). Setting it to 0.5 aligns the texture to the center of the point. The position of the point itself doesn't change, just the way the texture sits on it.

The next diagram shows what happens to a spinning sprite if you center it.



You can see that the sprite's texture moves up and to the left. This is an important side effect to remember!

Just like with position and scale, you can set the anchor's x and y values ​​with one line of code, like this:

sprite.anchor.set(x, y)

Sprites also have a pivot property anchor that works in a similar fashion. pivot sets the position of the sprite's x/y origin. If you change the pivot point, and then rotate the sprite, it will rotate around that origin. For example, the following code sets the sprite's pivot.x point to 32 and the pivot.y point to point to 32

cat.pivot.set(32, 32)

Assuming the sprite is 64x64 pixels, the sprite will now rotate around its center point. But remember: if you change the sprite's rotation point, you also change its x/y origin.

So, what is the difference between anchor and pivot? They are really similar! anchor uses a normalized value from 0 to 1 to move the origin of the sprite image texture. pivot uses pixel values ​​to move the origin of the sprite's x and y points. What should you use? as you like. Just play with two people and see what you like.