# 定位

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

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

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

在创建精灵之后,在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);
}
1
2
3
4
5
6
7
8
9
10
11
12

注意

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

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

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

不需要单独设置精灵的xy属性,您可以在一行代码中将它们设置在一起,如下所示:

sprite.position.set(x, y)
1
lastUpdate: 11/16/2021, 6:11:55 AM