# Sprite Animation

Sprites work the same way as gifs. Builders can upload a sprite image that will automatically animate if it meets a few requirements.

{% hint style="info" %}
**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]"
  {% endhint %}

#### Practical Example: Jack-o-lantern Sprite

Let's walk through a simple example and create a spooky, flickering jack-o-lantern using Figma. &#x20;

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*".

<figure><img src="https://107867006-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdnMYfhsZ5GJTgbm1KIe7%2Fuploads%2FarMCe63mr2udiD7w4fbD%2Fsprite-figma2.png?alt=media&#x26;token=64ea634e-e754-4ff0-9334-5ea3d6094ad5" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="https://107867006-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdnMYfhsZ5GJTgbm1KIe7%2Fuploads%2FIOLh7WreaXt16EAOpxat%2Fsprite-figma1.png?alt=media&#x26;token=38c5de7c-cb2d-477b-b16d-0cdb8e6ca066" alt=""><figcaption></figcaption></figure>

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.&#x20;

<figure><img src="https://107867006-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdnMYfhsZ5GJTgbm1KIe7%2Fuploads%2FeJqEr2GotBvyGPznpGJs%2FCleanShot%202023-08-17%20at%2015.11.07.gif?alt=media&#x26;token=77d35a37-9c5e-4e85-bae8-502fb1917676" alt=""><figcaption><p>Edit the frame rate of a sprite.</p></figcaption></figure>
