How to change UI image by c# script in unity with example

Changing a UI image with script in runtime is a quit simple thing. in many case you want to change UI image at runtime so Lets understand it by a simple example.

1. first we need a UI Image GameObject so create a UI Image Object by navigating GameObject > UI > Image or whatever steps you want to create, just create.

2. then create a c# script. and attach it any gameobject you want.

3.to replace a UI image you need refence UI image so declare a Image of name whatever you want and declare sprite for changed sprite reference. I have named Image as original_img and sprite to change as other_img.

4.Drag Image gameObject from hierarchy window to attacched script Image (named original_img) and also drag image sprite from assets folder to script sprite (named as other_img). 

Changing UI image with scripts in unity


4. lets create a change_image() function. you can use this function or inside code to change image where you want. As we have used in start method.

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

public class changeUIimage : MonoBehaviour // replace changeUIimage with your script name
{

    [SerializeFieldprivate Image original_img;
    [SerializeFieldprivate Sprite other_img;
    // Start is called before the first frame update
    void Start()
    {
        change_image();
    }

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

    public void change_image()
    {
        original_img.sprite=other_img;
    }
}


We have used [SerializeField] so that values of that variable can be visible in inspector window for editing without declare public.

Always take care that that you have included "UnityEngine.UI" otherwise you will gets error because  images are past of UI.

for arrays

You can do same thing for changing image of multiple gameObject or to multiple sprites to change by using array.  in case of array you can use as follows code

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

public class changeUIimage : MonoBehaviour // replace changeUIimage with your script name
{

    [SerializeFieldprivate Image[] original_img;
    [SerializeFieldprivate Sprite[] other_img;
    // Start is called before the first frame update
    void Start()
    {
        change_image();
    }

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

    public void change_image()
    {
        original_img[0].sprite=other_img[0];
    }
}

Other method

Some people also use gameObject of ui image and then get image component by getcomponent method
if you want to use gameObject to change image rather then direct declaring image component because conditions are different at different places and there are thousands of method of doing a same thing you can use following code

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

public class changeUIimage : MonoBehaviour // replace changeUIimage with your script name
{

    [SerializeFieldprivate GameObject[] original_img_obj;
    [SerializeFieldprivate Sprite[] other_img_obj;
    // Start is called before the first frame update
    void Start()
    {
        change_image();
    }

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

    public void change_image()
    {
        original_img_obj[0].GetComponent<Image>().sprite=other_img_obj[0];
    }
}


this example is with array and you can use it without arrays.

We have declared other_img_obj as sprite if we declare it as a gameObject then we have to drag image from hierarchy window instead of assets in project panel. and can assess image by following code

 original_img_obj[0].GetComponent<Image>().sprite=other_img_obj[0].GetComponent<Image>().sprite;


Popular posts from this blog

How to fix Android Gradle Build failed error in unity

Finding a GameObject by C# script in unity

How to install unity editor

how to setup unity ads in mobile game

how to pause game by script in unity ( with android back button or with computer esc key )

Unity ads install error from package manager

WaitForSeconds and coroutine in unity | delaying a code action for some time in C#

GetComponent method in unity to access component by C# script

SerializeField and HideInInspector in unity in C# script

playing audio in unity by C# script