精灵位置

现在你知道了怎么创建和显示一个精灵,让我们学习如何定位他们的位置和改变他们的大小
在最早的示例里那个猫的精灵被放在了舞台的左上角。它的xy坐标都是0。你可以通过改变它的xy坐标的值来改变他们的位置。下面的例子就是你通过设置xy为96坐标让它在舞台上居中。

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

在你创建这个精灵之后,把这两行代码放进setup方法。

  1. function setup() {
  2. //Create the `cat` sprite
  3. let cat = new Sprite(resources["images/cat.png"].texture);
  4. //Change the sprite's position
  5. cat.x = 96;
  6. cat.y = 96;
  7. //Add the cat to the stage so you can see it
  8. app.stage.addChild(cat);
  9. }

(注意:在这个例子里,SpritePIXI.Sprite的别名,TextureCachePIXI.utils.TextureCache的别名,resourcesPIXI.loader.resources的别名,我从现在开始在代码中使用这些别名。)

这两行代码将把猫往右移动96像素,往下移动96像素。

Cat centered on the stage

这只猫的左上角(它的左耳朵)(译者注:从猫的角度看其实是它的右耳朵。。。)表示了它的xy 坐标点。为了让他向右移动,增加x这个属性的值,为了让他向下移动,就增加y属性的值。如果这只猫的x属性为0,他就呆在舞台的最左边,如果他的y属性为0,他就呆在舞台的最上边。

Cat centered on the stage - diagram

你可以一句话设置精灵的xy:

  1. sprite.position.set(x, y)