`
haiyupeter
  • 浏览: 425872 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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

 
阅读更多

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

在前面的例子中,猫精灵添加到舞台的左上角。该猫的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像素。结果如下:



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



而不是单独设置精灵x和y属性,您可以将它们一起设置在一行代码,如下所示:

sprite.position.set(x, y)



2、尺寸和比例
您可以通过设置改变精灵的尺寸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);
}


结果如下:




你可以看到猫的位置(它的左上角)没有改变,只有它的宽度和高度。





精灵也有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);


如果吸引你,使用它!

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

cat.rotation = 0.5;


但是,旋转发生在哪个点?

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





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

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


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

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



你可以看到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点的原点。你应该使用什么?随你便。只是玩两个人,看看你喜欢。
  • 大小: 6.8 KB
  • 大小: 12.6 KB
  • 大小: 14.3 KB
  • 大小: 17.1 KB
  • 大小: 9.6 KB
  • 大小: 18.1 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics