- Home /
Animate Image UI with Sprite Sheet
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 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.
Don't forget that you can drag and drop multiple sprites in the animation window at a time.
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?
@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.
Top! This worked perfectly! Drag and drop the sprite slices from the sprite sheet did the magic!
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;
}
}
}
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"
Your answer
Follow this Question
Related Questions
Can you animate the material of a Canvas Image? 0 Answers
Image on game object is not being rendered 1 Answer
RenderTexture does not render canvas image. 0 Answers
UI Escape menu script not working. 2 Answers