TransWikia.com

How do you deal with transparent fonts that you want to be white?

Game Development Asked on November 2, 2021

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

2 Answers

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)

Answered by DMGregory on November 2, 2021

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

Answered by Philipp on November 2, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP