Visual Scriptingでタイピングゲームを作る（Unity）

UnityのVisual Scripting（旧Bolt）で、複数のローマ字入力に対応したタイピングゲームを作ってみた記録です。ビジュアルスクリプティングでここまでできる実例、あるいは大変だった開発の思い出として書き残しておきます。

結論から言うと、ビジュアルスクリプティングでタイピングゲームを作るのはおすすめしません……。

なお作ったゲームはunityroomで遊べます。制作の振り返り記事は以前書きました。

以下はグラフの全体図と、簡単な部分解説です。

グラフ全体図

タイピング部分は1枚のグラフで制御しています。縮小表示しても1画面には収まらず、等倍で撮影したかったもののスクロールキャプチャが上手くいかず……。

振り返ってみるとあまり整頓されていません。自分が分かればいいノートみたいな感じです。ノードの置き方には性格が出ると思うのですが、周りにビジュアルスクリプティング使用者が全然いないのでサンプルが得られずにいます。

一つのグラフに大量のノードがあると動作が重くなるので、なるべく役割ごとに分割したほうがいいとは思います。

キー入力

一番目を引くのは左下のキー入力部分だと思います。ローマ字の対応キー全てに処理を作っています。最初は「いずれかのキーを押された時にどのキーなのか取得する」方法をとっていたのですが、それだとその後の処理に不具合が出てしまうのでやめました。具体的には同フレームの高速入力や同時押しでバグってしまったからです。

Sequenceにつなげることでノードをまとめていますが、正しい方法かは分からないし他に良い方法があるのでは。

複数の入力に対応する

この部分の理解に多くに時間を費やしてしまいました。以前タイピングゲームもどきというかキーを順番に押すだけのゲームを作ったことがあったのですが、ちゃんとした日本語文章のタイピングゲームを作るのは初めてで何も分かっていませんでした。

• 日本語の例文をひらがなで用意する
  • びじゅあるすくりぷてぃんぐ
• ひらがなの例文を1文字ずつに分解する
  • 条件分けが必要で、拗音がある場合、撥音がある場合、んが前につく場合はそれを含めて分ける（1~3文字に分解される）
  • び/じゅ/あ/る/す/く/り/ぷ/てぃ/んぐ
    • このブロックごとに入力が正しいか判断する
• プレイヤーが入力した文字が合っているのか、まずバッファー（仮の入力枠）に入力された文字を保存する
  • 入力「b」
    • Dictionaryの内容と照らし合わせてそれが正しいか判断する
      • 「び」はbiしかないので「b」は入力途中、OK
      • 入力されたのがそれ以外なら間違い。バッファーの最後尾の1文字を削除。
  • プレイヤー入力「i」
    • バッファーの文字が「bi」になった
      • Dictionaryと一致、正解！　バッファーの内容を全て削除して次の文字に進む

こうして1文字ごと判定しています。

かな→ローマ字対応表

ローマ字対応表を用意するのがけっこう大変でした。このリストは自分で作るとかなり時間がかかるので、先人が作ったものを使わせてもらうと良いです。私は途中まで作って挫折しました。最初からお借りすればよかったです。

こちらでjson形式の入力データを配布してくださっています。感謝そして感謝。

私はjson形式の使い方を知らないので、JSONをCSVに変換して、結合（TextJoin）して長い1文にするという遠回りをしました。

それをUnity内でSplitで切り分けてDictionaryに入れるという作業をしています。どうしてこんなことに……。

これで複数の入力方法の辞書ができました。

Dictionary機能は今回初めて使いました。Listだと１つの列に１つのものしか入れられなかったのに、これならいくつも入るのでかなり便利です。まだちゃんとした使い方はわかっていませんが……。

例文の分割

例えば「よんじゅうに」なら「よ/んじゅ/う/に」と分けられます。

この部分もかなり時間がかかりました。条件分けをするだけですが、全部理解していないと物理的にもこんがらがります。特に「んじゅ」などの3文字を判定するケースが混乱を招きました。

一度作ってしまった今ではもっと最適化できると思いますが、最初に作るのはなかなか大変でした。

バッファ

入力した文字をバッファ（という一時保管用の変数）に代入します。

入力された文字を一時的に保持して、それが辞書の内容と一致するか、入力途中か、ミスかの3パターンを判定します。

seikaiとかbubunittiとかそういう変数名を使うべきではないと思います。

更に部分一致でかつ辞書の先頭に記載された入力方法と違う場合の処理も行っています。今見返すと理解が追いつきませんがちゃんと動いています。

ミスしたらバッファの文字を1文字削除します。

グラフの他の部分はスコア判定などで地味なので省略します。

余談

先にムービーの脚本を思いつき、ついでにタイピングゲーム作りに挑戦してみました。タイピング速度に応じてムービーの速度や展開が変わる予定だったのですが、アイガモがかわいそうな目に遭うのは耐えられなかったためGameOverはなく、内容もムービーのおまけに徹するような仕様となりました。ムービー部分は概ね好評で良かったです。

ムービーだけYoutubeかどこかに……とずっと準備しているのですが全然完成しません……。演出を足したり音声を差し替えたり凝り始めてしまって……勢いで適当に仕上げるのが一番だと思います。

追加された衝撃波。軽く小突いているだけで無事です。田んぼのサメも摂理を超越した生き物なので、完全に倒されたわけではないのでは。

心象風景のキラキラが足されました。

3DモデルはTripo製で、微調整とボーンを入れるなどの編集をしています。

おわりに

ビジュアルスクリプティングでタイピングゲームを作るのはあまりおすすめしません……。特に複数のローマ字入力方法に対応したタイピングは、見ての通り作れなくはないものの、あまりビジュアルスクリプティング向けではないです。

C#ならサンプルはたくさんあるので困ったらコピペで済むと思います。AIコーディングもあるし……。Unityではアセットとしてのシステムの配布もあるので、自力で一から作る機会というのはそもそも少ないのでは。

ビジュアルスクリプティングで日本語のタイピングゲームを作っている人が世界に何人いるかは分かりませんが、おそらく熱心な教育者か、ちょっとした修行者では。おすすめはできませんが、面白い経験でした。