AWSのイベントとして、「Amazon Q CLIでゲームを作ろう Tシャツキャンペーン」という素晴らしい企画を発見しました。
私は、これまでAIエージェントを使った開発に興味はあったものの、Clineを少し触った程度で
それ以降の開発はChatGPTを相棒にして自力で開発を行なっていました。。。
というのも、AIエージェントを使うとブラックボックス化してしまい、
その後のメンテナンスがより煩雑になってしまうためです。 （プロンプトが良くないだけ。。）
学習のためだけにAIエージェントを使って開発するのもあまり意欲が湧かず停滞していたところ、
Tシャツが貰える！！！ というワクワクする企画が自分に丁度よい！と思い、参加しようと考えました。
ただ、発見したのが、6月13日の夕方でこの企画の終了日が6月20日でした。
この時点では、Amazon Q CLIがどのぐらい開発の手立てになるのか分からず、
無料枠内に完成させられるか。。などと弱腰モードに突入しかけていましたが、
とりあえず完成することができたのでブログに執筆します。
Amazon Q CLI だけでゲームを作った。
ゲーム内容
今回は、パックマンのようなゲームを作成しました。
プレイヤ「私」を操作して画数の少ない漢字順に獲得していくゲーム内容です。
敵や順番を飛ばした画数の多い漢字を触れるとゲームオーバーです。
ゲームリンク：漢字収集ゲーム
実装方法
きっと要件をまとめたり設計して、それをインプットするんだろうな。。と思いつつ
AIエージェント初心者の私は、早速実装に移りました。
テーマは「パックマンのようなゲームで画数の少ない順の漢字を獲得するゲーム」として、
言語は、「React」でデザインは「ネオン」しました。
>q questionと入力し、その旨を伝えました。
みるみるうちにコードが生成されていき、要件が少なかったためイメージとは乖離していましたが、
ベースは作成されました。
その後は、以下をプロンプトをリクエストしてゲームの調整しました。
- プレイヤーの操作方法
- 敵の動き
- ステージの生成
- ゲームオーバー条件
- ゲームクリア条件
- レスポンシブ対応
- 細かなUI修正
具体的には以下をAmazon Q CLIに打ち込みました。
プレイヤーの操作方法のリクエスト
- プレイヤーは、上下左右に動く
- キーボードのキーと上下左右の移動をリンク付け
- スマホのときは、矢印ボタンを設け、矢印キーと同じ動作をする
敵の設定や動き
- プレイヤーの停止時は、1s毎にプレイヤに近づく
- プレイヤーが移動時は、プレイヤーが2マス移動する度に1マス近づく
- レベル1のとき敵は2体でレベルが上がる毎に最大4体まで増える
ステージの生成
- 回転対称なステージをランダムに生成
ゲームオーバー条件
- プレイヤーが次獲得するべき画数以外の漢字とあたったとき
- 敵とあたったとき
ゲームクリア条件
- 画数が小さい漢字順に漢字を獲得した時
レスポンシブ
- スマホ画面のときは全体を描画せず一部（縦横を8*8)描画する
- スマホの時は矢印ボタンを表示させ操作可能にする
細かなUI修正
- 左右にスクロールさせないようにする
- 操作時はスクロールさせないようにする
- ゲームオーバーやゲームクリアの表示はモーダルで表示させる
- 次の画数の漢字は30秒経過後に黄色にする（ヒント）
実際には、的確なプロンプトをリクエストできず、
遠回りをしましたが、主にこのような内容をリクエストしました。
ちなみにスマホ画面のときはこのような感じです。
苦労した点
-
敵の挙動
今回は設計書とかもなく、思いつきでこのゲームを作成した次第なのですが、描画のされ方的に、
プレイヤーが動く時、ランダムに敵を動かすということができませんでした。つまりプレイヤーが動いている時は、敵は停止しているということです。
なので、プレイヤーが停止時に敵は自動的に移動して、
プレイヤーが移動時には、プレイヤーの移動（キー押下等）にあわせて動くように設定しました。 -
Amazon Q CLIの使い方
一つ目にコンテキストです。
> q やらコマンドで機能を使えるようになりますが、
私は対話セッションに入ったまま、ずっと作成を続けていました。
すると、質問一つに30分程度回答待ち(thinking...)みたいなのがずっと続いて軽微の修正すら時間がかかりました。
そういうものだと思って「Tシャツ」のために頑張って作成していた訳ですが、実際は、コンテキストが蓄積されていることが原因で処理が遅くなっていました。
私は、>qを打ち入った後に、>q code fix xxxみたいに勘違いしており、コンテキストがリセットされず負荷が上がっていたようです。
>/quitで抜けて>q chatとして入り直したらスムーズになりました。
関連することに関しては、同じチャットでいいですが、
別件であればchatを抜けた方がスムーズでした。
下の画像のように打ち込んでいました。（だいぶ誤法です）
二つ目は、ChatGPTのエラーです。
Amazon Q CLIを使っているとき、以下のようなエラーが多発しました。
要因は、コンテキストをリセットしていなかったことだと思われます。
Tool validation failed:
Failed to validate tool parameters: missing field command. The model has either suggested tool parameters which are incompatible with the existing tools, or has suggested one or more tool that does not exist in the list of known tools.
私は日本語を使っているため、内部的に、ChatGPTを呼び出しているようで、結果としてAmazon Q CLIがハングアップしてしまいました。
反省点
実装面では、
- tsを使いたかったのですが指定し忘れてjsを使ったこと←まあいっかでプロンプトを続けたこと。
- ファイルを1ファイルにまとめてしまったこと。
生成後、Syntax Errorやらバグが頻発していたので、その修正で
時間と無駄にトークンを消費してしまいました。
さらに関心の分離をしなかったため、ブラックボックス化やトークンの消費を多くなりました。
Amazon Q CLIの良かった点（感想)
-
リクエスト通りに実装してくれた
プロンプトに細かく設計やUI、デザインを伝えても、イメージと違うということが多い中、Amazon Q CLIは、イメージ通りなことが多くスムーズに進められました。 -
無料枠が多い
月間で使用量は定められているものの、ミニアプリ程度であれば作成することができます。
効率よく開発すれば、さらに凝ったアプリも作れそうな感じでした。私は修正箇所が多く、無料枠の消費が激しかったので今回のゲーム制作で無料枠を使い切ってしまいましたが。
残っている不具合や実装したかったところ
ゲームとしては成り立っていますが、もう少し修正したかったことがあります。
-
スタート画面の実装
スタート画面を設けるのを後回しにしたため、実装できませんでした。
そのためロードした途端、ゲームがはじまります。 -
スマホの操作
スマホの矢印ボタンを長押しで連続移動機能を設けたかったですが、
思わぬ不具合が発生したため、実装を元に戻しました。
さらに言えば、矢印ボタンを設けず、プレイヤーを中心に盤面をクロスに区切り
その位置をクリックすると1マス移動するようにしたかったです。
-
敵が増殖するバグ
敵がたまに増殖します。
起因はわかりませんが、敵移動時に描画しているわけですが、
一つ前のターンにいた敵が消えず残り続けてしまうバグがありました。
このバグは未解決です。 -
BGM
ゲームといえばBGMが欲しいですよね。。。
未実装です。スタート画面を設けたら、そこでBGM再生の認否を設定できるようにするつもりでしたが、
無料枠で実装できず。 -
ステージの生成方法の設定
プレイヤーと漢字の生成位置は盤面上でランダムです。
たまに無理ゲーに生成されるため、それを防ぐようにしたかったです。 -
敵の動き
動きが単純で、壁があった時に敵が近づこうとしないことがあります。
縦移動後、横移動のように組まれているため。
そのため、縦移動横移動でつまったときは、横移動縦移動に変更されるようにしたかったです。
感想
「Tシャツ」企画のために登録・利用してみましたが、使い勝手が良く利用価値があると感じました。
今後「Cursor」や「Claude」等他のAIエージェントも検討して、最終的にどれかを主体として使っていきたいと考えています。
今回初めて知ったAmazon Q CLIも使い勝手が良く、今後のアップデートも楽しみです。