Rendering overlapped sprites w/ Alpha channel applied to background ones.

Questions & Answers
1

I would like to slide an arrow (by changing its RectTransform anchoredPosition) over a background line. The problem is that this arrow has an alpha channel that I want to be applied to the background line as well i.e. I want the background line region that is behind the arrow not to be rendered/to have 0 Alpha.

Hierarchy goes like this:

Canvas
|-lineRawImage
|
|-arrowRawImage

Also, here are two explanatory images to better understand the problem:

Expected behavior:

51156-overlappedsprite01.png
51156-overlappedsprite01.png1344×588 48.9 KB

Actual behavior:

51157-overlappedsprite02.png
51157-overlappedsprite02.png803×435 101 KB

Apologize for my eye-bleeding Paint skills :stuck_out_tongue:

I had couple ideas as candidate solutions but they are not suitable/practical:

1- Merging the arrow and the background line into one image and scorlling it left and right using a scrollrect and a mask.

2- Having pre-designed templates of for example 10 different states of where the arrow could be, and switching those sprites (templates).

2

I solved the issue by extrapolating on my first idea lastly mentioned in the question; using a ScrollRect(with mask component, in fact there’s no need for ScrollRect) and a line with more width solved the case. Now I just have to sync the RectTransform anchoredPosition of the arrow (that can slide left and right) with its counterpart in the hovered element in the 2nd red RectScroll area below the arrow. The goal of doing this is to merely make the arrow point to the right element in the scrollRect below it. Which is really daunting and requires lots of mathematical formulas :confused: I got the hover event to fire up correctly but syncing the positions of two rect scrolls and performing correct scaling/clamping is really giving me a headache…