Yes, you can achieve lazy loading of PNG assets for different traits in a web application using spine-ts and spine-canvas. Here’s a general approach to handle this:

1. Separate Asset Sheets: Organize your assets into separate PNG files based on traits. This way, you can load only the necessary assets when a trait is selected.

2. Custom AttachmentLoader: Implement a custom AttachmentLoader that allows you to load and configure attachments dynamically. This will enable you to load only the required assets at runtime.

3. Dynamic Loading: Use an AssetManager to load the required PNG files dynamically when a trait is selected. You can extend the AssetManager to handle the loading and caching of these assets.

Here’s a step-by-step guide:

Step 1: Organize Assets

Organize your assets into separate PNG files. For example:

• trait1.png
• trait2.png
• trait3.png
• ...

Step 2: Implement Custom AttachmentLoader

Create a custom AttachmentLoader that can load and configure attachments dynamically. Here’s a basic example:

class CustomAttachmentLoader extends spine.AtlasAttachmentLoader {
    constructor(private atlas: spine.TextureAtlas) {
        super(atlas);
    }

    newRegionAttachment(skin: spine.Skin, name: string, path: string): spine.RegionAttachment {
        const attachment = new spine.RegionAttachment(name);
        // Configure the attachment with the atlas region
        const region = this.atlas.findRegion(path);
        if (region) {
            attachment.setRegion(region);
        }
        return attachment;
    }

    // Implement other methods as needed
}

Step 3: Dynamic Loading with AssetManager

Extend the AssetManager to load and cache assets dynamically:

class CustomAssetManager extends spine.AssetManager {
    loadTrait(trait: string): Promise<void> {
        return new Promise((resolve, reject) => {
            const path = `path/to/traits/${trait}.png`;
            this.loadTexture(path, (texture) => {
                if (texture) {
                    resolve();
                } else {
                    reject(new Error(`Failed to load trait: ${trait}`));
                }
            });
        });
    }
}

Step 4: Load and Configure Traits at Runtime

Load and configure the traits dynamically when needed:

const assetManager = new CustomAssetManager();
const atlas = new spine.TextureAtlas();
const attachmentLoader = new CustomAttachmentLoader(atlas);

function loadTrait(trait: string) {
    assetManager.loadTrait(trait).then(() => {
        const region = atlas.findRegion(trait);
        if (region) {
            // Configure the attachment with the loaded region
            const attachment = attachmentLoader.newRegionAttachment(skin, trait, trait);
            // Add the attachment to the skin
            skin.setAttachment(slotIndex, attachmentName, attachment);
        }
    }).catch((error) => {
        console.error(error);
    });
}

// Example usage
loadTrait('trait1');
loadTrait('trait2');

This approach ensures that you only load the necessary assets based on the selected traits, optimizing bandwidth usage and improving performance.

Summary

You can dynamically load and configure PNG assets for different traits in a web application using spine-ts and spine-canvas by organizing assets into separate files, implementing a custom AttachmentLoader, and extending the AssetManager to handle dynamic loading. This approach optimizes bandwidth usage and improves performance by loading only the necessary assets.

joo

spine-webgl uses the AssetManager that extends the spine-core AssetManagerBase.

As you can see, there is the loadTextureAtlas method that takes an atlas file and loads all the atlas .png pages described in the atlas.

Once the atlas and its pages are loaded, a TextureAtlas file is created. This file contains all the png atlas pages loaded and all the regions where the single images are located within the pages.
It indeed provides a convenient findRegion method that takes an attachment path and gives back the respective region.

The TextureAtlas is passed to the AtlasAttachmentLoader that is responsible for creating the attachments of the skeleton. For instance, when it is necessary to create a region attachment, the newRegionAttachment method is called. That uses the findRegion method of the TextureAtlas described above.

Depending on your specific need, you have to create your own AttachmentLoader and your own AssetManager that loads attachments/textures on demand/lazily.

I also suggest you read our runtime guide page on Loading Skeleton Data.
There is also this conversation that might be interesting, even though it is more oriented on attachment lazy loading rather than textures.
It might also be interesting to read the Texture Packing page of the user guide and especially this section to easily split your skins into several atlas pages.

joo

If you create your own loader, it really depends on your implementation.
Here are some possible ideas.

Probably, having a single .atlas is the easiest way. However, in that case, if you don't want to load the textures all together, you have to write your implementation of loadTextureAtlas that does not load the textures and consequently does not set the textures for the regions.
This implies that you have to load the textures on demand before they are used.
To do that, you can use loadTexture from the AssetManager. Then call the setTexture on the respective atlas page you just loaded. You can write a method that takes as input the atlas page for which you want to load the texture and does the two things mentioned above.
After that, you should be safe to use your animations/skins that use the atlas pages just loaded.

This is an example of what I'm saying.
Add a loadTextureAtlasButNoTextures method to AssetManagerBase (you can extend it):

	loadTextureAtlasButNoTextures (path: string,
		success: (path: string, atlas: TextureAtlas) => void = () => { },
		error: (path: string, message: string) => void = () => { },
		fileAlias?: { [keyword: string]: string }
	) {
		path = this.start(path);
		this.downloader.downloadText(path, (atlasText: string): void => {
			try {
				this.success(success, path, new TextureAtlas(atlasText));
			} catch (e) {
				this.error(error, path, `Couldn't parse texture atlas ${path}: ${(e as any).message}`);
			}
		}, (status: number, responseText: string): void => {
			this.error(error, path, `Couldn't load texture atlas ${path}: status ${status}, ${responseText}`);
		});
	}

This is the very same code of loadTextureAtlas without the texture loading.

Then, you can use this for example in a spine-webgl app.

async loadAssets(canvas) {
	// Load the skeleton file.
	canvas.assetManager.loadJson("assets/skeleton.json");
	// Load the atlas and its pages.
	// canvas.assetManager.loadTextureAtlas("assets/skeleton.atlas");

	const atlas = await new Promise(resolve => {
		canvas.assetManager.loadTextureAtlasButNoTextures("assets/skeleton.atlas", (_, atlas) => resolve(atlas));
	});

	// assuming we have two pages
	const [page1, page2] = atlas.pages;

	// load first page immeaditely
	canvas.assetManager.loadTexture(`assets/${page1.name}`, (_, texture) => page1.setTexture(texture));

	// load second page after two seconds
	setTimeout(() => {
		canvas.assetManager.loadTexture(`assets/${page2.name}`, (_, texture) => page2.setTexture(texture));
	}, 2000);
}

I've used loadTexture in the loadAssets, but you can use it wherever you want.

If you want to use multiple .atlas files, the idea should be pretty similar. However, the AtlasAttachmentLoader is capable of using a single TextureAtlas. Consequently, you have to write your own.

joo

Oh, sorry, that was my fault. I could have been more precise.
The SpineCanvas class is just a simple utility to quickly use spine-webgl. It uses the default AssetManager of spine-webgl.
You can create your own custom SpineCanvas by copying its code, or you can also extract the logic you need from it without creating a dedicated class.