Trying to animate UI Image

Unity Engine
1

I’m trying to animate a UI Image using an animator. I found a technique to do this here: Boia Games: Reusing your Unity 2D in-game animations for UI/Canvas.

The Hierarchy and Inspector for the Image I’m trying to animate is here:

5180285--514319--upload_2019-11-15_15-54-29.png
5180285--514319--upload_2019-11-15_15-54-29.png1430×628 86.1 KB

The code for the ImageCanvasAnimator script (which is pretty much the same as from the link above) is here:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class ImageCanvasAnimator : MonoBehaviour {

    // set the controller you want to use in the inspector
    public RuntimeAnimatorController controller;

    // the UI/Image component
    Image imageCanvas;
    // the fake SpriteRenderer
    SpriteRenderer fakeRenderer;
    // the Animator
    Animator animator;
    [SerializeField] Sprite sprite;


    void Start() {
        imageCanvas = gameObject.GetComponent<Image>();
        fakeRenderer = gameObject.AddComponent<SpriteRenderer>();
        // avoid the SpriteRenderer to be rendered
        fakeRenderer.enabled = false;
        animator = gameObject.AddComponent<Animator>();

        // set the controller
        animator.runtimeAnimatorController = controller;
    }

    void Update() {
        // if a controller is running, set the sprite
        if (animator.runtimeAnimatorController) {
            sprite = fakeRenderer.sprite; // this assignment works
            imageCanvas.sprite = fakeRenderer.sprite; // this assignment DOES NOTHING
        }
    }

}

It seems to me that maybe the problem is that if you have a UnityEngine.UI Image and you try to change it’s sprite to the .sprite of a Sprite, like so:

UnityEngine.UI image;
Sprite sprite;

...

image.sprite = sprite.sprite

it will not work. I can’t seem to make it work, so I don’t know.

Does anyone have any ideas on why this does not work?

Clearly, the variable named “sprite” in the script above is getting assigned based on the values in the Inspector (see screenshot):

5180285--514328--upload_2019-11-15_15-59-55.png
5180285--514328--upload_2019-11-15_15-59-55.png901×586 43.9 KB

They match. But the Image Component’s Source Image is still empty. So I don’t know what I’m doing wrong.

2

Maybe is this helpful: Sprite animation for UI.Image on Unity.

2 Likes
3

This worked for me but my animation has 81 pictures. Is there a better/faster way of adding each image or do I have to manually drag them one by one?

4

yes in two simple steps :

  1. on the top right of the inspector there is a lock icon -
    click that to prevent the inspector from changing when clicking another asset

6380793--710922--Asset 24@4x.png

  1. select all the sprites you want to add and drag them to the Image animation component on top of the Sprites list:

6380793--710925--Asset 25@4x.png

5 Likes
5

Honestly, that script should be frame rate independent or the animation will play at different speeds on different devices. Something like:

public class ImageFlipAnimation : MonoBehaviour
    {
        [SerializeField] Sprite[] sprites;
        [SerializeField] Image image;

        [SerializeField] float fps = 10;

        public void Play()
        {
            Stop();
            StartCoroutine(AnimSequence());
        }

        public void Stop()
        {
            StopAllCoroutines();
            ShowFrame(0);
        }

        IEnumerator AnimSequence()
        {
            var delay = new WaitForSeconds(1 / fps);
            int index = 0;
            while(true)
            {
                if (index >= sprites.Length) index = 0;
                ShowFrame(index);
                index++;
                yield return delay;
            }
        }

        void ShowFrame(int index)
        {
            image.sprite = sprites[index];
        }
    }

That will work as long as your animation frame rate is lower than your actual frame rate. It’s not totally fps independent but close enough for most use cases.

1 Like