💃 SpriteMixer for easy sprite animations

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 :

7 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 :sweat_smile:

3 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.