Kanji Book

I’ve been learning Japanese ever since my first trip to Japan in early 2018. As anyone who has studies Japanese knows, it’s a little more complicated than just a new alphabet with new sounds that make up a new vocabulary to learn. One of the biggest complications in learning Japanese is learning kanji. There are over ten thousand kanji in use, but there’s a set of 2136 that are in more regular use. I figured a good way to get exposed to a lot of kanji would be making a game. I couldn’t crack a mechanic that was both deep and wide enough to cover learning kanji (though I still think it’s out there!), so I settled on a more traditional flashcard-style app. As you learn kanji, the English text in the UI slowly changes to kanji.

Building Kanji Book presented a few new challenges for me. First, finding good data sets. Luckily there are a few really good ones online. After doing a lot of processing to remix and swizzle the data, I had enough JSON and SVG to render kanji stroke-by-stroke, display all its readings, and its definition. With the stroke-by-stroke rendering, I added a drawing mode that let you practice and check your progress after each stroke.

Rendering SVG was new to me. I used a nice bezier spline package for Unity and wrote a SVG parser and then a renderer powered by the spline package. I ended up making editor tools to blit the SVGs to PNGs so I had more options in drawing them. I had a fun moment where I found a bug visually because my SVG parser was missing an instruction. Luckily I had enough exposure at this point to recognize if a kanji ’looked wrong’ and this one did. I found the offending SVG instruction and fixed it and it ’looked correct’ in the diff.

The entry point to the Settings page is a はんこ (name stamp) with the name 鞠琴 .

My stress test for the SVG renderer, a 20+ stroke kanji.

With Kanji Book being mostly data-driven after I normalized all the data, I was able to pretty easily drop in hiragana and katakana datasets to make a simpler Kana Book. This app isn’t strictly necessary, learning both kana sets doesn’t take too long, but it was a fun exercise for me.
