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
{

    [SerializeField] private Image original_img;
    [SerializeField] private 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
{

    [SerializeField] private Image[] original_img;
    [SerializeField] private 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
{

    [SerializeField] private GameObject[] original_img_obj;
    [SerializeField] private 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

Positioning GameObjects in unity editor

-
Image
 You can change transform component of any gameobjects by manipulating mouse on any Gizmo axis or you can change values of transform component in inspector window. transform has the following tools. let's take a look  Move tool You can select move tool in toolbar or can select by pressing hotkey W.  At the center of Move Gizmo there are three small squares by dragging these square you can move gameObject along a plane and third axis remains constant. if you press shift key while dragging Move Gizmo squares will change to flat square. This flat square indicates that you can move gameObject in the direction scene view camera is facing.  For moving  to particular axis just drag any one of the axis that you want to change. Rotation tool While you select rotate tool or press hotkey E you will see spheres around gameObject and you can change rotation by dragging this sphere Gizmo. As with the Move Gizmo, the last axis you changed will be colored yellow. Think of the r...
Read more

Creating count down timer in unity by c# script

-
Image
 In many cases in game we have to show count down timer. in this post i will explain how to create a timer which show a timer 3... 2.... 1.....  . so first create a simple basic gameObjects :- 1. Create a new scene in your unity project. 2. Create a UI text GameObject in your scene. as I have created and named as "timer text". and set text size, position, font, color of text etc according to you need. 3. Create a new C# script. I named it as "timer". always take care that your C# script name and class name should be same. 4. Create an other empty GameObject. I named it as "timer script". and attach C# timer script with it. 5. Now open timer C# script. Add UnityEngine.UI namespace so that we can use UI component and declare a text and float of name "timer_txt" and "t". You can use any name whatever you want. I just wrote these names so that you can understand which name i have used. 6.drag and drop timer text ui gameObject into it.   the...
Read more

Grid snapping in unity editor

-
Image
 There are virtual grid in the editor's Scene view that help you to align GameObjects snapping(moving) to the nearest grid You can change this grid to any axis x,y,or z.  Aligning (Moving) to the grid GameObject can be move to the single axis or along all axis to the closest grid. To move a gameObject to closest grid open Grid and snap window by either method From Main unity menu, Choose Edit>Grid and Snapping Setting From the grid visible in scene view menu open the overflow menu and choose Edit Grid and Snap Setting and you can reset all grid settings by just clicking reset as shown in below image. in grid and snap setting  you will find Align selection sector click on x, y, or z button or to all axis or you can did the same work by selecting the gameobject and pressing Ctrl + \ key together for windows and command+\ key for macOS. You can use increment Snap Section to modify how much you want to move and along which axis. Showing and Hiding Grid lines By toggling th...
Read more