• Runtimes
  • Web Preview

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
{Screenshot of 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:136

Go 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:63

Those will have links you can click and it'll show you exactly the line with the problem: Line 107 is });, needs to be }});.

  • LeinadNoscaj ответили на это сообщение.

    Nate TYSM!

    • LeinadNoscaj ответили на это сообщение.
    • Nate оценил это.

      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);
         }
      • LeinadNoscaj ответили на это сообщение.

        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

        • LeinadNoscaj ответили на это сообщение.
          • Изменено

          Nate
          I'm trying to make an animation loop for 3 seconds before switching
          I gotta stop using Gemini

          weird

          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

          setAnimation takes 3 parameters, not 4:

          player.animationState.setAnimation(0, "run", true, 5);

          addAnimation takes 4 parameters, not 3:

          player.animationState.addAnimation(0, "jump", false); // Missing the delay param.

          Make sure you understand the parameters (read the docs).

          The true being passed makes that animation loop if playback exceeds the animation duration. If false is passed it will give you the last frame forever.

          It's easy to play a single animation looping forever. To play multiple animations repeatedly, you'll need a listener to know when they are done, then you set the animations again:

          success: function (player) {
          	var loop = function () {
          		player.animationState.addAnimation(0, "jump", true, 0);
          		var entry = player.animationState.addAnimation(0, "run", true, 3);
          		entry.listener = {
          			complete: function (event) {
          				loop();
          			}
          		};		 
          	};
          	loop();
          },

          There are other events available beside complete, see the API reference docs.

          You can also mix between animations, so the change is not so abrupt:

          player.animationState.data.defaultMix = 0.2;
          player.animationState.addAnimation(0, "jump", true, 0);

          Or on a specific transition:

          var entry = player.animationState.addAnimation(0, "jump", true, 0);
          entry.mixDuration = 0.2;

          As an example of some advanced usage, here are some pages using spine-player and the code for them:
          https://esotericsoftware.com/blog/Spine-4.0-is-here
          http://esotericsoftware.com/files/blog/4.0-released/blog.js

          And:
          https://esotericsoftware.com/blog/Spine-4.2-The-physics-revolution
          https://esotericsoftware.com/files/blog/4.2-released/blog.js

          Thx, that helped a lot.
          I forgot about one final aspect, certain skins have a special animation on another track that plays, it is
          skins-filename-common. The filename changes based on whatever filename I put in. So my questions around this are, how do I create an if animation exists statement, and how do I define a constant inside an animation name in setAnimation?

          You're welcome!

          "skin" means something else in Spine. I assume you mean different skeletons may not have some animations. To set an animation only if it exists:

          var animation = player.skeleton.data.findAnimation("run");
          if (animation) player.animationState.addAnimation(0, animation, true, 0);

          What do you mean by "define a constant inside an animation name"?

          • LeinadNoscaj ответили на это сообщение.

            Nate Thx that answered the first part of my question.
            As for the second part, the constant filename is defined when someone types in something and hits Load Animation.

            I want to know how to use that constant in the findAnimation and addAnimation

            I'm not sure what you are asking. Basic programming maybe?

            var name = "something";
            var animation = player.skeleton.data.findAnimation(name + "-run");

            If that's missing the mark, you'll need to better explain what you are trying to accomplish. Sometimes it's faster if you know exactly what to ask, sometimes you need to lay out the whole situation so we can give the appropriate advice.

              Nate
              so just by putting it outside of the quotations it interprets it as a variable/constant?
              And yeah, it probably is basic programming, but I don't rlly know JS

              Nate that's exactly what I was looking for
              Thank you so much for your help!

              • LeinadNoscaj ответили на это сообщение.
              • Nate оценил это.

                LeinadNoscaj
                this is the final question
                How do I get something to play only one time, but all the way through
                When I set the delay to 0, it pretty much skips over the animation

                If you play A and then queue (using addAnimation, not setAnimation) B using delay 0, the actual delay used will be such that B starts when A ends.

                For some reason when I did it it cut most of the animation off
                I mean it is like 0.3 seconds but still

                If there is a mix duration from A to B, delay 0 will start B at the A duration minus the mix duration, so when B mixing is done, A has just ended. Eg A is 0.3 duration and mix is 0.2. Queuing B with delay zero would use a delay of (0.3 - 0.2) = 0.1.

                Read the API reference and try watching this video, even though it's for Unity it explains AnimationState concepts:

                so how would I use TrackEntry to set mixduration to 0
                I tried the thing in the video but either I wasn't writing it right, or I put it in the wrong place.
                So where do I put it, and how am I supposed to write it for the web-player

                TrackEntry entry = player.animationState.addAnimation(2, "jumpStart", false, 3)
                entry.MixDuration = 1

                I got an error unexpected identifier "entry"

                It's JavaScript, so:

                var entry = player.animationState.addAnimation(2, "jumpStart", false, 3);
                entry.mixDuration = 1;
                • Изменено

                woops i did smth wrong, ignore this