<base64 encoded raptor-pro.json>
Web Preview
How do I layer 2 animations on top of each other?
For what I'm trying to create a preview of, there's one animation that controls the skeleton, another that controls the special effects. How do I combine the 2?
See advanced playback:
https://en.esotericsoftware.com/spine-player#Advanced-playback
And AnimationState:
https://esotericsoftware.com/spine-applying-animations#AnimationState-API
I'm having trouble with the success callback. The code is working fine besides the animation part, I can't get it to work.
new spine.SpinePlayer("player-container", {
skeleton: `${filename}.json`,
atlas: `${filename}.atlas`,
rawDataURIs: {
[`${filename}.json`]: jsonDataUri,
[`${filename}.atlas`]: atlasDataUri,
[pngFilenameFromAtlas]: pngDataUri
},
alpha: true, // Enable player translucency
backgroundColor: "#00000000", // Background is fully transparent
premultipliedAlpha: false,
skin: filename,
success: function (player) {
player.setAnimation("run", true);
},
error: function (player, reason) {
alert(reason);
}
});I keep getting this error, and I'm not sure where its coming from
Uncaught SyntaxError: Missing catch or finally after try
The error is odd, as if you had try { ... } with no finally. Does it tell you where the error occurs? If you can post a link to these files on your webserver, that would help.
The JavaScript looks fine. Do you have a run animation in your skeleton?
I'm running this on codepen.io since it has automatic updates and I don't have to wait for it to update. So I'm not 100% where the error occurs since it gives me a link that returns 404 as the location. According to Gemini, it's line 135, but that doesn't make sense since my lowest line is line 116.
And there is a run animation
In case it matters, when the script is started, the skeleton and atlas are not initially defined, they only are BASE64 encoded and uploaded after the filename constant is defined.
Can you link to your codepen?
huh it embeded
If you wish to test viable filenames, a couple are
snowman
atom
eclipse
Link: https://codepen.io/Leinad-Noscaj/pen/RNNbZqQ
You should see error:
SyntaxError: missing } after property list
at https://cdpn.io/cpe/boomboom/index.html?editors=1111&key=index.html-92ce83c4-3f00-ca09-07a4-bcb8925ee348:136Go to the URL in the error so you can see just the resulting page without the codepen junk wrapping it. Look in the browser console (F12) and you'll see (in Firefox):
Uncaught SyntaxError: missing } after property list index.html:136:13
note: { opened at line 119, column 63 index.html:119:63Those will have links you can click and it'll show you exactly the line with the problem: Line 107 is });, needs to be }});.
Nate TYSM!
LeinadNoscaj
I'm trying to use TrackEntry to make an animation loop for 3 seconds, then switch to another one. How do I do that? The TrackEntry API ref isn't making much sense to me.
And since I already can tell I won't know what to do, how do I different tracks trigger at the same time?
success: function (player) {
player.animationState.setAnimation(0, "first animation name", true);
player.animationState.addAnimation(0, "second animation name", true, 3);
}What do you mean by "trigger"? That isn't a verb usually used for tracks.
If you want to play two animations at the same time:
success: function (player) {
player.animationState.setAnimation(0, "lower track animation name", true);
player.animationState.setAnimation(1, "higher track animation name", true);
}Nate If you want to play two animations at the same time:
success: function (player) {
player.animationState.setAnimation(0, "lower track animation name", true);
player.animationState.setAnimation(1, "higher track animation name", true);
}
Would the same principle apply to addAnimation?
And could you provide an example of using trackEnd?
Yep, add animation queues the animation for playback after the current or last queued animation.
What are you trying to accomplish with trackEnd? It's almost never what you want. Use an empty animation instead:
https://esotericsoftware.com/spine-applying-animations#Empty-animations
- Изменено
Nate
I'm trying to make an animation loop for 3 seconds before switching
I gotta stop using Gemini
weird
The 3 I gave above for addAnimation is your 3 second delay. See:
https://esotericsoftware.com/spine-api-reference#AnimationState-addAnimation2
If you set the delay parameter to 0 it'll use the duration of the first animation.
Nate
ohhhhhhhhhhh. Thx.
Final question I think
How do I make a set of animations loop forever?
So after using setAnimation then addAnimation 5 times, it'll just loop those 6
wait nvm it does it automatically
Good grief yall really did make things ez
wait nvm, i was seeing things
but this is wierd
with this:
success: function (player) {
player.animationState.setAnimation(0, "run", true, 5);
player.animationState.addAnimation(0, "jump", false);
player.animationState.addAnimation(0, "run", true,5);
player.animationState.addAnimation(0, "idle", true, 3);
},I get this
It just stays frozen like that in idle forever