Click Canvas Image

Hi ..
This is my first post ever, pleased to join the forum
In my UI canvas, there is an image object, my target is use this image as button when I click it by mouse do something, already i used the following code, but nothing happened..! what is wrong ?

Code (CSharp):

1. using System.Collections;
2. using System.Collections.Generic;
3. using UnityEngine;
4.  
5. public class clickUI : MonoBehaviour
6. {
7.     public Camera mainCamera;
8.  
9.     void Update ()
10.     {
11.             RaycastHit2D hit;
12.  
13.             Ray ray = mainCamera.ScreenPointToRay(Input.mousePosition);
14.  
15.             if(hit = Physics2D.Raycast(ray.origin, new Vector2(0,0)))
16.                 Debug.Log (hit.collider.name);
17.     }
18. }
19.  

 

Hmm... why are you writing code just to make an image clickable? Why not just use a Button?

P.S. Welcome to the forum!

 

I know this is a really old post but it is the first result in a google search for - unity clickable image. Given that and the fact that the only other response does not even attempt to answer the question, I thought I would give an answer.

It's really a pretty simple solution:

1. Select the image in the hierarchy
2. Add a 2d collider to the image
3. Add a script that handles OnMouseUp()

That's it! Very simple.

Here's an image with 2d circle collider that I used for a start button.


Here are the full contents of my script that handles the click/touch.
You'll notice that it has my BoardManager script as a public member.
The ImageClickHandler script handles the click in the OnMouseUp() method.

Code (CSharp):

1. using UnityEngine;
2.  
3. public class ImageClickHandler : MonoBehaviour
4. {
5.     public BoardManager BoardManager;
6.  
7.     private void OnMouseUp()
8.     {
9.         BoardManager.RunLevel();
10.     }
11. }

Here's the hierarchy and the inspector.
In the red is the Image with a circle collider and a script.
In the green is how I pass in a reference to my BoardManager script.


I hope this is helpful!

 

Still curious why you didn't just use a Button component. That's what they're for.

 

"use a Button component."

Yes... and do these OnMouseUp and such old methods even work on mobile for example?

Another way in addition to button, is to just use uGUI / event system interfaces (if you don't want to use button):

https://docs.unity3d.com/2019.1/Documentation/ScriptReference/EventSystems.IPointerDownHandler.html

 

I agree that a Button is the correct solution most of the time. However, a button doesn't always do what we're looking for and another solution is needed.

I was looking how to click an image because I wanted my button to also function as a countdown timer. Once the user clicks 'Go' they have a certain amount of time to accomplish something. I wanted that represented in the button alone. So I create two circular images and place the 'Go' image on top of the other. I set the Fill Method of the Go image to Radial 360. Then I change its fillAmount as time ticks away. The Go image disappears in a clockwise fashion revealing the other image underneath.


When I tried to use a button, the image underneath wouldn't show. I don't know why. Changing its z index didn't help. Maybe I could have used a second button but then I would have been using a button as a static image.

Do you know why the image under the button wouldn't show even after the button's image has "disappeared"?

 

Thank you for this! I didn't know about it and it is better than my solution in that it doesn't require a Collider.

In implementing this I did learn that while you can use the OnPointerDown method by itself, you cannot use the OnPointerUp method without having the OnPointerDown method also in your script.

To answer your question, OnMouseUp does work on mobile devices.

 

@RareRooster

"When I tried to use a button, the image underneath wouldn't show. I don't know why. Changing its z index didn't help."

"Do you know why the image under the button wouldn't show even after the button's image has "disappeared"?"

UI elements are ordered by their order in editor hierarchy - topmost / up in list items are drawn first, then the ones that are below them.

Also which canvas type are you using? First try with Screen Space Overlay - it won't ever intersect with world objects, unlike Screen Space Camera Canvas and World Space Canvas, both of which are also slightly more expensive to render AFAIK.

See:
https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/class-Canvas.html

"In implementing this I did learn that while you can use the OnPointerDown method by itself, you cannot use the OnPointerUp method without having the OnPointerDown method also in your script."

I think it is like that - same goes for endDrag, you have to have drag IIRC.

"To answer your question, OnMouseUp does work on mobile devices."

Good to know! Thanks!

 

But you can layer images (and text, and whatever other UI elements you like) inside a Button just fine. This is no different from how the default out-of-the-box button contains a Text component inside it, which is drawn on top.

No, as @eses says above, UI elements are drawn in hierarchy order, not Z order. I guess you just didn't layer your images correctly.

 

Excellent! I'm back to using a button which means I can get rid of my script too!

Thank you @JoeStrout and @eses for taking the time talk this through. This has helped me and will hopefully help others who find their way here.