SpriteAnimator

[jakewhiteley]

Describe the feature you'd like:

I would really really like SpriteAnimator to be brought into this repo 🙏

There are no off-the-shelf solutions for vanilla three to implement 2d spritesheet animation (I found one but it hasn't been touched in 4 years).

[vis-prime]

Do you know where i can find more sprite + json files to test ?

was planning to make a class but maintenance might become difficult, so resorting to returning an object containing the important functions/assets

so here's the current state of the api + Demo here

 const FlameSpriteAnimator = SpriteAnimator({
    startFrame: 0,
    fps: 40,
    autoPlay: true,
    loop: true,
    textureImageURL: './sprites/flame.png',
    textureDataURL: './sprites/flame.json',
    alphaTest: 0.01,
  })
  await FlameSpriteAnimator.init()
  FlameSpriteAnimator.group.position.set(0, 2, 1.2)
  FlameSpriteAnimator.group.scale.set(4, 4, 4)
  scene.add(FlameSpriteAnimator.group)

// needs to be called in render loop
FlameSpriteAnimator.useFrame()

[jakewhiteley]

https://arks.itch.io/dino-characters https://opengameart.org/content/2d-game-knight-character-sprite http://www.as3gamegears.com/assets/assets-pack-12-medieval-fantasy-character-sprites/

There are quite a few sources for creative commons sprites online :)

I assume if a sprite needed more than one animation, then the idea would be to create multiple instances and swap them in when needed

[vis-prime]

I tried plugging the png's directly , but it was not playing correctly , tried texturePacker free version, that also did not work correctly

but from the original example there was this boy_hash sprite with two animations

https://vis-prime.github.io/explore-vanilla-drei/?scene=SpriteAnimatorDemo

https://github.com/pmndrs/drei-vanilla/assets/119810373/73abada2-5e95-487d-98d7-42ca19ced2fe

if the animations are in different sprite images then yeah , you'd need to manually swap the THREE.Group

[jakewhiteley]

Hi @vis-prime ,

What is left to do on this?

[vis-prime]

there were some updates recently , will look at those too

[netgfx]

Hello! I'm the author of that component, let me know if you need any help. There is an update on the latest release that also handles JSONHash exports (previous versions handled standalone spritesheets (no json), and JSON Array ones). Most of these are exported via https://www.codeandweb.com/texturepacker (excellent tool) but other tools can export them as well. You can find some samples here:

--- JSON Array https://gwcjylrsyylsuacdrnov.supabase.co/storage/v1/object/public/models/flame.png https://gwcjylrsyylsuacdrnov.supabase.co/storage/v1/object/public/models/flame.json

--- JSON Hash https://gwcjylrsyylsuacdrnov.supabase.co/storage/v1/object/public/models/flameup.png https://gwcjylrsyylsuacdrnov.supabase.co/storage/v1/object/public/models/flameup.json

--- Standalone PNG https://gwcjylrsyylsuacdrnov.supabase.co/storage/v1/object/public/models/alien.png