So I’m trying to make this sprite animation wait until after the 1st animation sequence is done before switching to the 2nd animation sequence then switching back to the 1st animation sequence after the 2nd animation sequence has finished playing.
Problem is it waits until the last frame on the 1st animation sequence and then hides the 1st animation sequence only one time when it should be waiting until after the last frame in the 1st animation sequence has played to switch to the 2nd animation sequence, then switch back repeatedly.
Basically, it should flip between animation sequences.
Here is the code from the index.html :
for (let i = 0; i < spriteMixer.actionSprites.length; i++)
{
this.__mustLoop = spriteMixer.actionSprites [ i ].mustLoop;
this.__currentDisplayTime = ( spriteMixer.actionSprites [ i ].currentDisplayTime );
this.__tileDispDuration = ( __tileDispDuration );
this.__endTime = ( this.__tileDispDuration );
this.__hasEnded =
(
spriteMixer.actionSprites [ i ].__animationHasEnded
(
spriteMixer.actionSprites [ i ]
)
);
console.log ( this.__currentDisplayTime );
if ( this.__hasEnded === true )
{
if ( this.__currentDisplayTime < this.__endTime )
{
showAnimation ( 0 );
}
}
}
I’m not sure to understand exactly what you want to achieve, but I updated SpriteMixer to help chaining animations. Now you can add an event listener, exactly like you would do with THREE.AnimationMixer.
It looks like this :
spriteMixer.addEventListener('finished' /* or 'loop' */, function(event) {
/* Here you can do want you want to the actionSprite in event.action */
});
Only thing I need to be able to do now is when a key is NOT being held down, the sprite changes to a single frame in an animation sequence depending on which way the player is facing so it looks like the player is idling.
This is out of the scope of three.js and this forum, but what you’re looking for is
document.addEventListener('keydown', ()=> {
/* start your action loop */
});
document.addEventListener('keyup', ()=> {
/* stop your action loop, show the idle sprite of your choice */
});
I didn’t do any function to point to a specific frame, the internal offsetTexture() is only able to offset to the next frame in the animation.
But I think that if you are making a character with several actions, it will be much easier for you to do one texture per action, that you load in one actionSprite per texture. Even the idle action, if you need only one frame you can load it into a common THREE.Sprite (though in my opinion, an idle character should always move slightly). You put all these actionSprites and simple Sprites into one THREE.Group, then when you want to move your character in the scene, you move the group.
When you must switch between actions, you just set their visible property like this :
Note that actionSprite has a hideWhenFinished parameter, set to false by default. If you set it to true, it will always hide when you call stop() on it, and show up again when you call playOnce() or playLoop().
@felixmariotto Would using individually loaded single sprites not take alot more memory rather than just showing a still frame in a chosen animation sequence instead?
so here’s my attempt at setting the sprite to the chosen frame as long as the frame is <= the total number of frames & is > than or = to 0. It’s not working when I press the space key. It actually stays at the 0-index frame on the 1st animation sequence. it should just switch to the chosen frame, in this case, frame 17 if the space key is pressed.
Inside SpriteMixer.js starting at 'line{s} 127 - 135' :
// set the sprite to the current frame
function setCurrentFrame ( actionSprite, __currentTile ) {
if ( actionSprite.currentTile <= actionSprite.numberOfTiles && actionSprite.currentTile >= 0 )
{
actionSprite.currentTile = __currentTile;
}
}
Here’s how it is called inside game-mainframe.js :
OK, I understand that one could want to use an ActionSprite as a table of indexed textures, as you apparently intend to.
So I updated SpriteMixer again, to add this method to ActionSprite :
@felixmariotto : How do I use Sprite mixer to set a chosen animation sequence? Meaning: How can I selectively choose one single animation sequence & hide the others unless chosen? So I can repeat a walking animation holding down a key over & over until the key is released? Or swing a sword until say the space key is released? View your browser’s debug console in order to see the debug output.
I understand that you want to put several action sequences into one single texture ? I can do something for this, next week when I will have more spare time.
In the meantime you can star the project and fill an issue in Github, as a reminder.
No need to modify your message every few hours to set the discussion first in the forum.
@felixmariotto Yes, absolutely! That would be GREAT! I REALLY appreciate what you have done / are doing for me! I encourage everyone to use this great library!
