Skill tab and range grid, plus a new font because the Chinese characters showed up as □

Back in 173 I renamed the skills first (Rock Shatter and Azure Flame Flash) and pushed the info only the skill tab needs, like hanja (Chinese characters), category and element, to step 5. This is that step 5. The mockup is the revised version of skill mockup #1 from 169 (no scene preview), and the skill values follow the table I finalized in 170.

I decided to build the menu's skill tab to match the mockup and fill the skill data with the fields the menu shows.

Screens I built

In the middle there's "◀ Karin ▶," the categories (All, Swordplay, Ultimates), the skill rows, and "Skills learned 2 / 2." Each skill row has an icon slot, name, hanja, a category badge, a summary · range, and TP. The badge is blue for regular swordplay and gold for Azure Flame ultimates.

SKILL INFO on the right has a big icon, the name, hanja, category badge, TP and description, followed by element, category, TP cost, range, target and cutscene.

Below that, RANGE draws a square grid of (range × 2 + 1) cells, tipped on its side into a diamond. Cells within Manhattan distance 1 to range from the caster are blue, and the caster is orange. It matches the combat attack range rule exactly. Longer ranges shrink the cells so the grid fits in the 520px-wide panel, and at range 3 the cells are 58px, the same as the mockup. The cell graphics are generated in code.

The skill data: Rock Shatter 碎巖擊 (regular swordplay, physical, 1 enemy) and Azure Flame Flash 蒼炎一閃 (Azure Flame ultimate, Azure Flame slash, 1 enemy, cutscene = battlefield). Controls: ↑↓ for skills, ←→ for characters (only one for now), and you can click rows or categories too.

When I ran it, Rock Shatter showed a range-2 grid and Azure Flame Flash a range-3 grid shaped just like the mockup. Switching the category to Ultimates leaves only Azure Flame Flash with "Skills learned 1 / 2," and Swordplay shows only Rock Shatter.

Things I thought about

• How to split swordplay and ultimates. If a skill has an ultimate cutscene attached, it's an ultimate. Otherwise it's swordplay. "Skills learned N / M" is the number visible in the current category / the total learned.
• Keep elements short. Rock Shatter's "Physical" is short for "pure physical attack" in the 170 table. I matched it to the same style as Azure Flame Flash's "Azure Flame slash."
• Register the hanja font as a fallback too. If I only fixed the hanja next to the name, hanja inside sans-serif sentences ("Azure Flame (蒼炎)") or on other screens would still come out as □. So I also added it as a fallback for the default font, so hanja shows up wherever it's used.

Rabbit hole: every hanja showed up as □

The hanja next to the skill names were printed as □. Turns out NanumGothic, the font I'm using, has no hanja at all.

I fixed it by adding Noto Serif KR, which was in the Windows fonts folder, to the project. It's licensed under SIL OFL 1.1, so it's fine to ship with the game. The hanja next to names use this serif font, like in the mockup. I checked that 碎巖擊, 蒼炎一閃 and Azure Flame (蒼炎) all display properly with no □.

Next up

• The font file is about 23 MB, so the build grows by that much. If needed, shrink it down to a static font with only the hanja I actually use