- Home /
3D Text - Stroke/Outline
I've been doing some research on how to get an outline on my 3D text within my scene. I can't believe that there isn't a shader out there that allows me to add a simple outline to my 3D text?!?
Saying that, I have found some attempted shaders, but they don't give the desired effect (pixilated stroke, etc).
I have found that you can export the actual font texture and edit that in Photoshop, but thats a pain in the arse as I have to do it for each fill colour, stroke colour and font size I use throughout my game.
Surely, there must be something out there in where I can just define the stroke colour, and size, and boom! its there ...?
Thanks
i think "Flying TExt 3D" does all that for you, asset store
conversely use 2DToolkit for all your actual in-game text needs
note long comment w/ images ..
http://answers.unity3d.com/questions/384623/setting-font-size-according-to-screen-dpi.html
Answer by TheGering · Feb 01, 2014 at 10:02 AM
Take your text object and simply add following script to it:
using UnityEngine;
using System.Collections;
public class TextOutline : MonoBehaviour {
public float pixelSize = 1;
public Color outlineColor = Color.black;
public bool resolutionDependant = false;
public int doubleResolution = 1024;
private TextMesh textMesh;
private MeshRenderer meshRenderer;
void Start() {
textMesh = GetComponent<TextMesh>();
meshRenderer = GetComponent<MeshRenderer>();
for (int i = 0; i < 8; i++) {
GameObject outline = new GameObject("outline", typeof(TextMesh));
outline.transform.parent = transform;
outline.transform.localScale = new Vector3(1, 1, 1);
MeshRenderer otherMeshRenderer = outline.GetComponent<MeshRenderer>();
otherMeshRenderer.material = new Material(meshRenderer.material);
otherMeshRenderer.castShadows = false;
otherMeshRenderer.receiveShadows = false;
otherMeshRenderer.sortingLayerID = meshRenderer.sortingLayerID;
otherMeshRenderer.sortingLayerName = meshRenderer.sortingLayerName;
}
}
void LateUpdate() {
Vector3 screenPoint = Camera.main.WorldToScreenPoint(transform.position);
outlineColor.a = textMesh.color.a * textMesh.color.a;
// copy attributes
for (int i = 0; i < transform.childCount; i++) {
TextMesh other = transform.GetChild(i).GetComponent<TextMesh>();
other.color = outlineColor;
other.text = textMesh.text;
other.alignment = textMesh.alignment;
other.anchor = textMesh.anchor;
other.characterSize = textMesh.characterSize;
other.font = textMesh.font;
other.fontSize = textMesh.fontSize;
other.fontStyle = textMesh.fontStyle;
other.richText = textMesh.richText;
other.tabSize = textMesh.tabSize;
other.lineSpacing = textMesh.lineSpacing;
other.offsetZ = textMesh.offsetZ;
bool doublePixel = resolutionDependant && (Screen.width > doubleResolution || Screen.height > doubleResolution);
Vector3 pixelOffset = GetOffset(i) * (doublePixel ? 2.0f * pixelSize : pixelSize);
Vector3 worldPoint = Camera.main.ScreenToWorldPoint(screenPoint + pixelOffset);
other.transform.position = worldPoint;
MeshRenderer otherMeshRenderer = transform.GetChild(i).GetComponent<MeshRenderer>();
otherMeshRenderer.sortingLayerID = meshRenderer.sortingLayerID;
otherMeshRenderer.sortingLayerName = meshRenderer.sortingLayerName;
}
}
Vector3 GetOffset(int i) {
switch (i % 8) {
case 0: return new Vector3(0, 1, 0);
case 1: return new Vector3(1, 1, 0);
case 2: return new Vector3(1, 0, 0);
case 3: return new Vector3(1, -1, 0);
case 4: return new Vector3(0, -1, 0);
case 5: return new Vector3(-1, -1, 0);
case 6: return new Vector3(-1, 0, 0);
case 7: return new Vector3(-1, 1, 0);
default: return Vector3.zero;
}
}
}
great work! one question: the text is drawing above my sprites but the outline is under everything else. any ideas? i tried setting the Z value and the Layer but those did not work. thank you!
posted updated version of the script to address the layer issue with the outlines
Answer by Stephan-B · Jun 20, 2014 at 03:37 AM
Hi!
If you are after a simple process to add an outline to a text object, then I would use TextMesh Pro which allows you to add an outline / stroke dynamically and much more. All these styling options are real-time and dynamic. No need for Photoshop or editing font textures.
Here is an example (1) the plain text, (2) text with an Outline and (3) Just the Outline.
The only difference between those 3 text objects are different material properties. For instance, here is another example with a soft shadow with slightly thinner outline / stroke.
To learn more about TextMesh Pro, you can check out the Asset Store Thread.
Hopefully my answer gives you some good insight on some alternative ways or workflow to achieve the results you seek.
P.S. In case you are wondering, the text with outline and shadow is still one single text object. Not several duplicates.
I can only say good things about Text$$anonymous$$esh Pro. It works, fonts are crystal-crisp at any resolution / zoom level, the author is responsive to any feedback, and the asset is actively being worked on.
So far the best-working and feature-loaded plugin for working with text in Unity.
Answer by vovo801 · Oct 18, 2015 at 09:12 AM
Sorry for reviving an old thread. Now I have found this amazing repository on Github that does just what you wanted to do: https://github.com/n-yoda/unity-vertex-effects
But that project only works for UI Text, right? The question above is about 3D Text.
Sorry, my bad. You are right, it works only for UI Text, for 3d Text you`ll need some other solution. But it is still something. Unity native UI Outline script does not produce such clean results as the script in the link does. In my own experience the Circle outline from the link produces very nice outlines. $$anonymous$$aybe, the script can be rewritten to suit your needs.
Answer by xfstef · Oct 12, 2016 at 09:36 AM
It's raw and straight forward but I solved this problem by adding 4 shadows to each text. Place them by using a combination of positions between -1 and 1 on the x and y axis. I don't know if and how this would work for 3D texts but it looks pretty good for 2D ones.
Your answer
Follow this Question
Related Questions
Outlining simple objects without artifacts 0 Answers
How to make 3D outline with URP? 2 Answers
3D Outline [ShaderGraph URP] 2 Answers
Silhouette Toon Shader 0 Answers
How can i get my quad to only render my texture without stretching it? 1 Answer