Animate Image UI with Sprite Sheet

Question

I've been digging around for a while but don't seem to be able to find a solution. Does Unity support this option? Seems like something that should be possible.

The method for making a basic 2D animating sprite does not show up in the UI when I attach it to a panel. I have also created an Image object and added an animator to it with no effect.

What am I missing?

Answer 1

Best Answer

Answer by DiegoSLTS · Mar 24, 2015 at 08:42 PM

You can animate the Image.sprite property of your UI Image with an animation.

Select your Image in the hierarchy
Open the Animation window
Press the "Add property" button
Save the animation clip with anything you want
Add the Image.sprite property
Add keyframes with the different sprites you want

This will automatically add an Animator component with everything configured to play that animation in an infinite loop.

Add comment · Show 6 · Share

zafadadynamic · Jul 06, 2015 at 10:01 AM 5

Share

Don't forget that you can drag and drop multiple sprites in the animation window at a time.

CNachtrieb · Jul 08, 2015 at 05:31 PM 1

Share

But how would you do this through script, allowing a designer to just plug in an sliced sprite sheet with different numbers of columns and rows? Wouldn't using the animator component lock you into using only the selected sprites?

DiegoSLTS · Jul 08, 2015 at 06:31 PM 0

Share

@CNachtrieb, that's really different, you should ask a new question, but you can load a texture from resources, get the size of ths sprites, create new sprites from each section and then switch them with code at the speed you want. $$anonymous$$aybe you can also create an animation clip at runtime, but I'm not sure about that.

earthcrosser · Jul 15, 2015 at 02:11 PM 0

Share

This answer helped me thanks!

drewjosh · Nov 24, 2020 at 10:11 PM 0

Share

Top! This worked perfectly! Drag and drop the sprite slices from the sprite sheet did the magic!

Show more comments

Answer 2

Answer by AQaddora2020 · Oct 06, 2020 at 10:13 AM

Hey there! I know this is old, but here is a script I have worked on that achieves what you want.

 using UnityEngine;
 using UnityEngine.UI;
 
 [RequireComponent(typeof(Image))]
 public class UISpritesAnimation : MonoBehaviour
 {
     public float duration;
 
     [SerializeField] private Sprite[] sprites;
     
     private Image image;
     private int index = 0;
     private float timer = 0;
 
     void Start()
     {
         image = GetComponent<Image>();
     }
     private void Update()
     {
         if((timer+=Time.deltaTime) >= (duration / sprites.Length))
         {
             timer = 0;
             image.sprite = sprites[index];
             index = (index + 1) % sprites.Length;
         }
     }
 }

Add comment · Share

Answer 3

Answer by Hendryx · May 04, 2020 at 09:08 AM

For anyone else struggling, I had to make sure that I had a gameobject in my scene with an image component and to add a frame of my anim to it - to make it work:

The object you add to the scene doesnt need to be visible, you can just use the animator component of an object in your scene to switch between states but for some reason, the objects need to exist in the scene.

Drag the multiple sliced frames into the scene view and make a new animation, name it something that makes sense
Make sure the new gameobject has an image component
Drag the first frame of your animation into the image component "source image" box
Have one of the states in your animator use your newly created animation as its "motion"

Add comment · Share

Animate Image UI with Sprite Sheet

3 Replies

Your answer

Follow this Question

Related Questions