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 red, green and blue c
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

Changing Image in unity by C# script

-
 There are two case when you want to change image one is UI image and other is a sprite in scene so in this post we will take a look at both cases how to change images. Changing UI Image There are very few steps to change UI image scripts First create a UI image gameObject in scene whose image we want to change create a script and attach with an other empty gameObject and open script In script declare a public GameObject for referencing changing image and a declare a private Image variable for refencing Image component in this gameObject also declare a public Sprite for which image that we want in replacement. using   System . Collections ; using   System . Collections . Generic ; using   UnityEngine ; using   UnityEngine . UI ; public   class   test  :  MonoBehaviour {      public   GameObject  image_object;      public   Sprite  mySprite;      private   Image  myImage;      void   Start ()     {          myImage  =  image_object . GetComponent < Image >();          myImage . sp
Read more