Can a UI Image be placed in front of another interactable UI object and not interfere with that object?

Question

I have a lot of text. It's nicely laid out and scrollable because it's a child of a panel with UI Scroll Rect, UI Image, and UI Mask. Works fine but…

At the top of this parent panel when a user scrolls I want the text to look like it's fading out when it goes towards the top of the panel. My first thought was to use the UI Image and UI Mask on the panel for a smooth fade, but unfortunately it seems like this method only supports a 1 bit mask. I need a nice smooth fade, so the next thing I tried was placing a new UI Image with a smooth gradient fade in the alpha channel and tinted to the background color. Voila, now when the text is scrolled it looks like it's fading out, but…

Now the text that is underneath the image is no longer scrollable. Meaning that the Image seems to be interfering with the lower Panel's Scroll Rect, intercepting the user input. Is there a way to keep the image over the text, but still allow users to scroll in the red area (see pic)?

alt text

Answer 1

Best Answer

Answer by DiegoSLTS · Mar 26, 2015 at 06:13 PM

Add a "Canvas group" component to the Image and set "Blocks raycasts" to false.

Add comment · Show 4 · Share

d_kieffer · Mar 26, 2015 at 06:18 PM 0

Share

Yes, DiegoSLTS is right. That was my solution in the end. "Add a 'Canvas group' component to the Image and set 'Blocks raycasts' to false."

pmak · Mar 26, 2015 at 07:56 PM 0

Share

any idea on how to tackle this same effect with a transparent background? 3D text and a shader?

d_kieffer · Mar 26, 2015 at 08:04 PM 0

Share

$$anonymous$$eaning have the text fade out into the background, as opposed to just a flat color? Alas, if only the UI $$anonymous$$ask component wasn't 1-bit! $$anonymous$$y guess is you'll probably need to script something that tells the 3D letter's material to get more and more transparent as it gets nearer to the top of the screen. Not entirely sure though…

pmak · Mar 27, 2015 at 01:24 AM 0

Share

Awesome. Works. This information needs to be in a more accessible place. Thanks!

Can a UI Image be placed in front of another interactable UI object and not interfere with that object?

1 Reply

Your answer

Welcome to Unity Answers

Follow this Question

Related Questions