Thai text display analysis – Rockman X DIVE

Let’s talk about another Capcom’s title, Rockman X DIVE. This title is developed by Capcom Taiwan, using Unity 3D.

If you’ve already read my State of Thai in Unity 3D post before, you probably have an idea of what is coming down below. For those who haven’t, and doesn’t want to spend too much time reading, let me give you a TLDR; this game is a TOTAL DISASTER.

In fact, for those who know some Thai, you should probably notice by now what’s wrong in the feature image. All of the tone mark in that screenshot are misplaced (well, there’s only 2 of them.). Here’s an example of what went wrong.

In this button, the text is actually “หมุน 1 ครั้ง”. However the tone mark is misplaced and it totally obstruct the Mai Han-Akat. Mai Han-Akat is now missing.

Now let’s take a look at the configuration screen.

These buttons are all text and looks like they are localized very well, but again most tone marks are miss the mark (pun intended).

Regarding the font, this looks like it is Noto Sans Thai, although it might be a different variant or weight. This font is pretty well designed and should work on OpenType-aware applications. Unfortunately Unity 3D is not one of them. I’ll simulate the text render using my test tool. Notice that the text itself is pretty similar, however there are no text effects implemented yet so it looks a bit bland.

The top is what similar to how the game render currently, and the bottom is what it supposed to be.

Suggested Workarounds

Given that these problems are in the text rendering of the engine, there are a few thing we can do with it. For those embeded in the textures, the textures has to be edit using OpenType-aware application (eg. Photoshop).

Tone mark is the most obvious problem here as they can be placed directly over base character, or floating vowels (like Mai Han-Akat in this example). The easiest method to mitigate the issue is to push those tone marks up in the air, to avoid the floating vowels. Basically adjust the glyph metrics of those tonemark so the glyph is pushed upward.

This does not totally eliminates all problem, if there’s no floating vowel underneath it, the tone mark is too high. However I think in this case readability is more important than correctness (as Unity can’t do proper Thai text rendering anyway). Just leave it high in the sky then it would be fine.

Using adjustment pair might help, but there’s a lot of cases needed to handle, given how many vowels and tonemark we have. Testing can be a nightmare.

I’ll be updating the post about Unity 3D with the new version of the site (still under development). That should includes more details of the fix you can do to make Unity 3D displays Thai text better. Without feature like mark-to-mark anchor it won’t look right, unfortunately.

State of Thai in Unity

Unity3D is one of the most popular games engine used in Thailand. In fact, it’s not far fetch from being the most popular one. We do enjoy using Unity3D as it’s quite intuitive (although I’d say it’s not that easy for beginners).

However, Thai remains one of the obstacle in making good games for Thai people. I mean, the language. Displaying Thai in Game Engine is one of the problem we are facing so far. The TLDR; version is, Unity3D is not able to display perfect Thai strings in game (on both UnityUI and TextMeshPro), due to the fact of missing essential text layout feature required for displaying Thai.

Why it is so difficult. Well, Thai writing is 4-level of characters.

  1. The base character. Base character stay on the baseline. Keep in mind that some character has part of it extends down below the baseline — ญ ฎ ฐ. Some other character has parts of it extends above the height of most character in the set – ป ฟ.
  2. The above base character level. In this level, it can be either above character vowel -ี -ิ, or tone mark -้ -่.
  3. The topmost level, which is tone mark on top of the above character vowel. In this case they can be -ี่ -ี้
  4. The under-baseline vowel like -ู.

Some combination like ปี่ or ญู can looks messed up when the renderer does not support feature like mark-to-mark and mark-to-base placement. Unfortunately our beloved Unity3D does not support this.

I won’t go for details for now, may be later.

Also there are some issue with Editor itself as well. I’ll explain that one later. Let’s move on to the game engine first.

In-Game

As I mentioned before, Unity3D only support a basic text shaping which is not adequate for display Thai properly. Here’s the proof.

I’m pretty sure at this point, some of you who’s not very familiar with the language might ask ‘what’s the problem here?’ Basically the tone mark in Unity just overlaps with the vowel under it. And in some case, the vowel also overlaps with the base character as well. The word ปี่ (flute) cannot be rendered in Unity3D correctly.

This is the same font and same string in other program that support advanced OpenType feature. Notice the extra tick on top of the second base character of the second and the third phrase. Also the above vowel on the third phrase are moved slightly to the left so it does not overlaps with the base character.

The font used in above example is Sarabun, from Cadsondemak.

So, back in the day when there’s no OpenType, we Thai people also has this kind of problem on most application we are using. Luckily, since the font foundries are aware of this problem, they designed the font so that it avoid or minimize the problem when the glyphs overlaps with each other.

Below is Loma from TLWG, rendered with Unity3D. Loma was created a decade back, by the team Thai Linux Working Group who brought Thai support to Linux (a big thanks to them).

Notice that the tone mark is visible even if there’s above-base character vowel there, because the tone mark’s default position is higher than the most present days fonts. The third phrase still have the vowel overlaps the base character, as the character has its long tail extended higher in the air. The default vowel position is slightly to the left to give the visual indication that this is -ี not -ิ, which is an different vowel (they are not exchangeable).

However, these technique might be good enough for displaying on screen, it’s not when it come to publishing works. Some of the software vendor has develop a technique to swap out glyph to a proper version when certain condition is met. Eg, when the input string is ป่ then swap the tone mark with the version that positioned lower than user. This technique is commonly referred as glyph substitution. It’s still in-use now a day, but as a compliment to mark-to-mark and mark-to-base positioning provided by OpenType.

Anyway, people at SaladLab has implement glyph substitution library called ThaiFontAdjuster to use with Unity 3D. There’s catch with using this library, you need to use specific fonts as the substitution map is hard-coded in the library. They do provide a special built of ‘NotoSans Thai’ that support the library. I think Loma above also support this library as well (I haven’t tried though.).

However, these are just workaround. Until Unity3D supports glyph positioning (mark and mkmk in particular), I’d say we still have to struggle with Thai text in the engine.

Editor.

The first problem you will encountered is, the input field does not display Thai text properly (again). I think it comes from the font that they are using in the UI. It’s probably due to the fact that I’m using Windows 10, as some UI fonts shipped with Windows 10 are different than one shipped with earlier versions of Windows.

Also if you copy the string from text field, and then paste it, you notice that the pasted content is different than what it was copied into.

Probably this worth a bug report ?

Appendix

Here’s the font I uses in above example.

Feature Image taken from Araya by MAD Virtual Reality Studio. I’m not associated nor affiliated with the company nor the title in anyway.