how to animate an Image with Animator?

Unity Engine
1

I tried following the example for creating an animated sprite by dragging the frames into the Animation window to create the .anim file but this results in a SpriteRenderer component being added to the object containing the Image component.

While the Sprite renderer component is correctly updating with the relevant images, the Image component is not getting set. The Spriterender doesn’t do anything on the component anyway so the result is a component that is not being used, being updated with images that is not being sent to the component actually doing the rendering…

In order for me to do 2D animation in uGUI I am forced to add this script to each Image:

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

public class AnimatedSpriteUGUI : MonoBehaviour {

	Image img;
	SpriteRenderer sprite;

	// Use this for initialization
	void Start () {
		img = GetComponent<Image>();
		sprite = GetComponent<SpriteRenderer>();
	}
	
	// Update is called once per frame
	void Update () {
		img.sprite = sprite.sprite;
	}
}

Surely there must be a better way? Any ideas on how to do this properly?

2

Never mind… I just noticed when I import the images I can specify wether it works on a SpriteRenderer or Image and that was my mistake! :smile: Sorry

1 Like
3

Can you elaborate where this setting is? I can’t find it despite searching for a long time…

4

Honestly, I have no clue. It popped up once and I never saw it again…

I’ve since made many animations and the process is very simple, although it has one catch… You need to do it in the scene, not in the projects folder on a prefab…

Simple drop the object you want to animate in the scene (in my case I created a new gameobject and added an Image component to it).
Next, add an animator component to it
Then, open up the Animation window and click on CreateClip.
Save the clip anywhere you want and start animating.
In my case again, this meand simply dragging the images in and adjusting their position in the timeline.

That simple. Later, if you want to add animations or modify this one, again, I can’t seem to find a way of doing it directly on the prefab in the Project tab so I just select the object in the scene and start adding/modifying animations.

That simple…

So just two things to keep in mind:
Add an Animator component
Select the object in Scene View
…and that is that. Have rhe Animation window open and edit away

1 Like
5

Thanks a lot, that worked. It’s definitely picky.

Here’s what I was doing that didn’t work:

  • Create an empty scene with just a canvas
  • Create the image game object I want to animate
  • Select the sprites I want in the animation, drag and drop them onto the image component
  • Unity creates an animation, animator, and sprite renderer
  • I deleted the sprite renderer and the animator refuses to target the image component I had, no animations.

I tried looking at the components with Debug view and there isn’t anything different between the broken animator and the working one.

6

For any one who finds this and cant find the menu MrDude is talking about. You dont need it. If you delete the sprite renderer from your object and edit its animation clips. you will have to delete the sprites and replace them, but they will automatically be compatible with the image component

1 Like
7

Is there a way of making the Image component resize with different sprite sizes automatically? I have set an anchor on the same spot but the sprites are always the same size as the base image component.