koobas.hobune.stream
Applying gradient effect on scroll text in Unity2D
I made this gradient effect. I used SoftMask to mark the place I want to cover with the background getting the gradient effect on text. I know it would be easier to just use image background and make a gradient in photoshop (example). But what if I want things to be more dynamic? For example, I have a video in the background that on click pauses and shows up the same scroll text. Now, the tool that I made wouldn't work because the background in this scenario would be different. I've been searching for a shader that could do the trick, but couldn't find any. Is Unity even capable of doing something like this? The effect is pretty obvious and looks easy to make, but man in was pain in the a** to make this work efficiently.
The gradient effect function:
private void FadeOutTextGradiantAndArrow(Vector2 scrollRectValue)
{
var contentY = _textScrollViewContent.anchoredPosition.y;
var contentMaxY = _textScrollViewContent.rect.height - _textScrollView.GetComponent<RectTransform>().rect.height;
var gradientHeight = _softMaskCanvasGroup.GetComponent<RectTransform>().rect.height;
var contentYSkewed = contentY - (contentMaxY - gradientHeight);
var positionPercentage = contentYSkewed / gradientHeight;
if (contentMaxY - gradientHeight < contentY)
{
_softMaskCanvasGroup.alpha = 1 - positionPercentage;
_arrowBelowTextCanvasGroup.alpha = _softMaskCanvasGroup.alpha;
}
else
{
_softMaskCanvasGroup.alpha = 1;
_arrowBelowTextCanvasGroup.alpha = _softMaskCanvasGroup.alpha;
}
}
