Fake mouse click & touch at position

I'm working on creating a simple highlight tutorial (you know the one that highlights a UI element and tells you to click on it). Now, I have a working script that moves the highlight around based on the given coordinates and that's cool. However, that highlight is actually a button, with the OnClick event that just moves it to the next coordinate.

Here's the issue, I have no idea how to pass in the click from that button to a button that's under it. Imagine if you had 2 buttons on top of one another, how would you activate both of them with one click WITHOUT having any reference to the one below?

I had an idea to use the GraphicRaycaster but that only works for one canvas. All right, I can get by that somehow, but I have some cases where I don't actually want to click on a UI element but wherever in the game window (for example, if you highlighted a row of cans and told the player to press on the highlighted one, a Shoot() function would be called from some other script and shoot at that location). So, that doesn't work.

Now, the only way I think that this can be pulled off is by simulating a fake click at the location of the highlight. That would fix all of my problems, the deal is, I don't know how to get it to work. All I know is that I have to override the StandaloneInputModule in some way to get it to register an input at a certain location.

Here are the sources I found that were of no major help to me:
https://forum.unity.com/threads/solved-virtual-mouse-cursor-that-triggers-ui-events.396937/
https://forum.unity.com/threads/custom-cursor-how-can-i-simulate-mouse-clicks.268513/
https://github.com/AmyDentata/VirtualInputModule/blob/master/VirtualInputModule.cs

P.S. - These threads helped my understanding but they are all over the place with no concrete answer. This has been a problem for 6+ years now and I can't seem to find a solution.

 

Raycast Target is exactly what you need for this type of problem, it's an option in the image component that you can set to true and false and it can be also accessed using GetComponent in your code. In your case if this is just for a tutorial you can just disable the raycast target of your image and then the button will work as normal.

I'm actually kind of amazed glancing through the threads you posted none of them offered this as as a solution, maybe it's down to how old they are. I think what you're doing is far too complicated, I would even go so far as to simply animate the cursor as an image and have it go to wherever you're wanting to indicate on your tutorial and then disable or delete the gameobject once you're done with the tutorial sequence.

All of this looks far too complicated for what you're trying to achieve.

 

That doesn't seem to work. Please let me know if I missed something.

 

Oh! My bad I didn't realise this was a button setup so I was wondering why you were having so many problems. Do you still want the left button to be interactable or does this not matter? I'm still trying to wrap my head around why you want it this particular way.

 

Yes. I would like both buttons to be pressed at the same time when clicking in between them.

I mean is there an easier solution? The tutorial I am creating will have multiple steps, therefore this spotlight button will move around the screen from one place to another until the user presses on that spot. The logical thing seems to use a button.

 

Why does the highlight have to be modeled as a button? Is it so you can detect if the user has clicked the button you expect them to click?

Maybe you could have the tutorial script add itself as an OnClick listener to the real button instead?

 

Yes. That's why I think it has to be modeled as a button, so that way I know that the user 100% clicked on it.

I could add OnClick listeners to all buttons that I want and just have the highlight as a normal image or whatever, but it's really not that great. Some of the buttons are located in prefabs (popups of sorts) and some of the buttons could even be located in another scene. Whatmore, It's even possible for the button to not actually be a button at all, just a simple click on the screen that in turn does another action, for example, moving the character from one lane to another in an endless runner type of game. From what I can tell, the only solution that covers all possibilities is a fake input.

 

I'm not as familiar with Graphic raycasting as with Physics raycasting in Unity - but would it be possible to have two Graphic Raycasters with two different layer masks (Blocking Mask?)? Then you could have your tutorial elements on a separate "tutorial" layer and have a special raycaster just for the tutorial layer - then do both raycasts at once on a click? I'm not sure if that's workable.

 

https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/script-GraphicRaycaster.html

It's Canvas based, so one GraphicsRaycast per canvas. It sounds doable, but ugly. We have 4 Canvases (for now), so that would mean 4 raycasts per click, which is fine I guess. However, those results have to then be sorted by priority. You don't want to have 3 buttons on top of each other (behind a series of popups or whatever) and then when you click on the top one, the bottom one actives and the middle one doesn't. All right, so let's say we somehow sorted out the priority between each canvas, that unfortunately doesn't solve the issue of clicking on something that isn't a button, since, it's not a UI element but just empty space in the game.