- Home /
Fading a Text component with Shadow and Outline causes a problem
I am trying to fade a Unity UI Text component. Too this Text component I attached a Shadow and a Outline component to create the effect seen in the image below. But when changing the alpha of the color attribute from the Text component and the alpha of the effectColor attributes of the two effects the text becomes grayish as seen in the image. I am trying to achieve a more natural fade like the texts seen in the second row of the image.
I think the problem is caused by the Shadow an Outline component recalculating their shadow and outline based on the color attribute of the Text component they are attached too. But this fade is undesirable for me. Since I want to have the fade look like the texts seen in the second row of the image.
The only solution I see is to get some how a image of the Text component (with the shadow and outline effect applied) and fade this 'result' Image instead of the Text component.
Is it possible to receive a image (Bitmap) from a Text component and display this instead of the Text component it self? Or are there other (better) ways?
Any luck on a solution? Having a similar problem in my current project.
Answer by apcaskanette · Jun 30, 2016 at 05:22 PM
I ended up doing a work around that fades the outline alpha faster than the text alpha.
// Property
public Outline textOutline; // dragged on via inspector
// ...
// Called during fade coroutine
textOutline.effectColor = new Color(textOutline.effectColor.r, textOutline.effectColor.g, textOutline.effectColor.b, canvasGroup.alpha / 3);
Where the 3 is just some scaleout value, and the canvasgroup.alpha is the alpha of the text object (in my case it was in a canvasgroup).
Answer by _eero_ · Sep 27, 2016 at 10:38 AM
You should create a Canvas Group for the text. The canvas group alpha setting applies on its child UI items as a whole so that you can fade the composition.
There is also a bug with adjusting only the Text component alpha when the text has an Outline component too. Changing the alpha forces the Outline component to rebuild meshes and causes gc allocations / garbage. By using a canvas group that can be avoided.
That doesn't work. The faded out text still looks the same as a child of a canvas group as it does when editing the text's alpha directly.
Your answer
Follow this Question
Related Questions
UI Text - Stroke/Outline 1 Answer
Change UI outline/shadow via animation 0 Answers
Ui Effects components shadow and outline are creating tons of garbage 0 Answers
Text With No Fill, Just Outline 0 Answers
Font renders incorrectly 1 Answer