[SOLUTION] Disabling outline effect on in-font images (emoticons)

[soulburner]

Developing another game on NGUI we're facing the same problem - we heavily use font effects (such as outline) and heavily use in-font icons. But when you use the outline, it applies to the icons too. Which looks pretty bad in most cases.



You see - all these black outlines on the circle icons.

Previously I had to duplicate the UILabel and make two of them - one with outline (for the text) and the other (overlapped) without the effect - for the icons.
But that feels pretty messy.

Now I'm sharing you the modification to NGUI we've made. It is not very elegant, but works. Maybe NGUI author would  think about including it to NGUI.

So, here we go:

1. Add "SymbolStyle.NoEffect" to the "SymbolStyle" enum
2. In NGUIText.Print() search for the line

1. (symbolStyle == SymbolStyle.Colored)

and use the following code (it was around line #1507 for me):

1. if (cols != null)
2. {
3.         if (symbolStyle == SymbolStyle.Colored)
4.         {
5.                 for (int b = 0; b < 4; ++b) cols.Add(gc);
6.         }
7.         else
8.         {
9.                 Color col = Color.white;
10.                 if (symbolStyle == SymbolStyle.NoEffect)
11.                 {
12.                         col = new Color(1, 0, 1, 0);
13.                 }
14.                 else
15.                 {
16.                         col.a = gc.a;
17.                 }
18.                 for (int b = 0; b < 4; ++b) cols.Add(col);
19.         }
20. }

That puts a color of #FF00FF00 (transparent cyan) in the colors array in places where images are.

Now that fully transparent cyan will be passed to the outline creator that will make the outline color transparent. But at this moment, the color of images itself will became transparent too. So, finally, we need to replace #FF00FF00 to white after applying all shadows/outlines:

3. At UILabel.OnFill(), at the very end of the method, before this:

1. if (onPostFill != null)
2.     onPostFill(this, offset, verts, uvs, cols);

you should insert a replacing code (line #1948 for me):

1. if (NGUIText.symbolStyle == NGUIText.SymbolStyle.NoEffect)
2. {
3.         for (int i = 0; i < cols.Count; i++)
4.         {
5.                 Color c = cols[i];
6.                 if ((c.r == 1) && (c.g == 0) && (c.b == 1) && (c.a == 0))
7.                 {
8.                         cols[i] = Color.white;
9.                 }
10.         }
11. }

And that's it.

The result will be:

[ArenMook]

I can certainly add this, although with a few tweaks. Using a 0-1 range value is not a good idea as it can be achieved via [ff00ff00]. Better to use a value outside that range, such as -1f to indicate marked vertex colors.

[soulburner]

I think that feature should be usefull. Don't know about others, but as we working in pixel art, its a common task for us - show a non-outlined icon in a outlined text field.