Size and scale

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

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

Add those two lines of code to the setup function, like this:

  1. function setup() {
  3.   //Create the `cat` sprite
  4.   let cat = new Sprite(resources["images/cat.png"].texture);
  6.   //Change the sprite's position
  7.   cat.x = 96;
  8.   cat.y = 96;
  10.   //Change the sprite's size
  11.   cat.width = 80;
  12.   cat.height = 120;
  14.   //Add the cat to the stage so you can see it
  15.   app.stage.addChild(cat);
  16. }

Here’s the result:

Cat's height and width changed

You can see that the cat’s position (its top left corner) didn’t change, only its width and height.

Cat's height and width changed - diagram

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

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

Scale values are numbers between 0 and 1 that represent 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 its scale values to 2, like this:

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

Pixi has an alternative, concise way for you set sprite’s scale in one line of code using the scale.set method.

  1. cat.scale.set(0.5, 0.5);

If that appeals to you, use it!