精灵位置
现在你知道了怎么创建和显示一个精灵,让我们学习如何定位他们的位置和改变他们的大小
在最早的示例里那个猫的精灵被放在了舞台的左上角。它的x
和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
的别名,我从现在开始在代码中使用这些别名。)
这两行代码将把猫往右移动96像素,往下移动96像素。
这只猫的左上角(它的左耳朵)(译者注:从猫的角度看其实是它的右耳朵。。。)表示了它的x
和 y
坐标点。为了让他向右移动,增加x
这个属性的值,为了让他向下移动,就增加y
属性的值。如果这只猫的x
属性为0,他就呆在舞台的最左边,如果他的y
属性为0,他就呆在舞台的最上边。
你可以一句话设置精灵的x
和y
:
sprite.position.set(x, y)