Kent Chua

Character stroke order system

Color palette system

Romaji to Hiragana & Katakana typing gameplay

Hiragana & Katakana charts

Steamworks integration and steam leaderboard

One of the features that took a lot of time and patience.

It started out with finding solutions to animate each stroke.

I thought about animating each stroke but then that would mean I had to animate up to 140 characters. Very tedious!

Eventually, I landed on the idea of using a pair of Bézier Curves to map out the edges for each character stroke. One specific reason for this choice was that the font I used for Kana has a consistent width and shape.

To start, I had to learn how to read a font file and this was the tough part of the process.

I knew nothing about parsing bytes from a font file but thankfully a video by Sebastian Lague helped me a ton.

Still, I had to read through documentation by Adobe (about Type 2 Charstring & CFF Specification) as the font I used was a CFF embedded in an OTF file.

And after weeks of reading and implementing the rules for converting bytes into data types, I managed to output the characters' font data onto my monitor. I felt victorious.

With that accomplished, I moved on to creating a hacky editor script that allowed me to create character stroke data by converting the font data into bézier curves.

Then, I used mesh generation to generate the strokes. Since each stroke contains a pair of bezier curves with the same amount of segments, I could use the distance traveled along a segment to generate an entire stroke progressively from start to end (as shown in the video).

In hindsight, I was happy with the result as I was able to make a feature where users can practice writing out character strokes. Moreover, I get to learn about Bézier Curves with this approach, compared to animating the strokes frame by frame.

As the game went towards a more minimalistic style with a limited set of colors, I thought that it was a great opportunity for me to implement a color palette system that lets users customize the visuals.

The popular approach that I know for coloring elements on screen with a fixed set of colors was using a post-process shader which converts a pixel that fits a rule into a designated color (e.g. a pixel with RGB values less than 0.25 will be set to one color).

For me, I went for a Component approach where it controls the color of visual Components like Image, SpriteRenderer, etc. Then, I would use a Singleton where all Components will grab the palette colors from and update the colors accordingly.

My reasoning behind this was because I wanted certain elements to have transparency. The shader approach wouldn't work since transparency would affect the result of a pixel which messes up the rules for converting.

Once I had the system going, I learned to make an EditorWindow where I could create color palettes easily.

Additionally, I created an in-game editor so players can create their own palettes.

It was a good learning experience and I had a lot of fun making this system.

In Kana, there are a bunch of modes which require guides so users can understand how they work.

So, I made a guide system that is made up of steps for a guide player to go through. Each step can contain multiple substeps where they do different things (e.g. changing a text, moving a UI element, disabling a GameObject, etc.).

In retrospect, I wished I had more knowledge for making editor tools as setting up the guides was very tedious. Each step stores serialized data and they were displayed in a way that's hard to read and edit.

How I would improve it would be to make a node editor tool, where each step is a node and I can move the nodes around and organize them.

Build automation from Unity to Steam

Making editor tools

Use Tweening libraries

Do frequent playtesting to prevent tunnel vision

Even though I couldn't work on it consistently due to other ongoing projects, I managed to follow through and publish my first game on Steam!

I get to learn a lot of new things and I am satisfied with how it turned out.

Off to new adventures!