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?

intro

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:

Multiple font sizes across the screen

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:

texture

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:
    texture_downscaled
  2. Scaling a glyph up makes the text blurry:
    texture_upscaled

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:

legibility

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:

menu_x1_x1

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

menu_x1
menu_x4

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:

menu_pixel_x1

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!

outro

8 thoughts on “A Glimpse Into Font Rendering

Add yours

  1. Absolutely beautiful guys thanks so much for update! I want to play this on my hacked vita system ill be using the newest adrenaline to run it already got my copy of the game into a iso on the vita ready. I’m guessing I shouldn’t have a problem with scaling or blurriness on the vita right?

    Like

  2. That is a dope looking hi-res font by the way. I don’t know if it’s based on something from the game or from future tales games or whatever, but it’s really cool, specially the uppercase ones.

    Like

  3. Absolutely love the pixel font, did I read correctly that there would be multiple pixel fonts to choose from?

    Like

  4. My proposition to that problem is by creating a separate texture pack for those who wants to play it with higher resolution texts on an emulator or PPSSPP and the lower res texts to be patched on the iso for those who wants to play it on a real hardware.

    Either way tho you will have to create 2 patches so I guess an easier solution for me would be just to focus on the lower res texts and create a separate hi res texture pack afterwards.

    Like

  5. “answer this question in detail”

    “we’ll leave our explanation at that and continue working our magic behind the scenes.”

    😦

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a website or blog at WordPress.com

Up ↑

%d bloggers like this: