Hi there,
I made an easy-to-use tool to make sprite animations simpler, as I saw there is nothing built-in.
Have a try here : https://felixmariotto.github.io/from_indexed_texture
Here is the library’s page : https://github.com/felixmariotto/three-SpriteMixer
Briefly : After loading a texture, we give it to an instance of ActionSprite (which is an extended THREE.Sprite), then we instantiate Actions from this ActionSprite, with information about how it must play.
Main features :
action.playOnce();
action.playLoop();
action.stop();
action.pause();
action.pauseNextEnd();
action.resume();
action.clampWhenFinished;
action.hideWhenFinished;
After several requests from @Aerion, I added these features :
spriteMixer.addEventListener('finished' /* or 'loop' */, function(event) {
console.log(event.action)
});
// Exactly like THREE.AnimationMixer, it now supports event listener functions
actionSprite.setFrame( index );
// Set one particular frame from the action
ActionSprite now can hold several actions per texture :
12 Likes
Hey, due to your game showcase I wanted to try this mixer. It’s awesome and very easy to use, however I wonder how would I go about mirroring the sprite? In the fox example, there is already whole row mirrored frame by frame, but I think a more popular approach is for artists to draw one side and then just flip the whole image.
Perfect solution I think would be to just flip the 3d object itself, on the app level, with no need for loading the mirrored sprites. I tried setting the scale.x to negative, but that didn’t work.
Flipping the image.png presents a different problem - whole row gets mirrored and since the mixer goes only left to right, animations are played backwards.
Sorry if Im missing something obvious here 
4 Likes
Hi @DolphinIQ, this is a good point, it could save a lot in texture size. I can’t really try anything before next week when I come back home though… But if you want to try yourself, maybe you could change the texture wrapping to THREE.MirroredRepeatWrapping in the ActionSprite function, so that we just have to offset more to get to the mirrored texture. Then I guess that we can add a conditional in updateAction, that add (1 - actionSprite.material.map.offset.x) * 2 to actionSprite.material.map.offset.x when the Action’s “isMirrored” (or whatever you like) is true.
1 Like
Very good solution, i try integrate this in game.
This will help a lot to create simple effects.
1 Like
This is AWESOME. I’m building an MMO and using particle effects which is pretty heavy at times. I’ll try switching to this system.
Lets say you have a play once button and you spam click it how would you make the sprite play through to the end instead of it starting again on the play once function?
awesome stuff as well really helped me alot this!
Hi @felixmariotto
First of all thanks for this great utility to use in threejs. I was trying it out with this fox character image but I am getting a black background instead of a transparent one. I took the image in PNG format from the repo you have shared above too. So no transparency.
Could you tell me why that may be the case?
