PIXI 创建 Sprite的几种方法-PIXI文档翻译(3)

[b]1、通过spritesheets图创建sprite[/b]

你现在知道如何从单个图像文件制作精灵。但是，作为游戏设计师，你通常会使用tilesets（也称为spritesheets）来制作 sprite。Pixi有一些方便的内置方法来帮助你做到这一点。tileset是包含子图像的单个图像文件。子图像表示您要在游戏中使用的所有图形。这里是一个包含游戏角色和游戏对象作为子图像的tileset图像的示例。


[img]http://dl2.iteye.com/upload/attachment/0123/3397/1572ac89-f2f7-3332-901a-b21923a3b408.png[/img]


整个图块集为192×192像素。每个图像都在一个自己的32 x 32像素的网格单元。存储和访问所有的游戏图形在一个tileset是一个非常处理器和内存高效的方式来处理图形，而Pixi是为他们优化。

您可以通过定义与要提取的子图像大小和位置相同的矩形区域，从图块集中捕获子图像。这里是从tileset中提取的火箭子图像的例子


[img]http://dl2.iteye.com/upload/attachment/0123/3399/97423353-0a71-32f4-81d8-92468cf1fac7.png[/img]

让我们看看这样做的代码。首先，tileset.png使用Pixi的加载图像loader，就像你在前面的例子中做的一样。

loader
  .add("images/tileset.png")
  .load(setup);

接下来，当图像加载时，使用tileset的矩形子部分创建sprite的图像。这里是提取子图像，创建火箭精灵，并定位和显示在画布上的代码。

function setup() {
  

  //Create the `tileset` sprite from the texture
  var texture = TextureCache["images/tileset.png"];

  //Create a rectangle object that defines the position and
  //size of the sub-image you want to extract from the texture
  var rectangle = new Rectangle(192, 128, 64, 64);

  //Tell the texture to use that rectangular section
  texture.frame = rectangle;

  //Create the sprite from the texture
  var rocket = new Sprite(texture);

  //Position the rocket sprite on the canvas
  rocket.x = 32;
  rocket.y = 32;

  //Add the rocket to the stage
  stage.addChild(rocket);

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

这个怎么用？

Pixi有一个内置Rectangle对象（PIXI.Rectangle），它是一个用于定义矩形形状的通用对象。它需要四个参数。前两个参数定义了矩形x和y位置。最后两个定义它width和height。以下是定义新Rectangle对象的格式。

var rectangle = new PIXI.Rectangle(x, y, width, height);

矩形对象只是一个数据对象 ; 它由你决定如何使用它。在我们的示例中，我们使用它来定义要提取的图块上的子图像的位置和面积。Pixi纹理有一个有用的属性frame，可以设置为任何Rectangle对象。的frame作物的纹理的尺寸Rectangle。这里是如何使用frame 来裁剪纹理到火箭的大小和位置。

var rectangle = new Rectangle(192, 128, 64, 64);
texture.frame = rectangle;

然后，您可以使用裁剪的纹理创建精灵：

var rocket = new Sprite(texture);

这就是它的工作原理！

因为制作sprite纹理从一个瓷砖是你会做的很多频率，Pixi有一个更方便的方式来帮助你这样做 - 让我们来看看下一步是什么。

[b]2、使用纹理图集[/b]

如果你在一个大型，复杂的游戏，你会想要一个快速，有效的方式来创建精灵从tilesets。这是 纹理地图集真正有用的地方。纹理地图集是一个JSON数据文件，其中包含匹配图块集PNG图像上的子图