Creating sprites from a loaded texture atlas

Pixi gives you three general ways to create a sprite from a texture atlas:

  1. Using TextureCache:
  1. let texture = TextureCache["frameId.png"],
  2.     sprite = new Sprite(texture);
  1. If you’ve used Pixi’s loader to load the texture atlas, use the loader’s resources:
  1. let sprite = new Sprite(
  2.   resources["images/treasureHunter.json"].textures["frameId.png"]
  3. );
  1. That’s way too much typing to do just to create a sprite! So I suggest you create an alias called id that points to texture’s altas’s textures object, like this:
  1. let id = PIXI.loader.resources["images/treasureHunter.json"].textures;

Then you can just create each new sprite like this:

  1. let sprite = new Sprite(id["frameId.png"]);

Much better!

Here’s how you could use these three different sprite creation techniques in the setup function to create and display the dungeon, explorer, and treasure sprites.

  1. //Define variables that might be used in more 
  2. //than one function
  3. let dungeon, explorer, treasure, id;
  5. function setup() {
  7.   //There are 3 ways to make sprites from textures atlas frames
  9.   //1. Access the `TextureCache` directly
  10.   let dungeonTexture = TextureCache["dungeon.png"];
  11.   dungeon = new Sprite(dungeonTexture);
  12.   app.stage.addChild(dungeon);
  14.   //2. Access the texture using through the loader's `resources`:
  15.   explorer = new Sprite(
  16.     resources["images/treasureHunter.json"].textures["explorer.png"]
  17.   );
  18.   explorer.x = 68;
  20.   //Center the explorer vertically
  21.   explorer.y = app.stage.height / 2 - explorer.height / 2;
  22.   app.stage.addChild(explorer);
  24.   //3. Create an optional alias called `id` for all the texture atlas 
  25.   //frame id textures.
  26.   id = PIXI.loader.resources["images/treasureHunter.json"].textures; 
  28.   //Make the treasure box using the alias
  29.   treasure = new Sprite(id["treasure.png"]);
  30.   app.stage.addChild(treasure);
  32.   //Position the treasure next to the right edge of the canvas
  33.   treasure.x = app.stage.width - treasure.width - 48;
  34.   treasure.y = app.stage.height / 2 - treasure.height / 2;
  35.   app.stage.addChild(treasure);
  36. }

Here’s what this code displays:

Explorer, dungeon and treasure

The stage dimensions are 512 by 512 pixels, and you can see in the code above that the app.stage.height and app.stage.width properties are used to align the sprites. Here’s how the explorer‘s y position is vertically centered:

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

Learning to create and display sprites using a texture atlas is an important benchmark. So before we continue, let’s take a look at the code you could write to add the remaining sprites: the blobs and exit door, so that you can produce a scene that looks like this:

All the texture atlas sprites

Here’s the entire code that does all this. I’ve also included the HTML code so you can see everything in its proper context. (You’ll find this working code in the examples/spriteFromTextureAtlas.html file in this repository.) Notice that the blob sprites are created and added to the stage in a loop, and assigned random positions.

  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);
  30. //load a JSON file and run the `setup` function when it's done
  31. loader
  32.   .add("images/treasureHunter.json")
  33.   .load(setup);
  35. //Define variables that might be used in more 
  36. //than one function
  37. let dungeon, explorer, treasure, door, id;
  39. function setup() {
  41.   //There are 3 ways to make sprites from textures atlas frames
  43.   //1. Access the `TextureCache` directly
  44.   let dungeonTexture = TextureCache["dungeon.png"];
  45.   dungeon = new Sprite(dungeonTexture);
  46.   app.stage.addChild(dungeon);
  48.   //2. Access the texture using throuhg the loader's `resources`:
  49.   explorer = new Sprite(
  50.     resources["images/treasureHunter.json"].textures["explorer.png"]
  51.   );
  52.   explorer.x = 68;
  54.   //Center the explorer vertically
  55.   explorer.y = app.stage.height / 2 - explorer.height / 2;
  56.   app.stage.addChild(explorer);
  58.   //3. Create an optional alias called `id` for all the texture atlas 
  59.   //frame id textures.
  60.   id = PIXI.loader.resources["images/treasureHunter.json"].textures; 
  62.   //Make the treasure box using the alias
  63.   treasure = new Sprite(id["treasure.png"]);
  64.   app.stage.addChild(treasure);
  66.   //Position the treasure next to the right edge of the canvas
  67.   treasure.x = app.stage.width - treasure.width - 48;
  68.   treasure.y = app.stage.height / 2 - treasure.height / 2;
  69.   app.stage.addChild(treasure);
  71.   //Make the exit door
  72.   door = new Sprite(id["door.png"]); 
  73.   door.position.set(32, 0);
  74.   app.stage.addChild(door);
  76.   //Make the blobs
  77.   let numberOfBlobs = 6,
  78.       spacing = 48,
  79.       xOffset = 150;
  81.   //Make as many blobs as there are `numberOfBlobs`
  82.   for (let i = 0; i < numberOfBlobs; i++) {
  84.     //Make a blob
  85.     let blob = new Sprite(id["blob.png"]);
  87.     //Space each blob horizontally according to the `spacing` value.
  88.     //`xOffset` determines the point from the left of the screen
  89.     //at which the first blob should be added.
  90.     let x = spacing * i + xOffset;
  92.     //Give the blob a random y position
  93.     //(`randomInt` is a custom function - see below)
  94.     let y = randomInt(0, app.stage.height - blob.height);
  96.     //Set the blob's position
  97.     blob.x = x;
  98.     blob.y = y;
  100.     //Add the blob sprite to the stage
  101.     app.stage.addChild(blob);
  102.   }
  103. }
  105. //The `randomInt` helper function
  106. function randomInt(min, max) {
  107.   return Math.floor(Math.random() * (max - min + 1)) + min;
  108. }
  110. </script>
  111. </body>

You can see in the code above that all the blobs are created using a for loop. Each blob is spaced evenly along the x axis like this:

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

spacing has a value 48, and xOffset has a value of 150. What this means is the first blob will have an x position of 150. This offsets it from the left side of the stage by 150 pixels. Each subsequent blob will have an x value that’s 48 pixels greater than the blob created in the previous iteration of the loop. This creates an evenly spaced line of blob monsters, from left to right, along the dungeon floor.

Each blob is also given a random y position. Here’s the code that does this:

  1. let y = randomInt(0, stage.height - blob.height);
  2. blob.y = y;

The blob‘s y position could be assigned any random number between 0 and 512, which is the value of stage.height. This works with the help of a custom function called randomInt. randomInt returns a random number that’s within a range between any two numbers you supply.

  1. randomInt(lowestNumber, highestNumber)

That means if you want a random number between 1 and 10, you can get one like this:

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

Here’s the randomInt function definition that does all this work:

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

randomInt is a great little function to keep in your back pocket for making games - I use it all the time.