通常Pixi给你三种方式从已经加载的纹理贴图集中创建精灵：

  1. 如果你是使用的 loader来加载纹理贴图集, 使用loader的 resources:
    1. let sprite = new Sprite(
    2. resources["images/treasureHunter.json"].textures["frameId.png"]
    3. );
  2. 要创建一个精灵需要输入太多东西了!
    所以我建议你给纹理贴图集的textures对象创建一个叫做id的别名，象是这样：
    1. let id = PIXI.loader.resources["images/treasureHunter.json"].textures;
    现在你就可以像这样实例化一个精灵了：
    1. let sprite = new Sprite(id["frameId.png"]);
    真不错啊~！

这里在setup函数中用三种不同的创建方法创建和显示了dungeon, explorer, 和 treasure精灵。

这里是代码运行的结果:

  1. explorer.y = app.stage.height / 2 - explorer.height / 2;

学会使用纹理贴图集来创建一个精灵是一个基本的操作。所以在我们继续之前，你来试着写一些这样的精灵吧：blob们和exit的门，让他们看起来象是这样：

All the texture atlas sprites

下面就是所有的代码啦。我也把HTML放了进来，现在你可以看见所有的上下文。（你可以在examples/spriteFromTextureAtlas.html找到可以用于演示的代码。）注意，blob精灵是用一个循环加进舞台的，并且他有一个随机的位置。

  1. <!doctype html>
  2. <meta charset="utf-8">
  3. <title>Make a sprite from a texture atlas</title>
  4. <body>
  5. <script src="../pixi/pixi.min.js"></script>
  6. <script>
  8. //Aliases
  9. let Application = PIXI.Application,
  10.     Container = PIXI.Container,
  11.     loader = PIXI.loader,
  12.     resources = PIXI.loader.resources,
  13.     TextureCache = PIXI.utils.TextureCache,
  14.     Sprite = PIXI.Sprite,
  15.     Rectangle = PIXI.Rectangle;
  17. //Create a Pixi Application
  18. let app = new Application({
  19.     width: 512,
  20.     height: 512,                       
  21.     antialias: true,
  22.     transparent: false,
  23.     resolution: 1
  24.   }
  25. );
  27. //Add the canvas that Pixi automatically created for you to the HTML document
  28. document.body.appendChild(app.view);
  31. loader
  32.   .add("images/treasureHunter.json")
  33.   .load(setup);
  34. //Define variables that might be used in more
  35. //than one function
  36. let dungeon, explorer, treasure, door, id;
  38. function setup() {
  40.   //There are 3 ways to make sprites from textures atlas frames
  42.   //1. Access the `TextureCache` directly
  43.   let dungeonTexture = TextureCache["dungeon.png"];
  44.   dungeon = new Sprite(dungeonTexture);
  45.   app.stage.addChild(dungeon);
  47.   //2. Access the texture using throuhg the loader's `resources`:
  48.   explorer = new Sprite(
  49.     resources["images/treasureHunter.json"].textures["explorer.png"]
  50.   );
  51.   explorer.x = 68;
  53.   //Center the explorer vertically
  54.   explorer.y = app.stage.height / 2 - explorer.height / 2;
  55.   app.stage.addChild(explorer);
  57.   //3. Create an optional alias called `id` for all the texture atlas
  58.   //frame id textures.
  59.   id = PIXI.loader.resources["images/treasureHunter.json"].textures;
  61.   //Make the treasure box using the alias
  62.   treasure = new Sprite(id["treasure.png"]);
  63.   app.stage.addChild(treasure);
  65.   //Position the treasure next to the right edge of the canvas
  66.   treasure.x = app.stage.width - treasure.width - 48;
  67.   treasure.y = app.stage.height / 2 - treasure.height / 2;
  68.   app.stage.addChild(treasure);
  70.   //Make the exit door
  71.   door = new Sprite(id["door.png"]);
  72.   door.position.set(32, 0);
  73.   app.stage.addChild(door);
  75.   let numberOfBlobs = 6,
  76.       spacing = 48,
  77.       xOffset = 150;
  79.   //Make as many blobs as there are `numberOfBlobs`
  82.     //Make a blob
  83.     let blob = new Sprite(id["blob.png"]);
  85.     //Space each blob horizontally according to the `spacing` value.
  86.     //`xOffset` determines the point from the left of the screen
  87.     //at which the first blob should be added.
  88.     let x = spacing * i + xOffset;
  90.     //Give the blob a random y position
  91.     //(`randomInt` is a custom function - see below)
  92.     let y = randomInt(0, app.stage.height - blob.height);
  94.     //Set the blob's position
  95.     blob.x = x;
  96.     blob.y = y;
  98.     //Add the blob sprite to the stage
  99.     app.stage.addChild(blob);
  100.   }
  101. }
  103. //The `randomInt` helper function
  104. function randomInt(min, max) {
  105.   return Math.floor(Math.random() * (max - min + 1)) + min;
  106. }
  108. </script>
  109. </body>

你可以看见所有的泡泡怪都用一个for循环被创建了，每一个泡泡怪都有一个独一无二的x坐标，像是下面这样：

  1. let x = spacing * i + xOffset;
  2. blob.x = x;

泡泡怪的y坐标将会从0到512之间随机取值，它的变量名是stage.height。它的值是利用randomInt函数来得到的。randomInt返回一个由你定义范围的随机数。

  1. randomInt(lowestNumber, highestNumber)

这意味着如果你想要一个1到10之间的随机数，你可以这样得到它：

  1. let randomNumber = randomInt(1, 10);

这是randomInt方法的定义：

  1. function randomInt(min, max) {
  2.   return Math.floor(Math.random() * (max - min + 1)) + min;

randomInt是一个很好的用来做游戏的工具函数，我经常用他。