warmanw

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. That event listener will listen events only when the element is focused.
You probably want to add the event listener to the document.

Is there a way to prevent the animation from playing or pausing when clicked?

Right now, the only way is setting showControls: false. That has the side effect to hide the player UI.

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.

Thanks! that worked, its not looping now.

Please also clarify this question: why at the first when animation is playing we see the content slides. the reason is viewport is not set? or mixing with setup pose?

warmanw

Yes, you should set your desired viewport on success.
You could also set viewport: { transitionTime: 0 } as player settings.