How to: Scrollable map with UI on top?

Hello,

I already searched around but I can't seem to find a good idea for my problem.

Given
- Scrollable map, made from GameObjects in a somewhat isometric 3D world.
- Some UI button on the map for interaction.
- General UI on top of everything.

Question: How do I make the map scrollable? The map should also scroll when dragging over the map button, but not with the general UI overlay.


So far I used OnMouseDrag() on the whole screen, but then it works everywhere no matter what (or in a specific rect). If I could block more areas there it could work, but there has to be a better solution that maybe even uses the standard event system.
I'm a bit lost which keywords to search for. I don't need a fully coded solution, but a hint or link would be very helpful.

Thanks!

 

And what would you prefer for it to do instead? I'm a little confused, so I'm going to try a broad explanation...

In Unity UI, if a pointer event is received by a raycast target that doesn't handle that type of event, the event propagates up the object hierarchy until something handles it. For instance, if you put a button inside of a scrollrect and then try to drag the button, you'll end up dragging the scrollrect, because the button doesn't respond to drags.

However, if you put the button in front of the scrollrect (without being a child in the object hierarchy), then the scrollrect will not receive the drags. Even a simple Image or Text with no behavior attached can intercept events in this way (as long as "raycast target" is checked).

The obvious way to do a traditional type of scrollable map UI is to have a rectangular area that can be dragged to scroll the map, but then put the rest of your UI on top of it, so that dragging between UI elements will affect the map, but dragging on top of a UI element will not (if the element is a raycast target).

You can also use Images with 0% opacity to create invisible shields over areas where you want to block mouse events without having anything be visible.

 

How would I put a rect in front of some buttons, so that I can drag over them in the rect, but still pass clicks to the buttons (or preferably anything underneath)?
I think this would help me. Kind of hitting not only the topmost UI element on input.

 

If the buttons were made children of the GameObject handling the drag, then they could receive clicks while still passing drags to the parent.

 

I'll just do

Code (CSharp):

1. MapCamera.Instance.OnBeginDrag(eventData);

or

Code (CSharp):

1. foreach(var mapButton in mapButtons)
2. {
3.     mapButton.OnBeginDrag(eventData);
4. }

Passing the event around is not that complicated.