As mentioned earlier, there are three main ways to create sprites:

  • Created with a single image file
  • Create it with a Sprite image
  • Create from a texture map (texture map is a Sprite map with JSON defining the size and position of the image)

Now that we’ve learned how to create sprites from a single image file, let’s look at the last two ways to create sprites.

One, use a Sprite to create

Here’s the Sprite we’re going to use:

Pixi can capture a Sprite subimage by creating a rectangular area and setting its size and position.

1. Example: Capture the Sprite rocket and display it

let app = new PIXI.Application({
    width: 256.height: 256.antialias: true.transparent: false.resolution: 1
});

document.body.appendChild(app.view);

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

function setup() {

    let texture = PIXI.utils.TextureCache["images/tileset.png"]
    
    // Create a rectangle object with the first two parameters defining the coordinate position and the last two parameters defining the width and height
    let rectangle = new PIXI.Rectangle(96.64.32.32)
    
    // The Pixi texture has a frame property, which can be set to any Rectangle object. Frame maps the texture to the dimensions of Rectangle
    texture.frame = rectangle

    let rocket = new PIXI.Sprite(texture);
    rocket.position.set(100.100)

    app.stage.addChild(rocket);
}
Copy the code

Effect:

Create from a texture map set

A texture patch atlas is a JSON data file that contains the size and position of the Sprite subimage. If you use texture tiles, all you need to know to display a subimage is its name.

If you want to change the layout of the texture map, or add, or resize, or delete the image, all you need to do is modify the JSON data file, and your game will automatically apply the new texture map to all the data in the application, no need to modify the texture map in the code.

1. Texture Packer

The Pixi is compatible with the standard Texture Patch atlas format of Texture Packer output.

If you’re using the free version of Texture Packer, you’ll need to do the following to make it work:

Clone the project repository locally, which contains all the resources needed.

Find the following images and pull them into Texture Packer:

Click Publish to save the generated file, and you’ll get a JSON file and a PNG file.

"blob.png":
{
    "frame": {"x":55."y":2."w":32."h":24},
    "rotated": false."trimmed": false."spriteSourceSize": {"x":0."y":0."w":32."h":24},
    "sourceSize": {"w":32."h":24},
    "pivot": {"x":0.5."y":0.5}},Copy the code

This is a paragraph in JSON that describes the blob.png information. These individual sub-images are called frames, and with this data you don’t have to remember the size and position of each image, just determine the frame ID of the Sprite. Frame ids are the original names of those images, such as blob.png above.

One of the great advantages of using texture tiles is that you can easily add two pixels to each image. Texture Packer does this by default. This is important to protect images from bleeding. Bleeding is important to prevent two images from being adjacent to each other. This usually happens when your GPU renders certain images. Do I add a pixel or two on the edge or not? This can be done differently for each GPU. So leaving one or two pixels free for each image is best for display compatibility.

(Note: If you do leave two pixels bleeding around each image, you have to watch out for “missing a pixel” on the Pixi display at all times. Try changing the texture’s scale mode to recalculate it. texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST; This usually happens when your GPU fails to round up its floating point arithmetic.

2. Load the texture patch atlas

PIXI.loader
  .add("images/xxx.json")
  .load(setup)
Copy the code

If the JSON is generated with Texture Packer, pixi. loader will automatically read the data and create a Texture for each frame.

3. Create sprites from the loaded texture set

Two ways:

  1. usePIXI.utils.TextureCache:
let texture = PIXI.utils.TextureCache["frameId.png"],
    sprite = new Sprite(texture);
Copy the code
  1. If you are usingloaderTo load the texture patch atlas, useloader 的 resources:
let sprite = new Sprite(
  PIXI.loader.resources["images/xxx.json"].textures["frameId.png"]);Copy the code

4. Example: Create dungeons, heroes, monsters, chests, doors

Effect:

Code:

  • GitHub:github.com/dongdong121… (index1. HTML)
  • Gitee: gitee.com/barrydong/L… (index1. HTML)