PIXI Sprite的定位，尺寸和旋转-PIXI文档翻译(2)

[b]1、定位Sprite[/b]
现在你知道如何创建和显示精灵，让我们了解如何定位和调整它们的大小。

在前面的例子中，猫精灵添加到舞台的左上角。该猫的x位置为0，y位置为0.您可以通过更改其值x和y属性的值来更改猫的位置。这里是如何通过将猫x和y属性值设置为96，使猫在舞台中央。

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

setup 在创建精灵后，在函数的任何位置添加这两行代码。

function setup() {

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

  //Render the stage
  renderer.render(stage);
}

（注意：在这个例子中， Sprite是一个别名for PIXI.Sprite，TextureCache是一个别名for PIXI.utils.TextureCache，并且resources是一个别名， PIXI.loader.resources如前所述。我将使用别名，从现在开始，对所有Pixi对象和方法使用相同的格式。）

这两行新代码会将cat向右移动96像素，向下移动96像素。结果如下：

[img]http://dl2.iteye.com/upload/attachment/0123/3377/1334c560-f3ec-3785-8211-3ef7541afa9a.png[/img]

猫的左上角（它的左耳）代表它的x和y 锚点。要使猫向右移动，请增加其x属性的值。要使猫向下移动，请增加其y属性的值。如果猫的x值为0，它将在舞台的左侧。如果它的y值为0，它将在舞台的最顶端。


[img]http://dl2.iteye.com/upload/attachment/0123/3379/689fadee-4800-37f9-8872-837b7cce5cae.png[/img]
而不是单独设置精灵x和y属性，您可以将它们一起设置在一行代码，如下所示：

sprite.position.set(x, y)

[b]2、尺寸和比例[/b]
您可以通过设置改变精灵的尺寸width和height 性能。这里是如何给猫一个width80像素和height120像素。

cat.width = 80;
cat.height = 120;

将这两行代码添加到setup函数，如下所示：

function setup() {

  //Create the `cat` sprite
  var cat = new Sprite(resources["images/cat.png"].texture);

  //Change the sprite's position
  cat.x = 96;
  cat.y = 96;

  //Change the sprite's size
  cat.width = 80;
  cat.height = 120;

  //Add the cat to the stage so you can see it
  stage.addChild(cat);
}

结果如下：


[img]http://dl2.iteye.com/upload/attachment/0123/3381/e8c1039a-daa5-3797-bad1-dc8b784879d7.png[/img]

你可以看到猫的位置（它的左上角）没有改变，只有它的宽度和高度。


[img]http://dl2.iteye.com/upload/attachment/0123/3383/11f3db7f-d8d0-3a13-a142-05e8486bbbfc.png[/img]


精灵也有scale.x和scale.y属性，改变精灵的宽度和高度成比例。这里是如何将猫的尺寸设置为一半大小：

cat.scale.x = 0.5;
cat.scale.y = 0.5;

比例值是0和1之间的数字，表示精灵大小的百分比。1表示100％（全尺寸），而0.5表示50％（半尺寸）。你可以通过将sprite的尺寸值设置为2来将sprite的尺寸加倍，如下所示：

cat.scale.x = 2;
cat.scale.y = 2;

Pixi有一个替代的，简洁的方法为您设置精灵的规模在一行代码使用该scale.set方法。

cat.scale.set(0.5, 0.5);

如果吸引你，使用它！

[b]3、旋转[/b]
您可以通过将sprite的rotation属性设置为以弧度为单位的值来使sprite旋转。

cat.rotation = 0.5;

但是，旋转发生在哪个点？

你见过一个精灵的左上角代表它x和y地位。该点称为锚点。如果你将sprite的rotation 属性设置为类似的0.5，旋转将围绕精灵的锚点。这个图表显示了这将对我们的猫精灵有什么影响。


[img]http://dl2.iteye.com/upload/attachment/0123/3385/5f7d7fb3-38e2-3cfe-b32c-528599661b8f.png[/img]


你可以看到锚点，猫的左耳，是猫所旋转的假想圆的中心。如果你想让精灵围绕它的中心旋转怎么办？改变精灵的anchor点，使它的中心在精灵，像这样：

cat.anchor.x = 0.5;
cat.anchor.y = 0.5;

anchor.x和anchor.y值表示纹理的尺寸的百分比，从0到1（0％至100％）。将其设置为0.5将纹理对准点的中心。点本身的位置不会改变，只是纹理位于其上的方式。

下一个图表显示了如果您将旋转的精灵居中定位，旋转的精灵会发生什么。

[img]http://dl2.iteye.com/upload/attachment/0123/3387/12842c61-885a-38a3-9a79-8f431a99ca92.png[/img]

你可以看到sprite的纹理向上和向左移动。这是一个重要的副作用要记住！

就像使用position和scale，你可以设置锚的x和y值用一行代码，像这样：

sprite.anchor.set(x, y)

Sprite也有一个pivot以类似的方式工作的属性 anchor。pivot设置精灵的x / y原点的位置。如果更改枢轴点，然后旋转精灵，它将围绕该原点旋转。例如，下面的代码将精灵的pivot.x点设置为32，pivot.y点指向32

cat.pivot.set(32, 32)

假设sprite是64x64像素，sprite现在将围绕其中心点旋转。但是请记住：如果你改变精灵的旋转点，你也改变了它的x / y原点。

那么，anchor和之间有什么区别pivot？他们真的很相似！anchor使用0到1的归一化值来移动精灵图像纹理的原点。 pivot使用像素值来移动精灵的x和y点的原点。你应该使用什么？随你便。只是玩两个人，看看你喜欢。