AIにタイピングゲームをつくらせてみたらゲームシステムの開発より日本語入力の判定に難儀した件
Amazon Q CLI でゲームを作ろう Tシャツキャンペーン を見かけたのでやってみました。
ちなみに私自身は、普段は仕事の関係でウェブ系のコードを触ることには慣れていますが、ゲームをつくることはやったことがありません。
AIに話しかけるように指示するだけで、こんないい感じのタイピングゲームを作れました、という話とそれまでの過程の苦労、AIの可能性を探ります。
とりあえずステップバイステップガイドに沿って進めていきます。
- Amazon Q の Builder ID 登録
- Amazon Q CLI をWindows WSL2 にインストール
- Pygame をインストール（Pythonは使ってないけど）
- Amazon Q CLI とのチャットセッションを開始し、チャット内のプロンプトだけでゲームを作成
WSL2 を入れなおして、空っぽの状態にしました。NodeJSとか、Pythonとか何も入ってません。
1.～3.までサクッと進め、プロンプトだけでゲームを作成していきます。AI向けに要件定義書をつくって開発、なんてのもよく聞きますが、会話をするように進めていきます。
登場人物
- オレ ・・・ この記事を書いた人
- Amazon Q ・・・ AmazonのAI
ゲーム制作開始
オレ@タイピングゲームをつくってください。
すると、Q はHTML/VanillaJS で作り始めました。※VanillaJS = JavaScriptと同義で、フレームワークやライブラリを使わず（依存せず）に書くJavaScriptのこと
（Python つかえや。せめて開発言語とか聞けや）と心の中で思いましたが、指示があいまいな上司はだいたい嫌われる。反抗されるんです。指示がないなら、つくりやすい環境でつくるのが一番ですよね。
できたようなので、まずはどんな代物か見てみましょう。
「タイピングゲームをつくってください」というプロンプトでできたゲーム
ゲームを開始、バグが多々ありますが、ちゃんとタイピングゲームしてます
プロトタイプ完成（まだまだ先は長い）
プロトタイプ完成（まだまだ先は長い）
操作方法とかはないですが、なんとなくわかる。そんな画面ができてます。スコアや秒数、WPMと計測する機能もあるっぽいです。
「タイピングゲームをつくって」という指示とも言えない簡単なやりとりでそれっぽいものができる。とんでもない時代になったものだ。
細かい修正をしていく
日本語の変換不要に
個人的にはローマ字入力で変換なしで、タイピング速度だけを単純に計測したかったので、それを指示しました。
オレ@漢字やカナ変換が必要だとIMEの性能が入力速度に影響すると思います。入力するテキストの表示は漢字でもひらがな、半角全角英数字、記号を受け付けるようにしてください
ローマ字入力を受け付けるための修正が始まった。
これが悪夢の始まりになるとは、この時のオレはまだ知るよしもなかった。
変換なしで受け付ける修正が完了した
「学校」⇒「がっこう」「gakkou」でもOK
まだ改善点はありますが、UIを調整しようと思います。まずはローマ字表記をわかりやすくしました。
ローマ字表記と入力が合わない問題
ローマ字表記がわかりやすくなって、重大なバグに気がつきました。
ローマ字表記には、入力と発音が混ざってしまってます。テキスト入力では「konbanwa」は誤りなので修正させます。まずは入力例にあるのに赤くエラー表示になるバグを直させました。
オレ@「こんばんは」だと「konbanwa」でも「konbanha」でも通りますが、ローマ字の入力ガイドで「konwanba」と表示されているときに「konbanwa」と入力すると赤いエラーが表示されますが、入力が通ります。「konbanha」など表記ゆれがあった場合は、入力ガイドも差し変わるようにしてください。
修正が終わり動作を確認すると、タイピングゲームとして致命的なバグが残っています。ti, chi など日本語の様々なローマ字入力に対応していません。
React で作り直させた
日本語の入力については課題が山積みです。この辺りの修正に時間を取られても進まないので、次のタスクを進めることにしました。
VanillaJSから React で作り直し
大枠は VanillaJS で問題ありませんが、実装が複雑になるとコードが複雑になり、今後の保守・メンテナンス性など、何かしら影響が出てぶつかるはずです。
そこで機能の少ないうちにコードを React に書き換えてもらいます。最初に指定すればよかったですね。
オレ@モダンな開発環境にしたいので、 react で作り直して
React でつくってと指示したら、nodejs の存在するかなど開発に必要な環境なども調べて勝手に進めてくれます。
React 版が完成したそうですが、立ち上げると真っ白の画面になりました。フレームワークの導入や入れ替えという大きな変更にはバグがつきものですね。修正してもらいましょう。
オレ@起動しても画面が真っ白になります。直してください。
これくらいの「いつ、どうなる」くらいの指示を出せば、AIさんは環境を立ち上げた時のエラーをチェックして直してくれます。
React 版の完成
修正が終わり、React 版ができました。機能も問題なく引き継がれています。
ゲームらしさの実装
今のままではただ文字を入力するだけでしかないので、ゲームっぽくしていきます。
サウンドエフェクトの追加
ゲームは操作に応じた音がなりますね。ゲームっぽくするために、まずSEを追加します。
オレ@キー入力の度に子気味のいいタイプ音がなるサウンドエフェクトをつけて。BACKSPACEキーやESCはエラーを彷彿とさせる音にして。
指示するのは音の鳴るタイミングくらい。それだけでいい感じの電子音をつけてくれました。正解やクリアの音は高音で、間違いやエラーは低音と、使い分けもバッチリです。
ただ、やはりＱは英語入力で考えるのか、日本語入力への対応は指示しないと難しいようです。
日本語入力中は音がならなかったので、修正してもらいます。
オレ@日本語の入力中に音がなりません。入力値の変化ではなく、キーを押したことに対して音を鳴らしてください
日本語の入力中も、キーを押したときに音が鳴るようになりました。
さらにゲームっぽさを加えていく
RPG調にしたりバトル要素を加えたり「ゲームっぽさ」を加えていきます。
オレ@中世ファンタジーRPGの世界観にして。現れたモンスターをタイピングで倒すバトル要素を加えて
オレ@モンスターは入力させるテキスト表示の上に表示して
オレ@モンスターはスライム、ゴブリン、ドラゴンなど種類ごとに強さを変えて。モンスターの強さは体力、攻撃、防御、素早さで決まる。攻撃ゲージを実装して。タイプミスでモンスターの攻撃ゲージが溜まり、満タンになるとプレイヤーに攻撃し、プレイヤーの体力が減る。素早さが高いほどゲージが溜まりやすい。
一回の指示で数分かかりますが、実装とバグ修正を繰り返していきます。
入力の細かい挙動に目を瞑れば、十分ゲーム要素のあるタイピングゲームが出来上がりました。
入力の挙動は修正すればするほどコードが複雑になったので、諦めて最初の仕様に戻しました。（変換後の文字だけ受け付ける）もちろん仕様を戻すのもAIに「こういう挙動にして」と指示して、直してもらいました。
このあたりの差し戻しは、gitで細かく管理しておけば、コミットのハッシュ値を指定するだけで戻せたりするのかな？
所感
今回のAmzon Q CLI をつかったゲーム開発。AI向けの要件定義書を用意せず対話形式で進めました。2時間くらいで終わらせようと思いましたが、つい楽しくて続けてしまいました。
コーディングに特化したAIエージェントでは当たり前になっていますが、複数ファイルに関わる修正も1回の指示でできるのは素晴らしいですね。指示の回数は、修正指示の出し方の工夫次第で減らせられそうです。
特に、リプレース、フレームワークの導入といったプロジェクト全体に関わる大きな改修では、一発目は起動しない状態で「できたよ」とか言ってきますが、そこはご愛敬。
また、2D 向けの pixijs から threejs（react3fiber）にも入れ替えてみました。
モンスターの表現が3Dオブジェクトになり、強いモンスターほどポリゴン数が増える感じです。
表示されるテキストもファンタジーRPG寄りになっていました。
ゲーム要素を加えたあとで機能は増えており、入れ替えでなぜか引き継がれなかった機能も多くありました。サウンドや攻撃の仕組みも引き継がれず。
機能を復活するよう修正を何度か繰り返しました。
差し替えるだけでも別の要素を加えたり変更したり、きちんと引き継げなかったりしますが、このあたり人間が指示をきちんと出して、動作確認、修正指示をすれば、人間より確実に仕事してくれるんじゃないかと可能性を感じられる体験でした。
Amazon 謹製のサービスということで、他サービスとの連携がどうなるか楽しみです。
Discussion