Swapping Spine at runtime

ayush705

I am creating a multilevel game in which each level has its own spine assets like level 1- skel, atlas, png and same for other different levels. I am rendering the spine in one di component and as soon as the level changes i want to show the skeleton of that specific level. I am creating a new spinePlayer instance as soon as the level completes using new SpinePlayer({config}) but it shows a blank time for few ms and loads the skeleton in that div. Is there any way that blank time could be removed or any other way to swap skeletons in the same div ?

Spinebot

To eliminate the blank time when swapping skeletons, you should pre-load the next level's assets before switching, rather than creating a new SpinePlayer instance on demand. Here are a few approaches:

Best Approach: Pre-load and Swap Skeleton Data

Instead of creating a new SpinePlayer instance each time, create it once and then swap out the skeleton data:

// Initialize player once
const player = new spine.SpinePlayer("player-container", {
    skeleton: "/assets/level1/skeleton.json",
    atlas: "/assets/level1/skeleton.atlas",
    // ... other config
});

// Pre-load next level's assets
const assetManager = new spine.AssetManager("/assets/level2/");
assetManager.loadText("skeleton.json");
assetManager.loadTextureAtlas("skeleton.atlas");

assetManager.loadAll(() => {
    // When ready to switch levels
    const atlas = assetManager.require("skeleton.atlas");
    const atlasLoader = new spine.AtlasAttachmentLoader(atlas);
    const skeletonJson = new spine.SkeletonJson(atlasLoader);
    const skeletonData = skeletonJson.readSkeletonData(assetManager.require("skeleton.json"));
    
    // Swap the skeleton
    player.skeleton = new spine.Skeleton(skeletonData);
    player.state = new spine.AnimationState(new spine.AnimationStateData(skeletonData));
    player.skeleton.setToSetupPose();
});

Alternative: Hidden Pre-loading

Create the next level's SpinePlayer in a hidden div while the current level is playing:

// Current level playing
const currentPlayer = new spine.SpinePlayer("player-container", {
    skeleton: "/assets/level1/skeleton.json",
    atlas: "/assets/level1/skeleton.atlas",
});

// Pre-load next level in hidden container
const hiddenContainer = document.createElement('div');
hiddenContainer.style.display = 'none';
document.body.appendChild(hiddenContainer);

const nextPlayer = new spine.SpinePlayer(hiddenContainer, {
    skeleton: "/assets/level2/skeleton.json",
    atlas: "/assets/level2/skeleton.atlas",
});

// When switching levels
currentPlayer.dispose();
document.getElementById("player-container").appendChild(nextPlayer.canvas);
hiddenContainer.remove();

Pre-load During Current Level

Start loading the next level's assets while the player is still playing the current level. Use the player's success callback to know when assets are ready:

let nextLevelReady = false;

// Start pre-loading next level
const preloadPlayer = new spine.SpinePlayer(hiddenDiv, {
    skeleton: "/assets/level2/skeleton.json",
    atlas: "/assets/level2/skeleton.atlas",
    success: () => {
        nextLevelReady = true;
    }
});

// When level changes and assets are ready
if (nextLevelReady) {
    currentPlayer.dispose();
    // Instantly show pre-loaded player
}

The key is to load assets before you need them so the swap is instantaneous. This eliminates the blank loading time by ensuring the next skeleton is ready to display immediately.

ayush705

But if I preload the next level skeleton it will start playing its animations instantly how can i prevent that. ?

ayush705

In the first mentioned approach how can I load the PNG file. Currently it is giving me an error that Couldn't load image ?

ayush705

I tried the first method. I passed all the parameters but still it didn't change the skeleton.
Here's my code.
//
const player = new SpinePlayer({
skel: level1skel,
atlas: level1atlas,
rawDataURi: level1 raw Data URI
}
//
then when needed to change level I did
const assetManager = new spine.AssetManager(
player,
);
assetManager.setRawDataURI(
[window.BASE_PATH + 'Loading screen.png'],
spineLoadingImage,
);
assetManager.loadBinary(spineLoadingSkel);
assetManager.loadTextureAtlas(spineLoadingAtlas);
assetManager.loadAll(() => {
// When ready to switch levels
const atlas = assetManager.require(spineLoadingAtlas);
const atlasLoader = new spine.AtlasAttachmentLoader(atlas);
const skeletonJson = new spine.SkeletonBinary(atlasLoader);
const skeletonData = skeletonJson.readSkeletonData(
assetManager.require(spineLoadingSkel),
);

        // Swap the skeleton
        player.skeleton = new spine.Skeleton(
          skeletonData,
        );
        player.state = new spine.AnimationState(
          new spine.AnimationStateData(skeletonData),
        );
       player.skeleton.setToSetupPose();
      });

Davide

ayush705

Assets need to be downlaoded and downloading requires time.
You can preload or more easily add a "loading" scene between your level.

Switching skeleton is a little tricky, but you can do that with some modification to Spinebot code.


// define a function to preload the assets
async function preloadAssets(assetManager, atlasUrl, skeletonUrl) {
	await Promise.all([
		assetManager.loadJsonAsync(skeletonUrl),
		assetManager.loadTextureAtlasAsync(atlasUrl)
	]);
	const atlas = assetManager.require(atlasUrl);
	const atlasLoader = new spine.AtlasAttachmentLoader(atlas);
	const skeletonJson = new spine.SkeletonJson(atlasLoader);
	return skeletonJson.readSkeletonData(assetManager.require(skeletonUrl));
}

// define a function to swich the skeleton
async function switchSkeleton(player, skeletonData) {
	player.skeleton = new spine.Skeleton(skeletonData);
	player.animationState = new spine.AnimationState(new spine.AnimationStateData(skeletonData));
	const entry = player.animationState.setEmptyAnimation(0, 0);
	player.setViewport(entry.animation);
}

// instantiante the player
const player = new spine.SpinePlayer("container", {
	skeleton: "/assets/spineboy-pro.skel",
	atlas: "/assets/spineboy-pma.atlas",
	premultipliedAlpha: true,
	backgroundColor: "#cccccc",
	showControls: false,
	success: (player) => {
		player.setAnimation("run");
	}
});

(async () => {
	// 1. preload you next skeleton level
	const skeletonData = await preloadAssets(player.assetManager, "/assets/raptor-pma.atlas", "/assets/raptor-pro.json");

	// 2. when you want, switch the skeleton and play a new animation
	setTimeout(() => {
		switchSkeleton(player, skeletonData);
		player.setAnimation("walk");
	}, 1000)
})();

Alternatively, as Spinebot said, you can create a new player at the beginning and keep it hidden.

ayush705

Davide Thank you very much @David Kalina . It really helped me a lot.