🔤 ひらがなの中を探索して当てるゲームを作ってみた

🔧 技術的な話

WebGLと3Dライブラリの選択

本作はWebGLで3D表示しています。私は普段、WebGLのラッパーライブラリとしてPixi.jsを愛用しているのですが、これは2D専門のライブラリです。今回は3D表現が必要だったため、3D専門のThree.jsを採用しました。

AIと形状認識の壁

「AIに投げればなんとかなるでしょ」と思うかもしれませんが、うまくいきません。

AIは文字の形状認識がうまくできないのです。私はGitHub CopilotでClaude Opus4.5(Preview)を使っているのですが、実際に試してみると非常におかしな形の壁が生成されました。

逆に言えば、形状認識ができる適切な方法を教えることができればよいわけです。ここは人間がアルゴリズムを与えてあげましょう。

文字を迷路に変換するアルゴリズム

ぱっと思い浮かぶ方法として「Canvasのようなドット指定できる描画領域に文字を表示して、その領域のドットが塗られた部分を道として開ければよい」という方法があります。

今回は32×32のグリッド領域を用意して、その中に文字を描画。塗られた部分の壁を取り払うことで迷路を生成しています。

ただし、実際の文字はアンチエイリアスによって、塗られた部分と塗られていない部分の間に半透明の領域が存在します。

右側部分のオレンジ色が半透明のピクセルになります。この部分は閾値を設定して、人間が見栄えを調整して壁にするか決めます。人間が考える「見栄え」というものは、AIにはまだ理解できない領域なのです。

ワープゾーンとFlood Fillアルゴリズム

さて、このような迷路を作成したとき、ひとつ問題が発生します。文字によっては二か所以上の離れた領域ができてしまい、歩いてたどり着けない場所が出てきます。

これを解決するためにワープゾーンを設置するのですが、この部分のアルゴリズムも人間が指定する必要がありました。

今回採用したのは、ペイントソフトの塗りつぶし機能と同じアルゴリズム「Flood Fill（フラッドフィル）」です。

この方法を提案したところ、見事にうまくいったので採用しました！画像上の部分がワープゾーンになっており、『ほ』の両側に移動することができます。

その他の工夫

この後も、方位磁石をつけて現在の向きをわかりやすくしたり、カメラの画角を広げて周囲を認識しやすくしたりと、様々な工夫を重ねて完成となりました。