यह साइट एक आधुनिक ब्राउज़र में सबसे अच्छी तरह से देखी जा सकती है जिसमें जावास्क्रिप्ट सक्षम है।

Best way for random animations ?

djmisterjon

What could be, the best approach for a randomization animation system.
example i would like randomise eyes winks.

I think the listener would be the best approach, but I can not find anything that could affect the update or the time.

this.spine.state.addListener({
    // on Update Check if we can play a random winks
     update: function(entry) {
         var rand = ~~(Math.random()*100)+1
         if(rand>90){ // ex:%luck and time>500
             spine.state.setAnimation(1, 'wink1', false);
         }
     }
  });

i look in Applying Animations - Spine Runtimes Guide
but i did find a good example for randomize animation.

i know we can add Events in timeline for the listener, but it's not really for random.
Do you have some advice on the right approach and how to mix random animation ?

example:
i have 2 animation IDLE1, and WINK1
IDLE move the body. track:0
WINK move only eyes. track:1

i thinking about to maybe push all spines animations to an array and have a single update global timeline control them all.
But am looking for native function or method in the Runtime maybe i missed..
i need a way to call randomly WINK based on time delay of animation and a Math.random.
Thank in advance for suggest and help.

Nate

I can not find anything that could affect the update or the time.

I don't understand?

Every X seconds, set a random wink animation. Seems simple, am I missing something? You can make it more sophisticated by listening for the wink animation to finish (eg TrackEntry listener or AnimationState addListener), then waiting X seconds, but that probably isn't necessary.

Example:

float winkCounter = 0;
...
// Every frame:
winkCounter -= secondsSinceLastFrame;
if (winkCounter < 0) {
   winkCounter = random(3, 7); // 3-7 second random interval
   spine.state.addAnimation(1, 'wink1', false, 0);
}

You can also queue an animation to be played later using AnimationState addAnimation. Use AnimationState addEmptyAnimation if you have nothing happening until then on that track:

spine.state.addEmptyAnimation(1, 0, 0);
spine.state.addAnimation(1, 'wink1', false, 8); // 8 seconds later

Note you probably want the wink to go away as soon as it is finished, rather than the last frame to keep being applied. To do that see TrackEntry trackEnd:

TrackEntry entry = spine.state.addAnimation(1, 'wink1', false, 0);
entry.trackEnd = entry.animation.duration;

djmisterjon

I think I have found the function that seems to be closer to what I want to do.

_ani_Controler.prototype.play = function (motionName, reset) {
    var data = this.motions[motionName]; // get data for run this spine state
    var state = this.spine.state; // state scoped for listener
    state.setAnimation(data.track, data.state, true); // LOOP IDLE1 track:0
    state.tracks[0].listener = {
        complete: function(trackEntry) {
            // Each complete loop , check for play wink at random timeLine (timeLength of animation)
            var count = trackEntry.loopsCount();
            var rand = ~~(Math.random()*100)+1;
            if(rand>50 && !(count%2)){
                var ranWait = (Math.random()*trackEntry.nextAnimationLast); // wait time 0 to 1.295000000000015
                state.addAnimation(1, 'wink1', false, ranWait); // work, but only one time ???!!!***
            };
        }
    };
    return this;
};

So logicly, when i do state.setAnimation(..) on tracks[0].
i also add a listener to the tracks[0].

When it complete, random check if can play wink .
If yes, get the time length of next animation, and get random value from this time length.
And wink addAnimation(..) on tracks[1];

I don't know if I express myself well.
where I stuck a little bit is why wink play only one time!
I have the impression that it is necessary to make a reset on tracks[1], but i don't know how.

EDIT::
ho thank for the API link
it solved with state.clearTrack(1);

Now i just have to find how i can get the animation length time
and make a random time with it.
how i can calculate the time length of a animation and pass it to delay
state.addAnimation(1, 'wink1', false, delayAnimation);

EDIT2:
ok solved
trackEntry.animation.duration
thank a lot @Nate for help
:sun: :sun: :sun:

Nate

That is an odd way to do it. Why should the wink delay be based on when animation loops complete on track 0?

nextAnimationLast is not public API and should not be accessed. The duration of the animation for a track entry is trackEntry.animation.duration.

Note you listen to the track entry so you can do:

var entry = state.setAnimation(data.track, data.state, true); // LOOP IDLE1 track:0
entry.listener = {

Edit: Ah glad you figured it out. Note you don't need to call AnimationState clearTrack if you use TrackEntry trackEnd as described above.

djmisterjon

Nate लिखा
That is an odd way to do it. Why should the wink delay be based on when animation loops complete on track 0?

nextAnimationLast is not public API and should not be accessed. The duration of the animation for a track entry is trackEntry.animation.duration.

Note you listen to the track entry so you can do:
var entry = state.setAnimation(data.track, data.state, true); // LOOP IDLE1 track:0
entry.listener = {
Edit: Ah glad you figured it out. Note you don't need to call AnimationState clearTrack if you use TrackEntry trackEnd as described above.

ok thank a lot
what are you mean, if i use entry i not need to do a clear?
thank you for your advice, I start with your software, I learn a lot in 24H :whew:
So i use clearTrack track like thats. is wrong ?
maybe i will need also use getCurrent for avoid to break a running animation.

_ani_Controler.prototype.play = function (motionName, reset) {
    var data = this.motions[motionName]; // get data for run this spine state
    var state = this.spine.state; // state scoped for listener
    state.setAnimation(data.track, data.state, true); // LOOP IDLE1 track:0
    state.tracks[0].listener = {
        complete: function(trackEntry) {
            var count = trackEntry.loopsCount();
            var rand = ~~(Math.random()*100)+1;
            if(rand>50){
                var ranWait = (Math.random()*trackEntry.animation.duration);
                state.clearTrack(1); // if not use clear ↓↓↓ can call only one time?
                var entry = state.addAnimation(1, 'wink', false, ranWait);
                console.log('entry: ', entry);
            };
        }
    };
    return this;
};

*EDIT1:
@[हटाया गया] , ok i understand, it because the module AnimationStateListener is missing when return track entry.
am not sure why, maybe it a forget thing in pixi-spine.js.

var entry = state.setAnimation(data.track, data.state, true); // LOOP IDLE1 track:0
entry.listener; // undefined
console.log6('entry: ', entry);
console.log('entry.listener: ', entry.listener);