Tasharen Entertainment Forum

Support => NGUI 3 Support => Topic started by: Revva on June 18, 2012, 09:58:35 PM

Title: Packed Font Shader With Outline help
Post by: Revva on June 18, 2012, 09:58:35 PM
Hi ,

I am using the Packed shader for the font . How can export the outline + text , from BMFont so i can have the outline baked with the font. I tried using "Pack text and outline in same channel" export option. But the font and the outline color is white. Can you suggest how can i have the font as white and outline as black. 
Title: Re: Packed Font Shader With Outline help
Post by: ArenMook on June 19, 2012, 11:57:41 AM
You can't. Packed fonts can't have an outline.
Title: Re: Packed Font Shader With Outline help
Post by: Revva on June 19, 2012, 10:04:46 PM
I only need a simple outline so can we designate a special value as the outline pixel and then handle that in the pixel shader accordingly? Something like this:

"Pixel shader example
This pixel shader shows how to decode the color from a font texture with characters packed into all 4 channels, and each channel using special encoding to store the character with the outline."

This is based from the bmFont documentation.html file :)
Title: Re: Packed Font Shader With Outline help
Post by: Revva on June 19, 2012, 10:11:29 PM
I found this also in documentation

"Channel options

glyph : The channel will be set according to the glyph geometry. A value of 1 means the pixel is within the glyph.
outline : The channel will be set according to the outline geometry. A value of 1 means the pixel is within the outline or glyph.
glyph + outline : The value is encoded to allow separation of glyph and outline. A value of 0.5 means the pixel is within the outline, but not within the glyph. A value of 1 means the pixel is within the glyph."
Title: Re: Packed Font Shader With Outline help
Post by: YD4k on June 19, 2012, 10:51:01 PM
There is a way to achieve this. I worked out a way to add outline & shadow for packed fonts. Just move the shadow Triangles' generation from NGUILable into NGUIFont will solve this. Thus will alter the interface of Print function in NGUIFont.

p.s. Since it's improper to paste the entire code modification here. Can I just paste some kind of patch to done this?
Title: Re: Packed Font Shader With Outline help
Post by: Revva on June 19, 2012, 11:41:50 PM
yeah sure thanks  :)
Title: Re: Packed Font Shader With Outline help
Post by: YD4k on June 20, 2012, 01:06:42 AM
All codes below are base on NGUI v2.0.7c.
OK, so edit your UIFont & UILable like this:

In UIFont.cs


1. Alter function Print(), add two variable at the end:
  1. UILabel.Effect effect, Color effectColor
  2.  

2. At the 3rd line of Print(),   mReplacement.Print() should modify to：
  1. mReplacement.Print(...origin..., effect, effectColor);
  2.  

3. At the if block of "if (glyph.channel == 0 || glyph.channel == 15)"

origin should be like:
  1. if ()
  2. {
  3.     for()
  4. }
  5. else
  6. {
  7.     //comments
  8.  
  9.     Color col = color;
  10.  
  11.     originCodes;
  12.  
  13.     for();
  14. }
  15.  


modify like this:
  1.  
  2. Color col = color;
  3. Color colEff = effectColor;
  4.  
  5. if ()
  6. {
  7.     //for()
  8. }
  9. else
  10. {
  11.     //comments
  12.  
  13.     //Color col = color;
  14.  
  15.     originCodes;
  16.  
  17.     colEff *= 0.49f;
  18.  
  19.     switch (glyph.channel)
  20.     {
  21.     case 1: colEff.b += 0.51f; break;
  22.     case 2: colEff.g += 0.51f; break;
  23.     case 4: colEff.r += 0.51f; break;
  24.     case 8: colEff.a += 0.51f; break;
  25.     }
  26.  
  27.     //for();
  28. }
  29.  
  30. if (effect != UILabel.Effect.None)
  31.     {
  32.     for (int b = 0; b < 4; ++b) cols.Add(colEff);
  33.    
  34.     if (effect == UILabel.Effect.Outline)
  35.         for (int b = 0; b < 12; ++b) cols.Add(colEff);
  36.     }
  37.  
  38. for (int b = 0; b < 4; ++b) cols.Add(col);
  39.  
  40.  

4. before " verts.add()... uvs.add()..." add the code below:
  1.                 if (effect != UILabel.Effect.None && symbol == null)
  2.                 {
  3.                     float pixel = 1f / this.size;
  4.  
  5.                     verts.Add(new Vector3(v1.x + pixel, v0.y - pixel));
  6.                     verts.Add(new Vector3(v1.x + pixel, v1.y - pixel));
  7.                     verts.Add(new Vector3(v0.x + pixel, v1.y - pixel));
  8.                     verts.Add(new Vector3(v0.x + pixel, v0.y - pixel));
  9.  
  10.                     uvs.Add(new Vector2(u1.x, u0.y));
  11.                     uvs.Add(new Vector2(u1.x, u1.y));
  12.                     uvs.Add(new Vector2(u0.x, u1.y));
  13.                     uvs.Add(new Vector2(u0.x, u0.y));
  14.  
  15.                     if (effect == UILabel.Effect.Outline)
  16.                     {
  17.                         verts.Add(new Vector3(v1.x - pixel, v0.y + pixel));
  18.                         verts.Add(new Vector3(v1.x - pixel, v1.y + pixel));
  19.                         verts.Add(new Vector3(v0.x - pixel, v1.y + pixel));
  20.                         verts.Add(new Vector3(v0.x - pixel, v0.y + pixel));
  21.  
  22.                         uvs.Add(new Vector2(u1.x, u0.y));
  23.                         uvs.Add(new Vector2(u1.x, u1.y));
  24.                         uvs.Add(new Vector2(u0.x, u1.y));
  25.                         uvs.Add(new Vector2(u0.x, u0.y));
  26.  
  27.                         verts.Add(new Vector3(v1.x + pixel, v0.y + pixel));
  28.                         verts.Add(new Vector3(v1.x + pixel, v1.y + pixel));
  29.                         verts.Add(new Vector3(v0.x + pixel, v1.y + pixel));
  30.                         verts.Add(new Vector3(v0.x + pixel, v0.y + pixel));
  31.  
  32.                         uvs.Add(new Vector2(u1.x, u0.y));
  33.                         uvs.Add(new Vector2(u1.x, u1.y));
  34.                         uvs.Add(new Vector2(u0.x, u1.y));
  35.                         uvs.Add(new Vector2(u0.x, u0.y));
  36.  
  37.                         verts.Add(new Vector3(v1.x - pixel, v0.y - pixel));
  38.                         verts.Add(new Vector3(v1.x - pixel, v1.y - pixel));
  39.                         verts.Add(new Vector3(v0.x - pixel, v1.y - pixel));
  40.                         verts.Add(new Vector3(v0.x - pixel, v0.y - pixel));
  41.  
  42.                         uvs.Add(new Vector2(u1.x, u0.y));
  43.                         uvs.Add(new Vector2(u1.x, u1.y));
  44.                         uvs.Add(new Vector2(u0.x, u1.y));
  45.                         uvs.Add(new Vector2(u0.x, u0.y));
  46.                     }
  47.                 }
  48.  


In UILable.cs

1. Remove codes in OnFill() below this comment:
  1. // Apply an effect if one was requested
  2.  

2. for any Print() call of UIFont in OnFill(), just add two variable at the end, like this:
  1. mFont.Print(...origin...,effectStyle, effectColor);
  2.  


Done
Title: Re: Packed Font Shader With Outline help
Post by: tinyutopia on June 27, 2012, 10:41:11 AM
Will this effect the existing fonts already in the NGUI examples? Is there any chance that Aren will roll these additions into options for future NGUI updates to allow for packed font outlines/ shadows as standard options without this codemod ?
Title: Re: Packed Font Shader With Outline help
Post by: ArenMook on June 27, 2012, 10:47:22 AM
Possibly in the future, yes.
Title: Re: Packed Font Shader With Outline help
Post by: dark_tonic on July 28, 2012, 03:51:45 PM
Hi Aren, I noticed there are basic outline and shadow functions in the UILabel control, but the outline is too thin for my particular needs.  Is there a way to increase the thickness of the stroke?

A few features that ex2d has that we use quite a bit that I'd love to see in NGUI are:

1. the ability to set a color blend for each font object individually - you set a top color/alpha and a bottom color/alpha.
2. more full featured outline/stroke control
3. the ability to adjust tracking and line spacing (this particularly matters as you add thicker strokes)

We've been running into a bunch of issues of compatibility trying to use both NGUI and ex2d together.  If we had these font controls, we could ditch ex2d completely, but those things make it extremely flexible for font display.
Title: Re: Packed Font Shader With Outline help
Post by: ArenMook on July 28, 2012, 03:57:00 PM
#3 you can do by selecting the font.

Also, look here: http://www.tasharen.com/forum/index.php?topic=410.msg2004#msg2004
Title: Re: Packed Font Shader With Outline help
Post by: maru83 on June 24, 2014, 04:37:29 AM
Hi,

All codes below are base on NGUI v3.6.5
edit your UILabel & NGUIText & UILabelInspector like this:

I want you to support officially.

In UILabel.cs

1. ApplyShadow(...) modify like this:
  1. if (mFont != null && mFont.packedFontShader)
  2. {
  3.         Color32 packedCol = c * 0.49f;
  4.         if              (cols.buffer[i].r >= 130) { packedCol.r += 130; }
  5.         else if (cols.buffer[i].g >= 130) { packedCol.g += 130; }
  6.         else if (cols.buffer[i].b >= 130) { packedCol.b += 130; }
  7.         else if (cols.buffer[i].a >= 130) { packedCol.a += 130; }
  8.         col = packedCol;
  9.         cols.buffer[i] = col;
  10. }
  11. else
  12. {
  13.         if (uc.a == 255)
  14.         {
  15.                 cols.buffer[i] = col;
  16.         }
  17.         else
  18.         {
  19.                 Color fc = c;
  20.                 fc.a = (uc.a / 255f * c.a);
  21.                 cols.buffer[i] = (bitmapFont != null && bitmapFont.premultipliedAlphaShader) ? NGUITools.ApplyPMA(fc) : fc;
  22.         }
  23. }
  24.  

2. comment (mFont == null || !mFont.packedFontShader) in OnFill() and UpdateNGUIText()


In NGUIText.cs

1, before  "// Packed fonts come as alpha masks in each of the RGBA channels." add the code below:
  1. if (gradient)
  2. {
  3.         float min = sizePD + y0 / fontScale;
  4.         float max = sizePD + y1 / fontScale;
  5.  
  6.         min /= sizePD;
  7.         max /= sizePD;
  8.  
  9.         s_c0 = Color.Lerp(gb, gt, min);
  10.         s_c1 = Color.Lerp(gb, gt, max);
  11.  
  12.         Color col_c0 = s_c0;
  13.         Color col_c1 = s_c1;
  14.  
  15.         col_c0 *= 0.49f;
  16.         col_c1 *= 0.49f;
  17.  
  18.         switch (glyph.channel)
  19.         {
  20.                 case 1: col_c0.b += 0.51f; col_c1.b += 0.51f; break;
  21.                 case 2: col_c0.g += 0.51f; col_c1.g += 0.51f; break;
  22.                 case 4: col_c0.r += 0.51f; col_c1.r += 0.51f; break;
  23.                 case 8: col_c0.a += 0.51f; col_c1.a += 0.51f; break;
  24.         }
  25.        
  26.         s_c0 = col_c0;
  27.         s_c1 = col_c1;
  28.         for (int j = 0, jmax = (bold ? 4 : 1); j < jmax; ++j)
  29.         {
  30.                 cols.Add(s_c0);
  31.                 cols.Add(s_c1);
  32.                 cols.Add(s_c1);
  33.                 cols.Add(s_c0);
  34.         }
  35. }
  36. else
  37. {
  38.         Color col = uc;
  39.  
  40.         col *= 0.49f;
  41.  
  42.         switch (glyph.channel)
  43.         {
  44.                 case 1: col.b += 0.51f; break;
  45.                 case 2: col.g += 0.51f; break;
  46.                 case 4: col.r += 0.51f; break;
  47.                 case 8: col.a += 0.51f; break;
  48.         }
  49.  
  50.         Color32 c = col;
  51.         for (int j = 0, jmax = (bold ? 16 : 4); j < jmax; ++j)
  52.                 cols.Add(c);
  53. }
  54.  

In UILabelInspector.cs

1. comment like this.
  1. line 218        //EditorGUI.BeginDisabledGroup(mLabel.bitmapFont != null && mLabel.bitmapFont.packedFontShader);
  2. line 265        //EditorGUI.EndDisabledGroup();
  3.