1. Elf position

1. Set the wizard location

// The first method
cat.x = x
cat.y = y

// The second method
cat.position.set(x, y)
Copy the code

2. Example: Move the cat to the center of the Canvas

let app = new PIXI.Application({
    width: 256.height: 256.antialias: true.transparent: false.resolution: 1
});

document.body.appendChild(app.view);

PIXI.loader
    .add("images/cat.png")
    .load(setup);

function setup() {

    let cat = new PIXI.Sprite(PIXI.loader.resources["images/cat.png"].texture);

    // The first way to set the position
    // cat.x = 96
    // cat.y = 96

    // The second way to set the position
    cat.position.set(96.96)

    app.stage.addChild(cat);
}
Copy the code

Two, size and proportion

1. Set the size

You can set the size of the Sprite using the width and height properties:

cat.width = 80
cat.height = 120
Copy the code

2. Set the scale

The Sprite scale can be set in either of the following ways:

// The first way
cat.scale.x = 0.5
cat.scale.y = 0.5

// The second way
cat.scale.set(0.5.0.5)
Copy the code

3. Example: Change the size and zoom of the cat

let app = new PIXI.Application({
    width: 256.height: 256.antialias: true.transparent: false.resolution: 1
});

document.body.appendChild(app.view);

PIXI.loader
    .add("images/cat.png")
    .load(setup);

function setup() {

    let cat = new PIXI.Sprite(PIXI.loader.resources["images/cat.png"].texture);

    // Set the location
    cat.position.set(96.96)

    // Set width and height
    cat.width = 80
    cat.height = 120

    // The first way to set the scale
    / / the scale. X = 0.5
    / / the scale. Y = 0.5

    // The second way to set the scale
    cat.scale.set(2.2)

    app.stage.addChild(cat)
}
Copy the code

Three, rotation,

1. Set the rotation Angle

cat.rotation = 0.5
Copy the code

The Sprite rotates around the top left corner of the Sprite, also known as the “anchor point.”

2. Set anchor points

Anchors can be set in either of the following ways:

// The first way to set an anchor point
cat.anchor.x = 0.5
cat.anchor.y = 0.5

// The second way to set the anchor point
cat.anchor.set(0.5.0.5)
Copy the code

The values of anchor. X and anchor. Y, if ranging from 0 to 1, are considered to be the length or width percentage of the entire texture. Setting them both to 0.5 puts the anchor point in the center of the image.

3. Set the center point

The original translation is set as the origin, after testing, I think the translation here is set as the center point is more appropriate. Pivot also means “center point”, “rotating motion”.

The center point can be set in either of the following ways:

// The first way
cat.pivot.x = -20
cat.pivot.y = -20

// The second way
cat.pivot.set(-20, -20)
Copy the code

If you rotate the Sprite after changing the center point, it will rotate around the center point.

4. The anchor (anchor) and central point (pivotThe difference between)

  • anchorChanged the image origin of Sprite texture to fill it with 0 to 1
  • pivotChanged the center point of the Sprite to fill it with pixel values

Note that by default, the center point is also in the top left corner of the Sprite (hence the origin), not in the center of the Sprite.

If you can’t decide whether to use Anchor or Pivot, try both and see what works!

5. Example: Set the cat rotation Angle, anchor point, and origin

let app = new PIXI.Application({
    width: 256.height: 256.antialias: true.transparent: false.resolution: 1
});

document.body.appendChild(app.view);

PIXI.loader
    .add("images/cat.png")
    .load(setup);

function setup() {

    let cat = new PIXI.Sprite(PIXI.loader.resources["images/cat.png"].texture);

    // Set the location
    cat.position.set(96.96)

    // Set the anchor point
    / / the cat. The anchor. Set (0.5, 0.5)

    // Set the center point
    cat.pivot.set(0.0)

    // Set the rotation
    cat.rotation = 0.5;

    app.stage.addChild(cat)
}
Copy the code