A Glimpse Into Font Rendering

Since our trailer for the translation of Tales of Destiny 2 was published, a question has been frequently asked:

How can the text look so good?

For once, we ignore Harold’s wisdom and answer this question in detail—a question that naturally arises considering the low native resolutions of both the PSP and PS2. Let us first elaborate on what the problem is, and why you might assume that a game developed for such low resolutions should not look that crisp.

The problem: Bitmap fonts hate scaling!

Consider the following screenshot:

The different font sizes you see are derived by scaling the glyphs of the font (a glyph basically being the graphical representation of a letter in a font). For example, the “L” in “Loni,” “Lens,” and “Light,” despite their different size, are all rendered from the the same glyph bitmap, a 23×23 texture in the unmodified Japanese version of the game.
Here is an excerpt:

In contrast to so-called vector fonts, which you are likely most familiar with, rendering text from a bitmap or raster font is problematic when scaling is involved. Vector fonts represent shapes as mathematical formulas, meaning that scaling them yields virtually perfect results. Bitmap fonts, on the other hand, suffer from the following two issues:

1. Scaling a glyph down might make the text either ugly or even unreadable:
   
2. Scaling a glyph up makes the text blurry:
   

While the second problem is aesthetically unsatisfying, it does not majorly impact playability. The first problem, however, might. The latter is especially egregious in the PSP version of Tales of Destiny 2, because the native resolution is a measly 480×272, which is only about half of what the PS2 offers. If that’s the case, didn’t the original developers face and solve that problem when porting the game to the PSP? You be the judge:

Challenge yourself and guess if that’s 鳳, 風, or 凰!

But why can downscaling be so detrimental? It’s because there may not be enough pixels to visually represent the original 23×23 glyph in a readable and aesthetically pleasing manner. After all, each of the pixels carries a certain amount of visual information; reducing this information beyond a certain point makes the glyph illegible.

We can think of two possible solutions to this problem: 1) provide more pixels, and 2) eliminate scaling.

Solution 1: Scale down, not up!

Because emulators are not bound by the restrictions of the original hardware, they may render a game at a higher than native resolution. For example, the screenshots above were taken using PPSSPP at rendering resolution 1920×1088, which is four times the native resolution of the PSP. That means that a glyph that would have been rendered as a 10×10 rectangle in the native resolution is now rendered as a 40×40 rectangle—that’s 16 times the pixels! To explain the difference visually, the following image was rendered at the native resolution:

For comparison purposes, the next image is the previous image enlarged, which shows the same menu rendered at four times the native resolution:

It might seem that using an emulator has magically solved all our problems… But wait, instead of being downscaled, the glyphs are now upscaled instead! Instead of not having enough pixels, there are too many pixels; each pixel of the 23×23 glyph bitmap needs to be distributed among this large number of pixels, resulting in blurry text.

The simple solution?

Make each glyph bitmap large enough to ensure it is only ever downscaled, never upscaled! Tales of Destiny 2 offers ample space for this. Because of the large number of kanji, the original font texture for the Japanese version occupies 256×4400 pixels of memory, which is a lot to work with! This high-resolution font is then part of the game, just as any other texture—no emulator-specific hacks required, and it works out of the box on PlayStation 2 as well.

Solution 2: Don’t scale at all!

“But I can’t change the rendering resolution on my PSP,” you say. “That’s where I want to play! How am I supposed to be able to read the text then?”

Another solution is required: just don’t use font scaling, circumventing the inherent problem with scaling bitmap fonts. Accordingly, we implemented a rendering system that provides a set of differently sized pixel fonts and chooses the appropriate font according to the scaling factor given by the game. The chosen font is then rendered pixel-perfectly:

A thing of beauty for all pixel lovers!

Note that there is going to be an in-game option to change between pixel fonts and the high-resolution font, so you can enjoy the pixel fonts in emulators as well, should you be so inclined!

Conclusion

We care deeply about both aesthetics and quality-of-life improvements in our game translations to give you the best experience possible. That’s why we provide not one, but two solutions to the font-scaling problem! This is only the tip of the iceberg, and there’s certainly more to it, such as making the font proportional, kerning, texture filtering, and other details. However, that becomes more technical, so we’ll leave our explanation at that and continue working our magic behind the scenes. We hope you share our desire for quality and enjoy the outcome!