0
\$\begingroup\$

How can I make such exactly the same shadow using NGUI?

enter image description here

\$\endgroup\$
1
\$\begingroup\$

It looks the image has Shadow + Outline. For text you should use "NGUI Label" component for gameobject. But there is only 1 effect could be applied to text: Shadow or Outline. I believe you can make new class inherited from UILabel and make Effect field like an array, with multiplied effects.

Update: I've found not elegant way how to do it without much pain and inheritance. There is a diff for UILabel.cs:

--- a/Assets/NGUI/Scripts/UI/UILabel.cs
+++ b/Assets/NGUI/Scripts/UI/UILabel.cs
@@ -18,6 +18,7 @@ public class UILabel : UIWidget
        Shadow,
        Outline,
        Outline8,
+       ShadowAndOutline,
    }

    public enum Overflow
@@ -847,6 +848,7 @@ public class UILabel : UIWidget
            if (mEffectStyle == Effect.Shadow) return 2;
            else if (mEffectStyle == Effect.Outline) return 5;
            else if (mEffectStyle == Effect.Outline8) return 9;
+           else if (mEffectStyle == Effect.ShadowAndOutline) return 9;
            return 1;
        }
    }
@@ -1903,6 +1905,47 @@ public class UILabel : UIWidget

            ApplyShadow(verts, uvs, cols, offset, end, pos.x, -pos.y);

+           if (effectStyle == Effect.ShadowAndOutline)
+           {
+               pos.y /= 2;
+               pos.x = pos.y;
+               
+               offset = end;
+               end = verts.Count;
+
+               ApplyShadow(verts, uvs, cols, offset, end, -pos.x, pos.y);
+
+               offset = end;
+               end = verts.Count;
+
+               ApplyShadow(verts, uvs, cols, offset, end, pos.x, pos.y);
+
+               offset = end;
+               end = verts.Count;
+
+               ApplyShadow(verts, uvs, cols, offset, end, -pos.x, -pos.y);
+               
+               offset = end;
+               end = verts.Count;
+
+               ApplyShadow(verts, uvs, cols, offset, end, -pos.x, 0);
+
+               offset = end;
+               end = verts.Count;
+
+               ApplyShadow(verts, uvs, cols, offset, end, pos.x, 0);
+
+               offset = end;
+               end = verts.Count;
+
+               ApplyShadow(verts, uvs, cols, offset, end, 0, pos.y);
+
+               offset = end;
+               end = verts.Count;
+
+               ApplyShadow(verts, uvs, cols, offset, end, 0, -pos.y);
+           }
+
            if ((effectStyle == Effect.Outline) || (effectStyle == Effect.Outline8))
            {
                offset = end;

Result:
enter image description here

\$\endgroup\$
  • \$\begingroup\$ How can I make it? Could you please elaborate it more? \$\endgroup\$ – trafalgarLaww Nov 24 '17 at 11:39
  • \$\begingroup\$ With inheritance it's a bit difficult than I thought. But I found not elegant way how to do it without much pain. I'm going to update my answer. \$\endgroup\$ – Dmitry Tabakov Nov 24 '17 at 12:11
1
\$\begingroup\$

Unity as a built-in Shadow component for UI elements. It's far from perfect but it's a good starting point.

Otherwise, you could duplicate the text, attach an outline component to the front text, and change the font color to the background text after moving it a little bit to get your shadow.

But I definitively advise you to use TextMeshPro, now free on the Asset store. Here is a video about outline and soft shadow using TextMeshPro

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.