一、精灵位置

1. 设置精灵的位置

// 第一种方法
cat.x = x
cat.y = y

// 第二种方法
cat.position.set(x, y)

2. 示例：把猫移到 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);

    // 第一种方式设置位置
    // cat.x = 96
    // cat.y = 96

    // 第二种方式设置位置
    cat.position.set(96, 96)

    app.stage.addChild(cat);
}

二、大小和比例

1. 设置大小

可以通过精灵的 width 和 height 属性设置大小：

cat.width = 80
cat.height = 120

2. 设置比例

以下两种方式都可以设置精灵的缩放比例：

// 第一种方式
cat.scale.x = 0.5
cat.scale.y = 0.5

// 第二种方式
cat.scale.set(0.5, 0.5)

3. 示例：改变猫的大小和缩放比例

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);

    // 设置位置
    cat.position.set(96, 96)

    // 设置宽高
    cat.width = 80
    cat.height = 120

    // 第一种方式设置缩放比例
    // cat.scale.x = 0.5
    // cat.scale.y = 0.5

    // 第二种方式设置缩放比例
    cat.scale.set(2, 2)

    app.stage.addChild(cat)
}

三、旋转

1. 设置旋转角度

cat.rotation = 0.5

精灵是围绕着精灵的左上角进行旋转，精灵的左上角也被称为 “锚点” 。

2. 设置锚点

以下两种方式都可以设置锚点：

// 第一种方式设置锚点
cat.anchor.x = 0.5
cat.anchor.y = 0.5

// 第二种方式设置锚点
cat.anchor.set(0.5, 0.5)

anchor.x 和 anchor.y 的值如果是从 0 到 1，就会被认为是整个纹理的长度或宽度百分比。设置它们都为0.5，锚点就处在了图像中心。

3. 设置中心点

原文中翻译为设置原点，测试之后，个人认为在这里翻译为设置中心点更合适。
pivot 也有 “中心点”、“旋转运动” 的意思。

以下两种方式都可以设置中心点：

// 第一种方式
cat.pivot.x = -20
cat.pivot.y = -20

// 第二种方式
cat.pivot.set(-20, -20)

如果改变了中心点之后再旋转精灵，它将会围绕着中心点进行旋转。

4. 锚点（`anchor`）与中心点（`pivot`）的区别

anchor 改变了精灵纹理的图像原点，用 0 到 1 的来填充
pivot 改变了精灵的中心点，用像素的值来填充

需要注意的是，中心点默认也在精灵的左上角（所以也可以理解为原点），而不在精灵的正中心。

如果无法确定使用 anchor 还是 pivot，那么将两者都试一试，哪个合适用哪个！

5. 示例：设置猫的旋转角度、锚点及原点

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);

    // 设置位置
    cat.position.set(96, 96)

    // 设置锚点
    // cat.anchor.set(0.5, 0.5)

    // 设置中心点
    cat.pivot.set(0, 0)

    // 设置旋转
    cat.rotation = 0.5;

    app.stage.addChild(cat)
}

3. 精灵位置、大小和比例、旋转