Amazon Q Developer 無料枠でゲーム開発！配達ゲーム制作体験談

# はじめに
「Amazon Q CLI でゲームを作ろう Tシャツキャンペーン」にエントリーしました。生成AIを使ったゲーム作成です。

https://aws.amazon.com/jp/blogs/news/build-games-with-amazon-q-cli-and-score-a-t-shirt/

# 作成したゲーム
小鳥のメイメイが、世界中に配達をするゲームです。国境なし、相互関税なしです！  
日、英、中の３言語に対応しています。この画像クリックで、ゲームができます。  
[![スクリーンショット 2025-06-08 20.13.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155165/33cf786e-2afd-441e-b692-85b842a90917.png)](https://y-shima.github.io/delivery-bird/)

配達先は3か所から選びます。寄り道をして、配達を受けることもできます。  
![スクリーンショット 2025-06-08 20.14.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155165/bf8f25ef-92a1-4ebb-9914-5ade9eaef66a.png)
都市名の知識と運が必要です。  
![スクリーンショット 2025-06-08 20.20.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155165/b957fa81-3905-4e9f-ac6b-26979e12c902.png)


GitHubでホスティングしました。

https://y-shima.github.io/delivery-bird/

ソースコード

https://github.com/Y-Shima/delivery-bird

# 先に感想
Amazon Q Developerにハマっています。楽しいです。 
今回は、応募のためにFreeモードを使用しました。  
途中で今月分の無料枠を使い切ったようです。そのため、修正したい点やバグをたくさん残したままです。途中ですがゲームが動作するところまでは作成できましたので、Tシャツプレゼントに応募します。  
# Tシャツ応募のためのルール
ルールをおさらいします。引用も記載します。

1. **使用する生成AIはAmazon Q Developer Freeモードのみ**
`AWS Builder ID に登録し、このリンクから独自の community.aws ユーザー名を取得してください。`

2. **ゲームエンジンは使って良い。プラットフォームはなんでも良い。** 
`PyGame または他のゲームライブラリをラップトップにインストールしてください。`

3. **チャットのプロンプト指示だけ使える。**  
  他の生成AIを使ったり、外部で生成したコードや画像などコンテンツの持ち込みはNGとする。  
`Amazon Q CLI とのチャットセッションを開始し、チャット内のプロンプトだけでゲームを作成しましょう。`

4. **MCPは使って良い。**
  特に記載が無いので、使用します。Amazon Q Developerも対応していますし、今どき使わない開発は無いでしょう。

オリジナリティを持ったゲームを作ります！

# 作成計画
次の手順で進める計画です。
1. ゲームの基本を作成
2. タイトルとゲームモードを作成
3. キャラクター画像のスプライトを作成
4. 効果音、BGMを作成

Webアプリをプラットフォームに選びました。  


## 準備
次のMCPを組み込みました。
- AWS MCPのCore MCP Server
  プロンプトを深く理解する
- AWS MCPのAmazon Nova Canvas MCP Server
  画像生成

https://github.com/awslabs/mcp

- Microsoftのplaywright
  Webアプリの画面確認用

https://github.com/microsoft/playwright-mcp

- fetch
  Webアクセス確認用

https://github.com/modelcontextprotocol/servers/tree/main/src/fetch

## 1. ゲームの基本を作成
まずおおまかにゲームを作ります。  

```
かわいい小鳥のメイメイが、世界の都市に物を配達するゲームを作ります。
3分間でどれだけ配達できるかを競います。
メイメイは白ベースの可愛い小鳥です。
まず、スタートの都市で3つの配達先を提案されます。1つを選んで配達をします。
3つの都市の報酬が、近い順に$100,$300,$800です。都市に到着すると、新たに配達を依頼されます。
配達先は、世界の主要都市100都市ほどです。
メイメイはカーソルで動作します。左右で回転、上下で5段階のスピードを切り替えます。
妨害する鳥がアタックしてきて、触れると5秒間足止めになります。画面外から現れて、画面に1~2羽いるようにしてください。
妨害する鳥は、基本的に動いていて、3種類いて、正確によって色違いです。赤はプレイヤーに向かってくる、黄色はランダムに飛んでいる、青は先回りしようとするなど、いい感じにしてみてください。
時々パワーアップアイテムが落ちていて、取ると10秒間スピードが2倍になります。
画面の3/4がプレイグラウンド、1/4が、HI-SCORE,SCORE,TIME,目的地が表示されます。
ゲームオーバーでスコア上位10位が表示されます。10位以内に入る場合は、エントリーできて、アルファベットと記号(-. )、3文字を入力できます。選択は左右とスペースで行います。初期状態は、1位1000点10位0点、名前はいい感じに入れてください。

html+js+cssで作ります。
背景はOpenStreetMapを使って、Leaflet.jsを使います。
必要に応じて、2Dのゲームエンジンを入れてください。
```
少しの手直しで、ゲームの基本機能が出来ました！
![スクリーンショット 2025-06-08 10.48.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155165/87cfe4a2-ed47-467b-b788-a013a583fe1c.png)
![スクリーンショット 2025-06-08 10.48.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155165/2e1839db-36e2-4173-b957-55fefbb39c47.png)

細かく指示をして修正していきます。**早いうちに、フォルダ構成を整理させて、jsやcssを分割させた方がよいです。** ファイルの行数が大きくなると、うまくいかないことが増えます。  
また、 **README.mdに、機能やフォルダ構成を書かせます。** 継続開発がやり易くなります。  
**早めにローカルでよいのでGitを活用した方がよいです。** 指示がうまく伝わらずデグレしたり、AIが削除してしまったり、いろいろなことが起こります。慣れてくると指示だけでも軽減出来ますが、Gitに途中状態あると確実です。コミットは自分で実施しました。AIにコミットを許すと履歴が多くなりすぎます。ただ、AIはコミット履歴はしっかり書いてくれますので使い方次第です。  
機能が思い通りになったら次のステップに行きます。  

## 2. タイトルとゲームモードを作成
画像作成に、MCPのNova Canvasを使いました。いい感じにタイトルの絵ができました。  
```
タイトル画面を作ります。Nova Canvasで作ってください。ポップで可愛いものにしてくだ
さい。多言語対応なので、画像には文字は入れないでください。淡色系で。
```
![delivery-bird-title-screen.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155165/6ace8e3c-e15f-4080-9c66-04e605a454ae.png)


## 3. キャラクター画像のスプライトを作成
スプライト画像は直接出力が難しいので、SVGで作成して、pngに変換しました。Pythonを作成して実行させました。  

```
キャラクターをスプライトにしてください。
画像はsvgで書いて、pngに変換してください。64x64くらいです。メイメイは、かわいくてポップなキャラクターにしてください。タイトル画面の鳥がメイメイです。飛んでいる姿は上から見た姿で、翼が羽ばたくアニメーションにしてください。動作は、メイメイも敵の鳥も、進行方向に向くようにしてください。cssでできると思います。
敵も同様に３色（青、赤、黄色）作成してください。悪い顔にはせず、可愛い鳥でよいです。
必要に応じて、JSの2Dゲームエンジンを使ってください。変換処理にPythonが必要なら、convertフォルダに実装してください。Pythonは.venvで実行してください。
あと、favicon.icoも同じ方法でいい感じに作ってください。
```
スプライトは作れるんですが、なかなか思ったようにならないです。かなり手直しを続けました。  
生成AIの進化待ちか・・  

![スクリーンショット 2025-06-08 19.13.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155165/34a3cfb9-35a0-4441-a8be-729498cb0660.png)

ここで無料枠の上限に達したようです。少々手直しして、完了とします。スプライトは反映出来ませんでした。
```
"Maximum com.amazon.aws.codewhisperer.streaming.GenerateAssistantResponse reached for this month."
```

## 4. 効果音、BGMを作成
プロンプトを用意していました。中断したために、使用出来ていません。これもコツがあります。3分と書いていますが、もっと短いmidiになります。midiからmp3への変換は、ffmpegが使われます。インストールを許可する必要があります。  
```
BGMを作ってください。メロディ、サブメロディ、伴奏の合計の長さがずれないようにしてください。
midを作ってmp3に変換してください。変換処理にPythonが必要なら、convertフォルダに実装してください。Pythonは.venvで実行してください。

ゲームBGMを3分くらい、のどかなメロディーです。ゲームオーバー画面のBGMを30秒くらい。ゲームオーバー画面っぽいメロディーです。
効果音は、選択、目的地到着、敵に当たった音など

タイトル画面でBGM、効果音のON/OFFを選択できるようにしてください。
```

# おわりに
Amazon Q Developerはこれからも使っていきます！