大小和比例

你能够通过精灵的widthheight属性来改变它的大小。这是怎么把width调整成80像素,height调整成120像素的例子:

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

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. //Change the sprite's size
  8. cat.width = 80;
  9. cat.height = 120;
  10. //Add the cat to the stage so you can see it
  11. app.stage.addChild(cat);
  12. }

结果看起来是这样:

Cat's height and width changed

你能看见,这只猫的位置(左上角的位置)没有改变,只有宽度和高度改变了。

Cat's height and width changed - diagram

精灵都有scale.xscale.y属性,他们可以成比例的改变精灵的宽高。这里的例子把猫的大小变成了一半:

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

Scale的值是从0到1之间的数字的时候,代表了它对于原来精灵大小的百分比。1意味着100%(原来的大小),所以0.5意味着50%(一半大小)。你可以把这个值改为2,这就意味着让精灵的大小成倍增长。像这样:

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

Pixi可以用一行代码缩放你的精灵,那要用到scale.set方法。

  1. cat.scale.set(0.5, 0.5);

如果你喜欢这种,就用吧!