Repeat animations in a queue

screamson25

Hello. I'm making a fan site for the game Azur Lane. And there is a problem: I don't know how to play several animations in an infinite loop.
I display the player on the site like this:

function chibiPlayer(){
	new spine.SpinePlayer('chibiAnim', {
		skelUrl: urlToSkel,
		atlasUrl: urlToAtlas,
		animations: [ 'normal', 'motou' ], 
		alpha: true, 
		backgroundColor: '#00000000',
		showControls: false,
		success: (player) => {
			let chibiImg = document.getElementById( 'chibiImg' );
			let chibiAnim = document.getElementById( 'chibiAnim' );
			chibiImg.remove();
			chibiAnim.classList.remove('shipPreviewHide');
		},		
		viewport: {
					padLeft: '0%',
					padRight: '0%',
					padTop: '0%',
					padBottom: '0%'
		}
	});
}
chibiPlayer();

Could you please tell me how I can loop the animations 'normal' and 'motou'?
Player version 3.8.
Example files below:

yuekechengii.atlas

6kB

yuekechengii.skel

166kB

Mario

Here's one way to do it (using Spineboy here)

	new spine.SpinePlayer("container", {
		skelUrl: "assets/spineboy-pro.skel",
		atlasUrl: "assets/spineboy-pma.atlas",
		premultipliedAlpha: true,
		backgroundColor: "#cccccc",
		viewport: {
			debugRender: true,
		},
		showControls: true,
		success: (player) => {
			player.setViewport("walk");
			const loop = () => {
				player.animationState.setAnimation(0, "walk");
				player.animationState.addAnimation(0, "run", false).listener = {
					complete: loop
				}
			};
			loop();
			player.paused = false;
		}
	});

screamson25

Mario The script displays an error
Uncaught TypeError: player.setViewport is not a function
And without this function, after the first animation is finished, it just stops:

screamson25

Mario Here's one way to do it (using Spineboy here)

Are there any other ways? 🙂

Nate

Maybe you are using an older runtime. Anyway, the point is to use the complete listener to queue the animations again.

screamson25

Nate Player version 3.8, because the developer files are from spine version 3.8.99. I tried the latest versions of the player, but the animations wouldn't run.
Thanks for the thought, I'll try to dig towards complete listener.

Nate

You'd need to export the projects from 4.1 in order to use the 4.1 runtimes. There have been a lot of improvements since 3.8 to the Spine Web Player, but it should be possible to use the complete event in 3.8.

Nate

The queue of animations is finite, so you must queue more at some point. You could do it by polling, inspect the AnimationState and queue more animations when it's near the end. Using the complete listener as described is easiest though.