2
\$\begingroup\$

I'm a bit of a total amateur, but I thought I would learn how to make a simple game during quarantine.

However, I stumbled into a problem with fonts. I'm thinking about using the free font "Pixelmania" to show a score at the top of the screen. But the font is transparent! How do I make the inner part of the font white? Do I have to manually edit the font file myself? Or is there an easier way?

enter image description here

\$\endgroup\$
2
\$\begingroup\$

Here's another technique you can use.

Select your font asset in the Inspector and set the Font Size to the size you want, and Character to the full set of characters you want to use. For this font, "ASCII upper case" would probably suffice. This generates a fixed font texture with exactly those characters present, at your chosen size, instead of dynamically building an atlas from the characters you use at runtime. Click Apply.

Create Editable Copy

Next click the gear at the top of the Inspector and choose "Create Editable Copy" - this will clone the font, its material, and its font texture to separate files you can edit individually.

Select the new font texture and change its format from the default "Alpha 8" (which means Unity ignores the colour of the font image and uses just its transparency mask) to either "Automatic" (compressed, and good enough for this effect), or "RGBA 32 bit" (uncompressed).

Now open the font texture in your painting tool of choice, and flood-fill all the transparent regions with white.

Painting font texture

Save, and now you're ready to use your edited font in UI text (not Text Mesh Pro):

Using the edited font

The advantage of this method is you can do literally anything you want to that font texture - paint every letter a different colour, replace each letter with photos of dogs, encode information for shader effects in the R G B A channels separately, etc.

The downside is that it's now a raster effect authored at some fixed resolution. So if you want to use this font at multiple different sizes in different parts of your game, or on different devices/resolutions, you either have to make multiple font textures, or cope with quality loss when the text is displayed at a different resolution than it was authored for.

The Text Mesh Pro solution Philipp offers handles crisp text across a wide range of resolutions very efficiently, but it is a bit more restricted in what you can do to the image data for each letter, since it treats fonts more like vector data (technically signed distance fields, which is a rasterization of a vector-like source that has only "inside" and "outside", no variations within that interior)

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

I am afraid this won't be possible with that font. TrueType-Fonts only have solid areas and transparent areas. They don't have a way to define which parts of each letter are "inside" and thus should be shown in a different color if on a transparent background. This font is really just outline and shadow but no letter.

But instead of this font, you could use a font which is just the solid part, and then add the outline and shadow effect at runtime. You can easily do that by creating a text as a Text Mesh Pro Text instead of a standard Text. TMP can do both outlines and shadows (called "Underlay") with any font you feed it. Plus lots and lots of other cool text effects.

From the TMP website:

GIF demonstrating what you can do with Text Mesh Pro

\$\endgroup\$
3
  • \$\begingroup\$ Thank you for your insight. Is there really no easy way to fill in these outlined fonts? It seems like such an absurdly simple request that a lack of a direct solution leaves me scratching my head. \$\endgroup\$ – AlanSTACK Jul 16 '20 at 15:33
  • \$\begingroup\$ @AlanSTACK No, there is not. Because, as I said, there is no "inside" of that font. There are just holes. You wouldn't want a font renderer to fill in the upper part of the glyph e either, would you? \$\endgroup\$ – Philipp Jul 16 '20 at 15:35
  • \$\begingroup\$ There is an alternative, though it's not as flexible as the Text Mesh Pro solution Philipp describes. Instead, you can use the legacy GUI text and repaint the font texture that it uses under the hood. I've added an answer to describe this method. \$\endgroup\$ – DMGregory Jul 16 '20 at 16:42

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.