こんにちは。
AWSのKiroを試す機会があったので「ブラウザで動く弾幕シューティングゲーム」を作ってみました。Kiroを使った気づきをまとめてみます。
作ったもの
ホーム画面
index.htmlを開くとブラウザにゲームのホーム画面が表示されます。技術スタックとしてはHTML5 CanvasとJavaScriptを使用しています。タイトルにSpecter（幽霊）とありますが、Kiroのアイコンはこの単語に由来しているそうです。
ゲーム開始
ゲームを開始したところです。
- 画面が右側25%のメタデータ部分と残りのフィールド部分に分割されます
- メタデータ部分はスコアや体力とボムの残数、パワーの現在の値、FPSが表示されます
- フィールド部分には自機としてKiroのアイコンが表示されキーボード入力で上下左右に動いたり、通常弾やボムを打ちます
道中
道中でボムを使用したところです。
- 爆発エフェクト（画面振動・フラッシュ）が起こり、範囲内の敵の弾を消去しダメージを与えます
- 敵機（AWSアイコン）は撃墜されると爆発エフェクトを表示し、パワーアイテムを落とします
- パワーアイテムは自機の近くに来ると吸い寄せられ、拾うとパワーが増加します
- パワーが増えると自機の通常弾が段階的に強化されます
- 敵機はこの画面で5-Way弾（赤）とホーミング弾（オレンジ）、ばら撒き弾（カラフル）を打っています
ボス
ボスと戦っているところです。
- ボスがらせん状全方位弾（緑）、自機狙い弾（赤）、ばらまき弾（カラフル）で襲ってきます
- 弾幕はもっと厚く独創的にしたかったのですが、スペックと時間の都合上諦めました
- フィールド上部にボスのHPゲージが表示されています
- 自機は低速移動中。低速移動中は当たり判定が白丸で表示されます
気づき
作りたいものが複雑な場合、一度プロトタイプを作ると良い
Specモードで「東〇っぽい縦スクロールシューティングゲームを作って」とKiroに指示するところからアプリを作ったのですが最初は生成された仕様文書の中身をあまり確認せずにタスクの実装に移りました。
結果、画面の表示のされ方や弾幕の描写など細かいところでなんだか違うなという点がどんどん積み重なりました。指示をしても実装に引っ張られてしまうのかあまり改善せず、微妙なものができてしまいました。
（没にした成果物）
そこで全部一度ボツにして再度Specモードを試しました。今回はドキュメントを細かく確認し、欲しい要素の詳細を文書化して仕様に詰めこみました。結果イメージに近いものができました
このことから作りたいものが複雑な場合は、可能であればまずプロトタイプを作って詳細なイメージを具体化してからSpecモードで開発するとよいと思いました。(仕様を詳細化するためにSpecモードで一度開発するはもちろんあり)
テストは必要十分か確認する
Kiroはまとまったタスクごとにテストを自動生成して実施してくれます。私はズボラなので生成されたテストが通ったら次のタスクに進みたくなるのですがテスト内容が必要十分か確認が必要です。
例えば、Kiroが「弾幕パターンクラスのテスト終わりました！」というので確認してみたら、敵弾がプレイ画面のメタデータ部分まで飛び出ていました。
そうか確かに明示的に指示してないもんなと思いつつ、全てを指示し切るのは不可能なので適切に確認しましょう。
今回は使う機会がありませんでしたが、Agent Hooksを使うと決まったテストの実行を自動化できるので活用してみたいです。
こまめにコミットすると良い
Kiroに軽微なバグを報告して、「直った」と報告を受けた後にアプリを動かしてみたら今度は画面全体が固まってしまった、みたいなことはよくありました。
Kiroではタスクごとに変更履歴が保持されており「View changes」から確認できますが、こまめにコミットしておくと、後からすぐに戻れるので良いです。
コミットにあたってコミットメッセージ自動生成機能がKiroに最近追加されたので活用するとよいでしょう。
Kiroにバグ潰してもらったあとは掃除する
Kiroとの複数回のチャットでバグを潰したあと、デバッグのためにKiroが追加したコードがそのまま残り続けることがありました。別途人力でお掃除しましたが、解消したらバグに関係ないコードは自動で掃除してくれると嬉しいなと思いました。
仕様Aの実装中に、ドキュメントの変更なしに別仕様Bを追加しない
ある仕様Aの実装中に追加の仕様Bを思いつくことがありました。仕様Aとの関連性が低い場合は別のSpecで実装するのが良いでしょう。
悩ましかったのは仕様A-B間で関連性がある程度あったり、仕様Bが仕様Aの具体化にあたる場合でした。仕様Aのタスクのチャット内で設計文書への仕様Bの追加をお願いしたら、関連性があるタスクにも関わらずタスクリストの最後尾に定義されてしまいました。なのでここは人力でドキュメント修正してしまいました。(プロンプト工夫すればうまく行けたのかもしれません。)
Kiroとやり取りする中で設計ドキュメントにない仕様Bが追加されそうになったら「仕様の追加になりますが良いですか？」などと注意喚起してくれたり、仕様文書を自動的かつ自然にアップデートしてくれるとより良いと思いました。
言葉で説明しにくい内容は画像を活用する
KiroはマルチモーダルなAIエージェントで画像も入力できます。
例えば最初に見せたホーム画面では最初Kiroはいなかったのですが、以下の画像を添付して「HomeScene.jsの赤丸部分にimg/player/kiro.jpgのアイコンを半透明で表示したい」とお願いしたら追加してもらいました。
実際のアプリケーションだと、画面の表示崩れの修正などに活用できそうですね。
また、シューティングゲームの場合、ボス用の特別な弾幕について、画像を使ってここに何秒とどまって、こう移動して～と説明すると軌道の具体的なロジックを考える手間を省けそうなので試してみたいです。
まとめ
Kiroで弾幕シューティングゲームを作ってみたお話でした。
作成時間は15時間程度で、初回利用のボーナスクレジット（500クレジット/2wの期限）を利用して全部無料の範囲で組めました。みなさんもぜひ試してみてください！