How to enable and disable canvas image?

Unity Engine
1

I’m trying to get an image in canvas to enable and disable itself when a cube object has been clicked on. I have a script attached to the canvas image that is supposed to enable the image and disable it, but I can’t seem to find it in the scripting reference. I already have “using UnityEngine.UI;” at the top of my script, but what should I do to enable and disable the image?

2

well im still trying to get to grips with the new UI.
but im using canvas images to store pictures of my player lives. and possibly im using it wrong but what ive done is…

set a couple of public references to the images in my script, and drag the image component into the slot in the inspector.

public Image imgLife1, imgLife2, imgLife3; // holds the images for the lifes in the UI

then later on when i want to show/hide it i use;

                imgLife1.enabled = true;
                imgLife2.enabled = true;
                imgLife3.enabled = false;

hope that helps a wee bit.

4 Likes
3

Something like:

public class Example : MonoBehaviour
{
    private Image image;

    void Start()
    {
        GameObject go = GameObject.Find("Canvas");
        if (!go)
            return;

        image = go.GetComponent<Image>();
    }

    void OnMouseDown() // or however you catch the click on the object
    {
        if (image)
            image.enabled = !image.enabled;
    }
}

Script enables/disables the image attached directly to the canvas. If you need to toggle any other image you’d simply need to find the object which holds the image component.

4 Likes
4 
public class Example : MonoBehavior
{
     private Image image;

     void Start(){
          image = gameObject; //This works if you attach THIS script to the actual image.
     }

     void Update(){
          if(Input.GetMouseButtonDown(0)){
               Ray ray = camera.ScreenPointToRay(Input.mousePosition);
               RaycastHit hit;
               if(Physics.Raycast(ray, out hit)){
                    if(hit.collider.gameObject.name == "cube"){ //Checks to see if what was clicked on is the correct cube.
                         if(gameObject.SetActive(true){
                              gameObject.SetActive(false);
                         }else if(gameObject.SetActive(false){
                              gameObject.SetActive(true);
                         }
                    }
               }
     }
}
5

I got it working, thank you!

6

Is there anyway to do this in javascript? I have these 10 images on a canvas and I want each to disappear when I click on a gameobject. For example, I have this game object in the shape of a computer case and a picture on the canvas which was a screenshot of this case. I want to be able to make the image disappear when I click in the game object. The gameObject contains a script with a simple OnMouseDown() function with a Destroy(gameObject); inside.
Note: I’m new to unity, a little bit new to programming and I barely understand C# which is why I would prefer Javascript. Any help is appreciated. Thanks!

7

Simple:

public Image img;
void Start()
{
   // active
   img.gameObject.SetActive(true);

   //deactive
   img.gameObject.SetActive(false);
}
1 Like
8

Thank you

1 Like