Let me give you some more context.

Let's say I have 3 pixi games (same game code, just different assets). All of them will use a single Spine project as the game is the same, just with a different skin.

If I leave all the assets in Spine it will pack them into atlas pages (png) together with info about all in the atlas file (txt). I don't want this as it will increase the size of the games with each skin.

What I need is to have atlas pages (png) with assets only for game1 and atlas file (txt) with information about assets only for game1 so I can load only that specific game skin.

Same for game2, game3 etc.

Davide Additionally, if you have multiple skin variations, you don’t need to add all of them directly into Spine. Instead, create a single dummy version in Spine, and generate the variations externally. Then, you can use the texture packer separately to create different atlas variations. I recommend reading the full Spine Texture Packer user guide for a deeper understanding.

That would mean I would have a single Spine project with the "base" skin and that would provide me with just the JSON files and I would be able to generate atlas pages (png) and atlas file (txt) for each skin separately using the CLI?

Davide The easiest approach in your case is to export the skeleton three times, enabling the export flag only for the skin you want to export each time. This way, at runtime, your skeleton will require only the regions for the selected skin.

Thanks this seems to work!

Davide Next, use the texture packer separately, providing as input a folder containing only the attachments of that skin. For example, to create the atlas for skin1, if your image folder is structured as follows:...

I'm not sure why I need this? Doesn't the first part cover all my needs? Is this a different approach or an extension?

Okay, thanks!

Davide // load the atlas and automatically the textures
const atlas = await PIXI.Assets.load("https://esotericsoftware.com/files/examples/latest/spineboy/export/spineboy-pma.atlas");

// util to get a new sprite, given an attachment name
const getSprite = attachmentName => {
// find the region with the given attachment name
const region = atlas.regions.find(element => element.name === attachmentName);

// get the respective page texture
const originalTexture = region.texture.texture;

// determine the position of the desired attachment, considering rotation
const frame = {
    x: region.x,
    y: region.y,
    width: region.rotate === undefined ? region.width : region.height,
    height: region.rotate === undefined ? region.height : region.width,
};

// creating the new sub texture
    const texture = new PIXI.Texture({
    source: originalTexture.baseTexture,
    crop: new PIXI.Rectangle(frame.x, frame.y, frame.width, frame.height),
    frame,
});

// creating a new sprite
return new PIXI.Sprite(texture);

}

const miniSpineBoy = new PIXI.Container();

const footR = getSprite("front-foot");
footR.x = 85;
footR.y = 135;
footR.scale.set(.70)
miniSpineBoy.addChild(footR);

const head = getSprite("head");
miniSpineBoy.addChild(head);

const eyeL = getSprite("eye-surprised");
eyeL.x = 45;
eyeL.y = 75;
eyeL.scale.set(.75)
miniSpineBoy.addChild(eyeL);

const eyeR = getSprite("eye-indifferent");
eyeR.x = 70;
eyeR.y = 80;
eyeR.scale.set(.75)
miniSpineBoy.addChild(eyeR);

const mouth = getSprite("mouth-oooo");
mouth.x = 50;
mouth.y = 120;
miniSpineBoy.addChild(mouth);

const footL = getSprite("front-foot");
footL.x = 25;
footL.y = 135;
footL.scale.set(.70)
miniSpineBoy.addChild(footL);

miniSpineBoy.x = window.innerWidth / 2 - miniSpineBoy.width / 2;
miniSpineBoy.y = window.innerHeight / 2 - miniSpineBoy.height / 2;;
app.stage.addChild(miniSpineBoy);

The only thing is I can't get the script to work correctly in Spine 7 with rotated assets and white strip on :/

Got it! We made it to work now... but we have calculate the offsets and rotate the Texture at the end which I'm not sure is the correct approach.

export const createTexturesFromSpineAtlas = (
  atlas: string,
  assets: string[]
) => {
  const regions = Assets.get(atlas)['regions'];

  regions
    .filter((region: TextureAtlasRegion) => assets.includes(region.name))
    .forEach((region: TextureAtlasRegion) => {
      const frame = new Rectangle(
        region.x,
        region.y,
        region.degrees !== 0 ? region.height : region.width,
        region.degrees !== 0 ? region.width : region.height
      );

      const orig = new Rectangle(
        0,
        0,
        region.originalWidth,
        region.originalHeight
      );

      const offsetY = region.originalHeight - region.height - region.offsetY; // spine stores data from the bottom-left corner, and we need to adjust for that

      const trim = new Rectangle(
        region.offsetX,
        offsetY,
        region.width,
        region.height
      );

      const texture = new Texture(
        region.texture.texture,
        frame,
        orig,
        trim,
        Pixi.groupD8.N
      );

      Texture.addToCache(texture, region.name);
    });
};

Hey! I have a question related to the topic discussed here. You said that addSlotObjects should be avoided where possible. But what if I want to create an animation that requires a dynamic number value? Would it be OK to use addSlotObjects in that case, or should I change the whole idea and create the animation in Pixi directly?

You meant Pixi, right? But thanks!

Is there any good guide for batching and best practices to learn why and when it is a problem? I would like to figure out which assets should be packed together and if one large spritesheet is better or couple of smaller ones, etc.