Bug Report: Text shadow exhibits two clear glitches

Using the free font Pacifico as a Font Asset we can see two glitches in attempting to use the shadow text function:

1) Any places where letters overlap do not get shadowed (it seems perhaps it is added to the stencil on one letter then subtracts from it again when the next letter writes so the stencil gets "holes" in it where overlap occurs):

2) When you move the distance of the shadow sufficiently far away and/or blur it sufficiently, it clips off the bottom of the screen and loops to the top of the element:

This is demonstrated with no masks or other behavior. I simply added at label, made it red, set the font, and added the shadow. Even on the first example you can see the clipping happening, but it's much worse when you crank up the blur/size as then it loops to the top.

A fix for these two behaviors would be appreciated.

Thanks.

Hi @mikemohan !

1- TextShadow is not yet supported for curly text. A different shader would be required that renders the text effects for whole words. Unfortunately, this is more complicated than that as UI Toolkit doesn't support custom shaders yet.

2- This is also a known issue, but I don't believe it is tracked properly. Would you mind logging a bug through the Unity bug reporter for the second issue and paste the bug ID in this thread (Help/Report a bug...)?

Thanks a lot for bringing this up!

Thanks hugo. That's too bad about issue #1. I will wait for a solution for that as well. At least with blurred shadows it is not too obvious right now.

For the second issue, I submitted the bug report as suggested with the bug ID: 1396376_63niestjgbrt796k

Thanks for your attention to this. I look forward to a solution.

1 Like

Hey Hugo, It's been 6 months and I am still hoping for a fix for this shadow edge clipping/looping issue. Currently it is still making text shadows mostly unusable in any but the tiniest sizes.

Is there any update on progress for this? Thanks.

According to the logs, it doesn't seem like it's been tackled yet. Sorry for the delay.

Hello again @mikemohan :)

The looping issue is mostly a UX issue rather than the Text Shadow being unusable. The looping happens because there is insufficient padding between the characters in the font texture. Increasing your padding to sampling ratio should allow you to use larger effects without triggering the looping issue. To do so, in your FontAsset, increase the padding while keeping the same sampling point size.

As for the clipping issue, this one is indeed a bug. I know it has been a while and I am sorry about that. I increased the priority of the ticket.

1 Like

Thanks, FYI, I had previously been loading Fonts into Label just because I didn't realize it was the wrong way and it hadn't shown an issue otherwise. I am now loading them as FontAsset after reading your reply. If I increase the padding on the FontAsset this does seem to work and the shadows are immediately better.

I also see FontAsset has a much better fallback font list which works and is more customizable than Font as you mentioned in the other thread which actually works. This is great.

PROBLEM: FINDING VERTICES WITH FONT ASSET?
There is a problem with this however. I need to be able to make identical TextGenerator instances to match some of my Labels. This is needed as I am creating custom TextFields by using TextGenerator to match my Label and then use TextGenerator to judge the letter vertices from this.

But TextGenerator does not support FontAsset, so then using FontAsset on the Label (with its custom fallback lists) and Font on TextGenerator (with its broken fallback lists) will create mismatches and I will no longer know where my Label letters are.

Is there any way to get TextGenerator working with FontAsset? Or alternatively provide some other method to know where Label letter vertices are? Is there any class that takes FontAsset and can output per-letter vertex data?

This is absolutely crucial for me as I have no other way to make a custom TextField. I have already built a perfectly working TextField in this manner but it will desynchronize from Label if it's not using the same fallback system.

What about if I replace my TextGenerator instance with a TMP instance? I think TMP has vertices built in from this thread and I think that also allows custom fallbacks that could match FontAsset?

The only problem with that is I would need to make duplicate FontAsset and TMPFontAsset copies for every single font which doubles my font build size (and adds up when you are trying to cover every language).

I appreciate any further suggestions or any plans you might have that will solve this issue.

Thanks as always.

I answered in this thread .

[quote=“HugoBD-Unity”, post:6, topic: 866429]
Hello again @mikemohan :slight_smile:

The looping issue is mostly a UX issue rather than the Text Shadow being unusable. The looping happens because there is insufficient padding between the characters in the font texture. Increasing your padding to sampling ratio should allow you to use larger effects without triggering the looping issue. To do so, in your FontAsset, increase the padding while keeping the same sampling point size.

As for the clipping issue, this one is indeed a bug. I know it has been a while and I am sorry about that. I increased the priority of the ticket.
[/quote]

Hey Hugo, It’s been another 6 months and this still remains a disabling issue for this feature.

Increasing padding slightly improves the problem, but to get it high enough to solve it leads to glitches in terms of how the fonts show up. Letters can look jumbled (some become strangely small, they bunch on each other). The label also takes on an abnormally big amount of space (from the padding, increased worldbound). It ruins Flex layout behavior. Presumably this will also mess up any TextGenerator or other functions needing to identify vertices.

Is this still a live ticket? Can you take another look? Is there any way to get this working in a way that doesn’t require massive padding (which ruins the layout and font display)?

I note it’s been well over a year now since my bug report. Having text shadows is a great feature and very helpful for my design. I really do appreciate this function and having it working would be great. We can create shadows for our other elements manually in other programs and use sprites/Textures to display them. But without this function we cannot do text shadowing on the fly.

Thanks for any further help.

Hi @mikemohan !

I tested locally and couldn't reproduce the issue you described. Increasing the padding in the font asset should increase the spacing between characters in the atlas and thus giving more room for text effects such as shadow, but it shouldn't impact the layout and glyph metrics should stay the same.

Is it possible you are increasing the padding on the VisualElment instead ?

8802703--1197067--CleanShot 2023-02-13 at 11.26.42@2x.png

[quote=“HugoBD-Unity”, post:10, topic: 866429]
Hi @mikemohan !

I tested locally and couldn’t reproduce the issue you described. Increasing the padding in the font asset should increase the spacing between characters in the atlas and thus giving more room for text effects such as shadow, but it shouldn’t impact the layout and glyph metrics should stay the same.

Is it possible you are increasing the padding on the VisualElment instead ?

[/quote]

Thanks Hugo. Yes, that is where I tried manipulating the padding as you suggest above. To illustrate, I made a test project with the following steps:

  1. Copy font into Resources folder (Noto Sans Bold).
  2. Right click on Font and select “Create Font Asset”.
  3. Implement the following script on a GameObject with an empty UI Document:
    private void Awake() {

        FontAsset notoBoldFontAsset = Resources.Load<FontAsset>("NotoSans-Bold SDF");
        FontDefinition notoBoldFontDefinition = FontDefinition.FromSDFFont(notoBoldFontAsset);

        VisualElement rootVE = gameObject.GetComponent<UIDocument>().rootVisualElement;

        VisualElement sorterVE = new VisualElement();
        sorterVE.style.height = sorterVE.style.width = new Length(100, LengthUnit.Percent);
        sorterVE.style.backgroundColor = Color.white;
        rootVE.Add(sorterVE);

        VisualElement tagHolderVE = new VisualElement();
        tagHolderVE.style.paddingLeft = tagHolderVE.style.paddingRight = 20;
        tagHolderVE.style.borderBottomLeftRadius = tagHolderVE.style.borderBottomRightRadius = tagHolderVE.style.borderTopLeftRadius = tagHolderVE.style.borderTopRightRadius = 30;
        tagHolderVE.style.alignSelf = Align.FlexStart;
        tagHolderVE.style.backgroundColor = Color.blue;
        sorterVE.Add(tagHolderVE);

        Label tagLabel = new Label("TEST LABEL TEXT");
        tagLabel.style.unityFontDefinition = notoBoldFontDefinition;
        tagLabel.style.fontSize = 80;
        tagLabel.style.color = Color.white;
        tagHolderVE.Add(tagLabel);

        VisualElement shadowTextHolderVE = new VisualElement();
        sorterVE.Add(shadowTextHolderVE);


        Label shadowLabel = new Label("Shadow Text");
        shadowLabel.style.fontSize = 90;
        shadowLabel.style.unityFontDefinition = notoBoldFontDefinition;
        shadowLabel.style.position = Position.Absolute;
        shadowLabel.style.textShadow = new TextShadow { blurRadius = 15, offset = new Vector2(0, 6), color = Color.black };
        shadowTextHolderVE.Add(shadowLabel);
   
        Label textLabel = new Label("Shadow Text");
        textLabel.style.fontSize = 90;
        textLabel.style.unityFontDefinition = notoBoldFontDefinition;
       shadowTextHolderVE.Add(textLabel);
}

This creates the following appearance at default:

8804572--1197391--text shadow bug 9 padding.PNG

We can see the shadow is looping at the top and clipping at the bottom.

Increasing the padding from 9 to 30 solves the clipping at the top but does nothing for the clipping at the bottom:

8804572--1197394--text shadow bug 30 padding.PNG

Increasing the padding to 100 helps no further and causes glitching where I think it is substituting for a fallback font on some letters (why I was likely observing letters glitching out and layouts changing when increasing padding too high on my own real world test mentioned above):

8804572--1197397--text shadow bug 100 padding.PNG
Going higher to 150 just glitches out most of the letters:

8804572--1197400--text shadow bug 150 padding.PNG

I am not changing anything except the padding here:
8804572--1197403--text shadow padding setting.PNG

I am not sure if I am still doing something wrong in the workflow with fonts and how they are being set in UI Toolkit to my Labels. This is a blank test project so if it is any help I can submit it as a bug report. Let me know if that would be useful.

If the Text Shadow is expected to continue to display this type of clipping behavior (or either way), I wonder if there might be another approach to making Text Shadows.

I have access to the TextCore TextGenerator and can set one with identical settings as one of my Labels. Can one of those render out a Texture2D or other graphical representation of a given text input? I am not sure if that is remotely possible. Or if there is some other way to get a transparent background image rendering of a Label/TextGenerator (Texture2D or PNG).

I am thinking if I can make a Texture2D or PNG of a given word from the TextGenerator or some other method, I can increase the canvas for it, then apply my own blur to it manually and put it behind the Label to get my own shadow under my own control. The nice thing about this method is it would blur the whole word/phrase all as one unit too.

Either approach would be fine and it might be nice to try to get both working for flexibility. What do you think? Is there still something I’m missing or doing wrong?

Hi @mikemohan !

Thanks for the clear description of the issue, it's appreciated! As you pointed out, once you increase padding past 30 some characters no longer fit in the main atlas and thus it relies on the fallback. In that case, you can either increase the atlas size or enable multi-atlas textures on the font asset.

In any case, you are right, there is an issue with the shadow. Increasing the padding fixes the looping issue, but the shadow effect is still contained to the bounds of the letter.

I'll have a look, thanks for bringing this up!

1 Like

Hi @mikemohan !

I want to let you know that the clipping and looping issue with text effect has been fixed. Note that the fix is not perfect, you can still trigger the looping issue when using extreme values with bold.

1 Like

Why not make separate geometry for text shadows? So instead of relying on padding you can just move and scale quads(so it fully contains blurred text)

1 Like

[quote=“Onigiri”, post:14, topic: 866429]
Why not make separate geometry for text shadows? So instead of relying on padding you can just move and scale quads(so it fully contains blurred text)
[/quote]

I am not sure whether this is practical, but the best idea I currently have is to create a function that renders the text from a Label identically to a Texture2D/PNG, which I can then run a blur on, and put this behind the Label.

Although the fix provided definitely helps, it is still clipping under normal usage scenarios at the edges no matter what padding is used. For example:

8953356--1229394--shadow newest.PNG

This is not an aggressive setting visually yet clearly clips the bottom and side.

My suspicion is the only way to fix it is to then find some way to render the font data into a texture from Label/TextGenerator vertex and font setting data, then blur that behind the Label. I just don’t know how to do it or if this is crazy.

I already have a class with a TextCore TextGenerator I have made by reflection (since for unknown reasons we can’t access the TextCore TextGenerator otherwise currently) and I know how to access the vertex data from the Label as well by reflection.

If I can figure out a way to render the pixels from the font letters to a texture based on the positions of the letters from the TextGenerator/Label then in theory I believe one could render an identical Texture2D/PNG of a Label which could then be blurred in a perfect fashion.

I am not sure if your solution would be a lot easier as I don’t really understand how this works behind the scenes.

Any thoughts?

Also, Hugo, do you know if my approach makes sense or is possible and if so, any tips on how to render the font into a texture from the Label/TextGenerator vertex and font data if so?

Hi @mikemohan ! The fix landed in 2022.2.16f1, can you confirm you are on a version that has the fix ? The text effect should no longer be bound to each letter.

8955096--1229763--CleanShot 2023-04-17 at 14.40.39.gif

1 Like

[quote=“HugoBD-Unity”, post:16, topic: 866429]
Hi @mikemohan ! The fix landed in 2022.2.16f1, can you confirm you are on a version that has the fix ? The text effect should no longer be bound to each letter.
[/quote]
Ah. Okay. So I am not using the fixed version then. Looks like 2022.2.16f1 is not yet available to us. Most recent version is Unity 2022.2.15 as of April 13, 2023:

https://unity.com/releases/editor/archive

Or is it available some other way? Is it included in 2023.1.0 Beta 12 from April 12, 2023?

https://unity.com/releases/editor/beta/guide-to-beta-testing

Otherwise I will wait for that version to be released hopefully soon. I will upgrade to 2023 once emojis are added there also.

I am doing inventory and after this is fixed and emojis are released (as you said, is happening momentarily) the only two glitches blocking my completion are:

1) Android TouchScreenKeyboard Remains Very, Very Broken - https://discussions.unity.com/t/886740

2) IL2CPP Builds Not Reading state of style.display & style.visibility - https://discussions.unity.com/t/903170

After that my only problems are my own and I have no one to blame for anything else but myself. :smile:

Any thoughts on the prospects for fixes or guidance on how I can fix those two remaining problems?

Thanks as always. Hope things are going well for you over at Unity.

1 Like

Meanwhile, with TextMeshPro:

8955783--1229868--upload_2023-4-18_11-28-11.jpeg

2 Likes

@mikemohan I apologize for the confusion, I should have been more explicit with the versions. It landed in Unity 2023.1.0b11 and 2022.2.16f1. As for emojis, they are available in 2023.2.

Did you open tickets for the other issues ? If yes, could you share them with me.

I just upgraded my project to 2023.1.0b12 (gonna have to upgrade to 2023 anyway for Emojis soon enough), and I can confirm the shadow fix is working beautifully! Just as you show, nice smooth shadows and no clipping anymore. Thank you so much for the fix! Looks great.

It also appears the problem with style.display and style.visibility not getting read properly in IL2CPP was also fixed so I marked that thread as resolved and that bug is closed it appears.

I would then just be interested to get your opinion on two final things:

1) TOUCH SCREEN KEYBOARD (Critical Issue)
The only remaining serious problematic bug is with Android's TouchScreenKeyboard.hideInput. These problems are crippling still although there has been a bit of progress on it.

I wrote about the original problems here and then updated the problem list I see after the "fix" was made (which didn't fix it, but rather shifted problems around) here . The bug report remains from July, 2022 as IN-9117, though it is now marked "resolved" even though it clearly is not.

I just checked in 2023.1.0b12 and the same issues noted in that thread are present - only some clicks in the "hidden zone" go through and some are blocked. Autocorrect underlines still show up in the "hidden zone" indicating there are still things there that have not been moved off screen.

Someone obviously did some work on the bug report (doesn't collapse so easily or spam Android errors to LogCat so often) but there is still clearly something there that needs to still be fixed.

I am not sure what more I can do to help you guys narrow this down or debug it further. I posted detailed info in that thread for what remains broken with it. If there's something I can do to gather more info on my end that would be useful, I'm happy to do whatever it takes to get this fixed.

As noted, this is then my last remaining crippling problem (once Emojis are out) so I am committed to anything needed for fixing it.

2) ACCESSING TEXTCORE TEXT GENERATOR (Question of Curiosity)
I also have a question more of convenience and curiosity. Many of the TextCore classes are not accessible to us routinely (eg. UnityEngine.TextCore.Text.TextGenerator), though their equivalents in the old system still are (UnityEngine.TextGenerator). I am wondering if this is intentional or permanent vs. possibly just temporary.

It is stressful working by Reflection as it is very tedious to find the right fields/properties/methods to make things work this way. If something changes behind the scenes it's a guessing game to find the problem and fix it.

1 Like