Search Unity

  1. Unity 6 Preview is now available. To find out what's new, have a look at our Unity 6 Preview blog post.
    Dismiss Notice
  2. Unity is excited to announce that we will be collaborating with TheXPlace for a summer game jam from June 13 - June 19. Learn more.
    Dismiss Notice

how to animate an Image with Animator?

Discussion in 'Immediate Mode GUI (IMGUI)' started by MrDude, Nov 19, 2014.

  1. MrDude


    Sep 21, 2006
    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:
    Code (csharp):
    1. using UnityEngine;
    2. using UnityEngine.UI;
    3. using System.Collections;
    5. public class AnimatedSpriteUGUI : MonoBehaviour {
    7.     Image img;
    8.     SpriteRenderer sprite;
    10.     // Use this for initialization
    11.     void Start () {
    12.         img = GetComponent<Image>();
    13.         sprite = GetComponent<SpriteRenderer>();
    14.     }
    16.     // Update is called once per frame
    17.     void Update () {
    18.         img.sprite = sprite.sprite;
    19.     }
    20. }
    Surely there must be a better way? Any ideas on how to do this properly?
  2. MrDude


    Sep 21, 2006
    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! :D Sorry
    NickHaldon likes this.
  3. RaspberryPuppies


    Jul 20, 2012
    Can you elaborate where this setting is? I can't find it despite searching for a long time...
  4. MrDude


    Sep 21, 2006
    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
    HamSteam likes this.
  5. RaspberryPuppies


    Jul 20, 2012
    Thanks a lot, that worked. It's definitely picky.

    Here's what I was doing that didn't work:
    1. Create an empty scene with just a canvas
    2. Create the image game object I want to animate
    3. Select the sprites I want in the animation, drag and drop them onto the image component
    4. Unity creates an animation, animator, and sprite renderer
    5. 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. Ninsense


    Mar 29, 2020
    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
    Last edited: Mar 29, 2020
    themusicalnerd likes this.
  7. bogdanmichon14


    Apr 9, 2018
    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.