Changing UI Button image in script.

Unity Engine
1

I have searched for 2 days for an answer to this and have come across many solutions but none appear to work. I am using Unity 2017.3.1f1 and all I want to do is change a sprite image in a UI button to a different image. I have created a Resources folder in my Assets. I have copied several jpg images into this folder. I have changed the Texture Type of these to Sprite (2D UI). If i drag one of these to the UI Button Source Image it happily changes to my sprite image. But within my script I get nothing. I have noticed that if there is a sprite already in the UI Button before the script gets run the Image disappears. I get no errors and all compiles well. I have this script attached to an empty gameobject and have setup an onclick event on the button to activate it. I know the click works from the Debug line.

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

public class ImageChanger : MonoBehaviour {

public Sprite spritebutton;
public List SpriteList;
// Use this for initialization
void Start () {

}

// Update is called once per frame
void Update () {

}
public void PutImage()
{
SpriteList.Add(Resources.Load(“Paul”));
SpriteList.Add(Resources.Load(“Jim”));
SpriteList.Add(Resources.Load(“Tom”));
SpriteList.Add(Resources.Load(“Ralph”));
Button mybutton = GameObject.Find (“MyButton”).GetComponent ();
mybutton.image.sprite = SpriteList [0];
Debug.Log(“I made it here”);

}
}

2

This works fine for me. Specifically, I have a property public Button Button; on my script, into which I’ve dragged a button in the inspector. Then, I called this in my Start method:

var sprite = Resources.Load<Sprite>("Dan 1");
Button.image.sprite = sprite;

When I run the scene, the image is displayed in the button.

Are you sure you’ve placed the image files directly in a folder named Resources? If you’ve put then in some subdirectory of Resources, you’ll need to include the path in your Load() call. For example, if the path is “Resources/MyImages/Paul”, then you’d need to call Resources.Load(“MyImages/Paul”);

Basically, put a breakpoint after the Load call and see if the object you got it null.

1 Like
3

I would make sure both the button and the sprites are not null.

I’d also point out that, unless you’re using this method only once (and even then my suggestion would probably still be a good idea), I would setup your sprite list in Start() probably… or at the very least, write a bool so it loads them only once. Anytime you click that button, you’ll be adding the sprites to the list, again.

4

I have the file directly under resources, when I remove the file from the resources folder I get an error so it is finding the files.

5

methos5k, this is just a quick test of concept code, I couldn’t do this in my actual game either so I decided to start with a clean project to see what was wrong. Still not working.

Are there any requirements for the image that I’m not aware if, I’ve tried jpg and png files from 200 x 200 up to 1000 x 1000.

6

If the sprite disappears, then it is probably null or something. Do this:

SpriteList.Add(Resources.Load<Sprite>("Paul"));
SpriteList.Add(Resources.Load<Sprite>("Jim"));
SpriteList.Add(Resources.Load<Sprite>("Tom"));
SpriteList.Add(Resources.Load<Sprite>("Ralph"));
Button mybutton = GameObject.Find ("MyButton").GetComponent<Button> ();
//add this line.
If( SpriteList[0] == null) Debug.Log("null sprite");

mybutton.image.sprite = SpriteList [0];
Debug.Log("I made it here");
7

You can do it by changing the sprite attribute of the image component at runtime.

button1.GetComponent<Image>().sprite = sprite;

Full demo code:

    using UnityEngine;
    using UnityEngine.UI;
  
    public class SpriteChangeDemo : MonoBehaviour
    {
        public Button button1;
        public Sprite sprite1, sprite2;
  
        void Start()
        {
            ChangeSprite(sprite1);
            ChangeSprite(sprite2);
        }
  
        public void ChangeSprite(Sprite sprite) {
            button1.GetComponent<Image>().sprite = sprite;
        }
    }