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;
}
}
Your answer
![](https://koobas.hobune.stream/wayback/20220613054811im_/https://answers.unity.com/themes/thub/images/avi.jpg)
Follow this Question
Related Questions
[Unity2d] How to reduce text's horizontal size when overflow 0 Answers
Hi i am new to coding and know i need help. 1 Answer
The text in my game doesn't allign correctly depending on how big the screen is 0 Answers
Scroll Windows & Blurry Text 1 Answer
Scroll Rect which changes size of the number of buttons 1 Answer