Closed jakewhiteley closed 12 months ago
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()
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
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
Hi @vis-prime ,
What is left to do on this?
there were some updates recently , will look at those too
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
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).