Amazon Q Developer CLIで画像を読ませてゲームを作る

## はじめに
Build Games with Amazon Q CLI and score a T shirtというキャンペーンでAmazonQDevCLIを使用してゲームを作るとTシャツがもらえるというキャンペーンが実施されていたので、例に漏れず私も調整してみました。

## Amazon Q Developer CLIが5/29にターミナルでの画像入力をサポート
こちらの記事を書いている時点で5/31なのですが、直近5/29にターミナルから画像の入力をサポートしたというアップデートがありました。
今回はそれを踏まえて、プロンプトを組み立てていきます。
使ったQ CLIのバージョンは1.10.2です。

```bash
>> q --version
q 1.10.2
```

## 作成したゲーム
![画面録画-2025-05-31-184522.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293947/b6c7499c-6262-405c-b0ad-a3c1e7773cd1.gif)

ス〇イダースイングする横スクロールアクションです。

## 最初のプロンプト
次のようなプロンプトを最初に入力しました。
```
私はブラウザゲームを作りたいです。まずはゲームの内容を伝えるので、適切なファイル名のマークダウンファイルを作成して、そこにゲームが作りやすいように仕様としてまとめて書き込んでください。
このゲームはプレイヤーが粘着性の糸を出しながら障害物をよけて進んでいく横スクロールアクションです。
ゲーム画面全体としては、常に天井があります。
プレイヤーは画面の左端にいて、初期状態では横長の障害物の上にたっています。
スペースキーを押してゲームを開始すると、画面のスクロールが始まり、それに合わせてプレイヤーも走るような動作になります。
プレイヤーはジャンプはできないのですが、画面上の左クリックした場所に糸を飛ばして対象の障害物や天井にひっつけることができます。
左クリックをしている間はプレイヤーは糸を持ち続け、いとも障害物や天井に引っ付き続けます。
糸がひっついている状態で、プレイヤーが足場のない場所へ移動すると、ひっついている糸の長さをもとに弧を描くようにプレイヤーはスイングします。
また左クリックを押している状態で上キーを押すと、プレイヤーは糸を登って糸の長さを短くすることができ、下キーを押すと糸を下って糸の長さを長くすることができます。
プレイヤーは諸具合物の上は移動することができますが、スイング中に障害物の横にぶつかったりするとゲームオーバーです。
また、プレイヤーが下に落ちてもゲームオーバーです。
さらに障害物に阻まれて画像の左端を超えるとゲームオーバーです。

ゲームのイメージ図はgame_image.pngを参照してください。
```

早速CLIに画像を読み取らせました。
使用したgame_image.pngは下図の通りで、ペイントで作ったものです。
![game_image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293947/7400404f-6fb1-4e95-bd68-d058c0dc2ad4.png)

前述のプロンプトにより、ゲームのSPECIFICATION(というのでしょうか？ファイル名を指定しなかったらそのようなファイル名で生成されました)を作成してもらい、確認した後問題なさそうだったので、それに基づいてゲームを画面と処理を作成してもらいました。
![画面録画-2025-05-31-104525.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293947/90383b42-3ede-49a3-a1b7-71153f4fc19c.gif)

見た目はそれっぽいですね！！
初期の足場が短すぎて即ゲームオーバーしてしまうのと、足場にのっているような感じがしないので修正していきます。

## ゲーム修正#1～足場に乗せて、初期足場を長くする～
プロンプトはシンプルに以下です。
```
確認しました。
最初の障害物があまりに横幅が短くすぐにゲームオーバーになってしまうので、もっと長くしてください。
またプレイヤーが障害物の中に入ってしまうので、障害物のうえにたてるようにしてください。
```

![画面録画-2025-05-31-105101.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293947/9d480633-3428-4664-90d6-bc55f9af5d05.gif)

これで最初の足場を長くすることができたのですが、まだ足場の中を移動しています。
他にも修正すべきポイントがたくさんありそうです。

足場の中を移動してしまう問題はプロンプトを何度試してみたのですが改善されなかったので、画像を使って説明します。

```
プレイヤーが立つ位置はplayer.pngを参照にしてください。
```

![player.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293947/5dfce93c-a834-4891-a040-c18a9ce24598.png)

これでうまくいきました。
ゲームは次のようになりました。

![画面録画-2025-05-31-111030.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293947/26368dc4-2b72-432f-9edc-002614ab690a.gif)


## ゲーム修正#2～糸の動き調整～
いい感じに修正できてはいると思いますが、糸をつかんでいるときの動きが不自然な感じがします、、
また動画からは伝わらないと思いますが、上キーを離しているのに上り続けるという問題も発生しています。

```
糸の設置点もスクロールするようにしてください。
また次のような観点で問題があるので、それも修正してください。
１、上キーを離している間も糸を登り続けているので修正してください
２、プレイヤーの左右位置を固定して、障害物がスクロールすることで動いているようにみせてください
３、プレイヤーが糸をつかんでいる状態で、足場から離れたときに糸が弧を描くようにスイングさせてください
```

厳密にいえばもう少し細かくプロンプトのやりとりをいたしましたが、だいたいそのようなことを伝えて冒頭に乗せているゲームの状態が作られました。

## 作ってみた感想
普段エンジニアをしているわけではありますが、ゲーム作り自体が初めて＋プロンプトのやりとりだけでプログラムを組み立てることが初めてというわけで新鮮でした。

また、普段から思う事ではありますが、生成AIが手を動かしてくれているとはいえ、「機能を満たす要件を正確に伝えられること」「生成された成果物を正確にレビューできること」が大事だと改めて思わされました。
例えば最終的にできあがったものでも、かなり不自然な動きをしています。
これをより自然に仕上げるために、どのように何を伝えればいいのかを私は正しく理解していません。
きっと修正するにしてもかなり試行錯誤することになるでしょう。

ゲームクリエイターって本当にすごいな、、

以上、ありがとうございました。