Add additional space around each glyph for bitmap fonts

Unity Engine
1

Would it be possible to add additional space around each glyph when fonts are rasterized so we can export the image and add effects like glows and outlines to the font?

It doesn’t look like this is possible at the moment but is this something I could do as a script or asset preprocessor?

Has anyone achieved this kind of effect before?

I noticed other people using 'Unity Font Mapper" and getting great results but is there a way to get it to render more than the standard ASCII characters?

Cheers

2

Create the font larger than you want it, and then create the effects in Photoshop using Inside Glow or Inside Shadow layer styles.

Oddly enough, I just exported a font texture from Unity, applied an outline and I’m just about to reimport it this very minute.

Can’t help you with the extended character set (yet) as I haven’t needed that just yet. Maybe someone else can chip on that.

3

I am using Unity and have no idea how you exported a font texture, any way you can help me with that? I only have the .ttf file in my Assets folder.

4

Sorry, the way you were talking, I thought you’d already found the wiki code to export a font texture. I converted it to C#, but it’s virtually identical.

Create a C# Behaviour in a folder called Editor in your Assets folder. Then name the behaviour something relevant and paste this code into it:

using System.IO;
using UnityEngine;
using UnityEditor;

public class FontTexture
{
    [MenuItem("Assets/Save Font Texture")]

    static void SaveFontTexture()
    {
        Texture2D tex = (Texture2D)Selection.activeObject;
        if (tex == null)
        {
            EditorUtility.DisplayDialog("No texture selected", "Please select a texture", "Cancel");
            return;
        }
        if (tex.format != TextureFormat.Alpha8)
        {
            EditorUtility.DisplayDialog("Wrong format", "Texture must be in uncompressed Alpha8 format", "Cancel");
            return;
        }

        // Convert Alpha8 texture to ARGB32 texture so it can be saved as a PNG
        Color[] texPixels = tex.GetPixels();
        Texture2D tex2 = new Texture2D(tex.width, tex.height, TextureFormat.ARGB32, false);
        tex2.SetPixels(texPixels);
       
        // Save texture (WriteAllBytes is not used here in order to keep compatibility with Unity iPhone)
        byte[] texBytes = tex2.EncodeToPNG();
        string fileName = EditorUtility.SaveFilePanel("Save font texture", "", "font Texture", "png");
        if (fileName.Length > 0)
        {
            FileStream f = new FileStream(fileName, FileMode.OpenOrCreate, FileAccess.Write);
            BinaryWriter b = new BinaryWriter(f);
            for (int i = 0; i < texBytes.Length; i++)
            {
                b.Write(texBytes[i]);
            }
            b.Close();
        }
        Object.DestroyImmediate(tex2);
    }
}

Now right-click on the texture (open the font in the asset browser to reveal the texture) and choose Save Font Texture.

Save it anywhere you like. Doesn’t need to be in your project, but it can be if you plan to reimport it once amended.

5

Oh my, that is great. I might be competent enough to get some use out of that.

6

By coincidence, I rewrote it in C# today too! Except we can use WriteAllBytes now in Unity iPhone, so it can be cleaned up a little bit for everyone. I also use a validation function instead of error messages, but do what you like.

366377–12717–$savefonttexture_401.cs (840 Bytes)

7

Thanks for the input.

We tried adding an inner glow in photoshop but its just not as nice. We also tried editing the truetype font to add extra space around each glyph in the hope that unity would think each glyph was larger. Didn’t seem to work though.

Going to try and keep trying some new ideas for the rest of the day and see what happens.

8

You can get a good idea of what’s going on by looking at a Text Mesh. After you import a font, Unity creates a texture and appropriate UV map. It’s really tight; you can see some glyphs carrying over to other glyphs if you import at a resolution that requires over 4096x4096, for example. When you type a character, a quad is created, with the appropriate UV mapping, and multiple quads will be placed based on the various settings of the font. But that’s not related to the UV/texture glyphs themselves.

You could use whatever shapes and textures you want, if you edit the font texture and material. (As in, type a random line of text and get parallax mapped animated viscera chunks.) All you need to do is stay within the boundaries of the glyph. This would be a huge pain, and it would only work for one imported size, but it is possible.