Sprite Animation
Bring your environments to life with animated sprites.
Sprites work the same way as gifs. Builders can upload a sprite image that will automatically animate if it meets a few requirements.
To animate in Buenoverse, a sprite needs:
A minimum of 2 image "states".
Images placed directly below each other.
Exact same image frame dimensions.
Images grouped and exported together as a single image.
Image title name ending in "sprite-[# of frames]"
Practical Example: Jack-o-lantern Sprite
Let's walk through a simple example and create a spooky, flickering jack-o-lantern using Figma.
For this example, we will have two image states - on and off. Since the sprite has 2 frames, we will title the image group "Pumpkin-sprite-2".
![](https://docs.bueno.art/~gitbook/image?url=https%3A%2F%2F107867006-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FdnMYfhsZ5GJTgbm1KIe7%252Fuploads%252FarMCe63mr2udiD7w4fbD%252Fsprite-figma2.png%3Falt%3Dmedia%26token%3D64ea634e-e754-4ff0-9334-5ea3d6094ad5&width=768&dpr=4&quality=100&sign=768d9191&sv=1)
Notice that each of our pumpkin images are placed in frames of the exact same size (258 x 550). Next, we'll group the two frames together, taking care that the frames are aligned, and then export as one image.
![](https://docs.bueno.art/~gitbook/image?url=https%3A%2F%2F107867006-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FdnMYfhsZ5GJTgbm1KIe7%252Fuploads%252FIOLh7WreaXt16EAOpxat%252Fsprite-figma1.png%3Falt%3Dmedia%26token%3D38c5de7c-cb2d-477b-b16d-0cdb8e6ca066&width=768&dpr=4&quality=100&sign=eeb05734&sv=1)
Finally, we will place the image into our room as an element. The Buenoverse will automatically pick up on this sprite, and add it as an animated asset!
In the sprite menu, builders can alter the frame rate of the sprite, and choose settings for auto-play and loop.
![](https://docs.bueno.art/~gitbook/image?url=https%3A%2F%2F107867006-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FdnMYfhsZ5GJTgbm1KIe7%252Fuploads%252FeJqEr2GotBvyGPznpGJs%252FCleanShot%25202023-08-17%2520at%252015.11.07.gif%3Falt%3Dmedia%26token%3D77d35a37-9c5e-4e85-bae8-502fb1917676&width=768&dpr=4&quality=100&sign=ae0dfd10&sv=1)
Last updated