从精灵图（雪碧图）中获取精灵

从精灵图（雪碧图）中创建精灵【为了防止与精灵混淆，我在之后的译文中都将采用雪碧图这一译法】

你现在已经知道了怎么从一个单文件内加载图像。但是作为一个游戏设计师，你没准更经常使用 雪碧图（也被称之为 精灵图）。Pixi封装了一些方便的方式来处理这种情况。所谓雪碧图就是用一个单文件包含你游戏中需要的所有文件，这里就是一个包含了游戏对象和游戏觉得的雪碧图。

整个雪碧图是192192像素宽高，但每一个单图像只占有一个3232的网格。把你的所有游戏图像存储在一个雪碧图上是一个非常有效率和工程化的手段，Pixi为此做出了优化。你可以从一个雪碧图中用一个矩形区域捕获一个子图像。这个矩形拥有和你想提取的子图像一样的大小和位置。这里有一个怎么从一个精灵图中获取“火箭”这个子图像的例子。

让我们看看这部分的代码，用Pixi的加载器加载tileset.png，就像你在之前的示例之中做到的那样。

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

现在，在图像被加载之后，用一个矩形块去截取雪碧图来创建精灵的纹理。下面是提取火箭，创建精灵，在canvs上显示它的代码。

function setup() {
  //Create the `tileset` sprite from the texture
  let 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
  //(`Rectangle` is an alias for `PIXI.Rectangle`)
  let rectangle = new Rectangle(192, 128, 64, 64);
  //Tell the texture to use that rectangular section
  texture.frame = rectangle;
  //Create the sprite from the texture
  let rocket = new Sprite(texture);
  //Position the rocket sprite on the canvas
  rocket.x = 32;
  rocket.y = 32;
  //Add the rocket to the stage
  app.stage.addChild(rocket);
  //Render the stage   
  renderer.render(stage);
}

它是如何工作的呢？

Pixi内置了一个通用的Rectangle对象 (PIXI.Rectangle)，他是一个用于定义矩形形状的通用对象。他需要一些参数，前两个参数定义了x 和y轴坐标位置，后两个参数定义了矩形的width 和 height，下面是新建一个Rectangle对象的格式。

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

这个矩形对象仅仅是一个 数据对象，如何使用它完全取决于你。在我们的例子里，我们用它来定义子图像在雪碧图中的位置和大小。Pixi的纹理中有一个叫做frame的很有用的属性，它可以被设置成任何的Rectangle对象。frame将纹理映射到Rectangle的维度。下面是怎么用frame来定义火箭的大小和位置。

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

你现在可以用它裁切纹理来创建精灵了：

let rocket = new Sprite(texture);

现在成功了！
因为从一个雪碧图创建精灵的纹理是一个用的很频繁的操作，Pixi有一个更加合适的方式来帮助你处理这件事情。欲知后事如何，且听下回分解。