Two state UI Image

Unity Engine
1

Hey, I wonder how can you achieve an UI Image component which has two states ( for example enabled and disabled ).

I tried to use Animation on Image.Sprite but it doesn’t seem to work. Any ideas?

2

Use the transition : SpriteSwap

3

Where can I find this SpriteSwap transition?

4

SpriteSwap is a transition option for buttons. If you’re not applying this to a button, it won’t help you.

If an animation cannot change the sprite on an image, you should file a bug report for that, and in the meantime, use a script to change the image. Something like this: (code untested)

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

public class SpriteSwap : MonoBehaviour {
public bool useEnabled = false;
public Sprite enabledImage;
public Sprite disabledImage;
private Image image;

void Awake() {
image = GetComponent<Image>();
}
void Update() {
image.sprite = (useEnabled ? enabledImage : disabledImage);
}
}

Then you can animate the useEnabled property instead of the sprite image directly.

5

For enabled/disabled states I like to use Toggle. Add two Images to the Toggle, and choose the “OffImage” as the first Graphic for the toggle and the “OnImage” as the second Graphic. Make sure that the “OnImage” is on top of the “OffImage”.

Turn Interactable off on the Toggle and the user won’t be able to click on it, but you can still modify the Toggle’s isOn to switch between the states.

1 Like
6

@StarManta , the code option is pretty good, though I wanted to use/learn as most Editor as it is possible.
@Melang , this may seem nice, but it isn’t flexible for more states than two.

Thanks anyway :slight_smile: