michalvadak

For Spine GameObjects, it's always best to have all character images on a single texture atlas page whenever possible. This ensures the character can be rendered without breaking batching.

The addSlotObjects method is merely a convenience function and should be avoided when possible. Typically, the Pixi object drawn using addSlotObjects comes from a different texture, which breaks batching. If the slot is in the middle, rendering the character would now require three draw calls.

Spine atlases are primarily designed for Spine GameObjects, but nothing prevents you from reusing the character’s images for other purposes. However, individual character images are not recreated as Pixi sub-textures from the texture atlas PNG. Instead, meshes and UVs are used to achieve this.

If you want to reuse an image packed into an atlas page outside of a Spine GameObject, it’s your responsibility to create a Pixi sub-texture for it. You can use the atlas data to determine the image’s position and size within the respective texture atlas page.

I did a quick experiment with this—here’s the code:

// 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);

And here the result:

As you can see, I’m not even creating a Spine GameObject here, just loading the atlas. I haven’t considered any special cases related to how the texture packing is done, but for reusing a few images, this approach should work.

michalvadak

I'm not entirely sure I understand how your game and game instances work.
From what I gather, each game instance uses only one skin. Because of this, you want to pack the skin images into separate atlases. Please correct me if I'm wrong.

Keep in mind that you don’t need to duplicate your projects to create separate atlas pages.
If you organize the skin images into different folders, the Spine Texture Packer is smart enough to pack them into separate atlas pages, as explained in this user guide section.

However, even if you use multiple atlas pages, once you load your atlas file (txt), all atlas pages (pngs) are loaded into memory.
If you want to load only specific pages into memory, you'll need to modify our atlas loader and implement a deferred loading strategy.
If in your game instance you never need of other skins, you could also just remove the atlas page info not needed from the atlas text file.

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.

You can also use the CLI to pack your textures, creating a streamlined pipeline for generating skin variations.

As a last resort, you could use an external Texture Packer to provide assets to the Spine skeleton.
If you use addSlotObjects, it will generate a large number of Pixi elements. Alternatively, you can create a custom AttachmentLoader to feed images directly to the skeleton.

Glad it worked!

michalvadak 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?

If your skin has no dependencies, the first step should be enough.
If there are dependencies, as explained below, you also need to export the skin you depend on. In that case, its images will be included in your atlas. To avoid that you need to export the skeleton and the atlas separately.

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

The script above was just a quick experiment. I did not test any special use cases.

But what's the problem? In my example, I also had rotated textures and white strips.
Just knowing that it doesn't work for you won't help me in helping you
Could you describe your issue better?

michalvadak

Here you can find all the properties parsed from the texture atlas file. If something doesn't work in the future, you can double-check there.

You may also want to check the API documentation for the AtlasRegion where all relevant properties are documented.