This piece of code is gold, I searched all google have no idea why could not find it. was scrubbing all korean sites already

Thanks Nate!

So Before your post I already figured out how to make animation play in success,

This works

  success: function () {
    	 alistar.addAnimation("blackscreen",false);
         alistar.addAnimation("combined",true ).mixDuration = 6;
         alistar.play();
      }

This does not work, it seems I am failing to make state to work,still no errors but ir is not responding

 success: function () {
    	 alistar.animationState.addAnimation(0,"blackscreen",false);
         alistar.animationState.addAnimation(0,"combined",true ).mixDuration = 6;
         alistar.play();
      }

So my current questions are:

• Why I cant use animationState
• Why when I hide the loading showLoading: false, I see instead black background
• How to make it load like a feather. I am looking forward to change my reel page as well so I need as fast as possible. Exported files are huge I know, but still not 150mb as was the video I previously used.

alistar.addAnimation calls this:
EsotericSoftware/spine-runtimesblob/4.1/spine-ts/spine-player/src/Player.ts#L700
That changes the viewport, sets animation to an Animation object, and then calls AnimationState addAnimationWith, which takes an Animation object.

That differs from AnimationState addAnimation which takes a string that is the name of the animation, not an Animation object. See the code for that, it just looks up the Animation object and calls addAnimationWith:
EsotericSoftware/spine-runtimesblob/4.1/spine-ts/spine-core/src/AnimationState.ts#L549

My guess is your animationState.addAnimation code works, but doesn't set the viewport, so you don't see what you expect. You might try:

 success: function () {
    	 alistar.setViewport("combined");
    	 alistar.animationState.addAnimation(0,"blackscreen",false);
         alistar.animationState.addAnimation(0,"combined",true ).mixDuration = 6;
         alistar.play();
      }

Re: showLoading: false what do you expect to see?

Never use JSON unless you need to look at or manipulate the data. Use binary. It's smaller and loads faster.

You can use gzip and/or brotli to compress your atlas and binary files. This requires your web server to do the right things though.

Your atlas is massive. Export with a lower scale unless it's really needed. You might try exporting smaller and see if it still looks good enough. The player doesn't have a way to set the scale of the SkeletonJson or SkeletonBinary loader. I'll add that in 4.2-beta.

You can make an atlas that multiple skeletons share, then use Downloader so the atlas is only parsed once. See my post above.

Nate Your code works Nate it was indeed viewport issue.

Re: showLoading: false what do you expect to see?
Background color I set in player

Thanks for explanation I really like one big atlas option.

I'm not sure on the background! I'll have to try it.

Where is the setViewport in the document? and the play method.
can't find on https://esotericsoftware.com/spine-api-reference

That API is the generic documentation applicable to all runtimes. This thread is about spine-player, so you'll want to read the Spine Web Player documentation about viewports:
https://esotericsoftware.com/spine-player#Viewports
It doesn't show setViewport, but you can see it in the Player class:
EsotericSoftware/spine-runtimesblob/4.2/spine-ts/spine-player/src/Player.ts#L722

I dont know why but I end up coming to this thread every year.

ChatGPT didn’t provide the help I needed. I’ve gone through multiple example codes to learn more, but I’m still stuck on this simple issue and can’t seem to get past it
Please clarify for me: The code below works fine, except it does not play the animation, no errors it looks like it plays the first frame but does not update/apply every frame so animation is still, if I add player.play(); animation plays but I want to have more control over the state, and not just play and pause the player. eventually I want to play multiple animations on different tracks once, not in a loop

<script>  
    new spine.SpinePlayer("player-container", {
	jsonUrl: "gifts.json",
	atlasUrl: "gifts.atlas",
	showControls: true,
	skin: "bluff",
	backgroundColor:  "000000",
	defaultMix: 0,
	premultipliedAlpha: true,
	success: function (player) {
		player.setViewport("base");
		player.animationState.setAnimation(0, "base", false);		
        }	
   }); 
  </script>

if you visit here you will see the player is playing but animation is not.

See the player code here, where it calls success and after:
EsotericSoftware/spine-runtimesblob/4.2/spine-ts/spine-player/src/Player.ts#L550-L567

if (!entry) { will be false, because you set an entry. Next we go to } else if (!this.currentViewport) { which is false because you set a viewport. The result is this code doesn't call play(), which is what makes the player advance the skeleton's animation state.

It makes sense the player automatically plays if the animation config property is set. Otherwise I'm not sure it makes sense to only play if a viewport hasn't been set. I'll bring it up with our dev team. Also, when this code doesn't call play(), the play/pause button shows pause, which is strange.

In the meantime, try calling player.play();.

My eyes are in tears—thank you so much! It works like a charm.

I have one more question: When I don't set an animation immediately on success and just add a keydown listener, the keys won't respond unless I click on the player, which then plays the animation. Is there a way to prevent the animation from playing or pausing when clicked? Also, why don’t the key presses work unless I first click on the player?

You are probably adding the event listener to the html element containing the player

Not really, I add it to document, even tried on window, still it only catches after player is clicked

here is the code

 <script>
            var player = new spine.SpinePlayer("player-container", {
                jsonUrl: "gifts.json",
                atlasUrl: "gifts.atlas",
                showControls: true,
                skin: "bluff",
                backgroundColor: "000000",
                defaultMix: 0,
                premultipliedAlpha: true,
                success: function (player) {
                    player.setViewport("base");
					
                },
            });

            document.addEventListener("keydown", function (event) {
                if (!player) return; // Ensure player is loaded

                let currentAnimation = player.animationState.getCurrent(0)?.animation?.name;
                if (currentAnimation !== "base") {
                    player.animationState.setAnimation(0, "base", false);
                } else {
                    let randomIndex = Math.floor(Math.random() * 6) + 1;
                    player.animationState.setAnimation(randomIndex, "meta_" + randomIndex, false);
                }
            });
        </script>

warmanw

If you don't set any animation at the beginning, the player won't play anything.
Set a default animation, or invoke player.play() in the success callback.

Thanks for your help Davide you already saved my day, however I want the player to start without playing anything and only when I press a key it should play an animation once. but pressing key wont respond unless I click on player which starts animation which I dotn want.

if (!player) return; This isn't doing anything. You set the player before even adding the listener, so it's always set.

As Davide said, you aren't setting an animation in success, so the player isn't playing. Call play(). Also don't indent your code inside a script like a psychopath.

<script>
var player = new spine.SpinePlayer("player-container", {
	jsonUrl: "gifts.json",
	atlasUrl: "gifts.atlas",
	showControls: true,
	skin: "bluff",
	backgroundColor: "000000",
	defaultMix: 0,
	premultipliedAlpha: true,
	success: function (player) {
		player.setViewport("base");
		player.play();
	},
});

document.addEventListener("keydown", function (event) {
	let currentAnimation = player.animationState.getCurrent(0)?.animation?.name;
	if (currentAnimation !== "base") {
		 player.animationState.setAnimation(0, "base", false);
	} else {
		 let randomIndex = Math.floor(Math.random() * 6) + 1;
		 player.animationState.setAnimation(randomIndex, "meta_" + randomIndex, false);
	}
});
</script>

If I call play on success, the player continuously loops an animation. What I want is for the player to remain in a ready state without playing any animation, so when I press a key, it plays the corresponding animation

Also why does it play animation in a loop none of my setAnimation() call animation in loop

Hmm, that's because setViewport sets the animation:
EsotericSoftware/spine-runtimesblob/4.2/spine-ts/spine-player/src/Player.ts#L731

@Davide, why does it do that?

Nate

The problem is that if player.play() is called when you don't pass an animation in the config, the player will select the first animation stored in the skeleton data and play it. We should probably change that.

I think we can trick the current behavior though. Do not call player.play() on the success callback, try to call it inside the keydown callback like this:

document.addEventListener("keydown", function (event) {
	if (player.paused) {
		player.play();
		player.skeleton.setToSetupPose();
	}
	let currentAnimation = player.animationState.getCurrent(0)?.animation?.name;
	if (currentAnimation !== "base") {
		 player.animationState.setAnimation(0, "base", false);
	} else {
		 let randomIndex = Math.floor(Math.random() * 6) + 1;
		 player.animationState.setAnimation(randomIndex, "meta_" + randomIndex, false);
	}
});

Still I wonder why setViewport sets the animation.

It is a bit odd to want to "play" when there is no animation. To play means the animation is applied and updateWorldTransform is done. When there is no animation, it's not necessary. Maybe we should just check if there are any animations and if there are, we apply and updateWorldTransform. Then the concept of play/pause would exist only for the player to stop animations. It would be "playing" by default.

Davide That works, @Davide! Just a small thing—right now, the keydown event plays an animation on its track as expected, but play() plays the first animation in a loop.