定位

现在您已经知道了如何创建和显示精灵，让我们来看看如何定位和调整它们的大小。

在前面的示例中，将cat精灵添加到左上角的舞台上。猫的x位置为0,y位置为0。您可以通过更改猫的x和y属性值来更改猫的位置。下面介绍通过把猫的x和y属性值设置为96，使其位于舞台中央。

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

在创建精灵之后，在setup函数的里面添加这两行代码。

function setup() {

  //Create the `cat` sprite
  let 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
  app.stage.addChild(cat);
}

注意

在本例中，如前所述，Sprite是PIXI.Sprite的别名，TextureCache是PIXI.utils.TextureCache的别名，resources是PIXI.loader.resources的别名。从现在开始，示例代码中的所有Pixi对象和方法都将使用相同格式的别名

这两行新代码将把猫向右移动96个像素，向下移动96个像素。显示结果如下：

猫的左上角(它的左耳)代表它的x和y锚点。要使猫向右移动，请增加其x属性的值。要使猫向下移动，请增加其y属性的值。如果猫的x值为0，那么它将位于舞台的最左边。如果它的y值是0，它就在舞台的最顶端。

不需要单独设置精灵的x和y属性，您可以在一行代码中将它们设置在一起，如下所示：

sprite.position.set(x, y)