Amazon Q CLI を使ってゲーム作ってみた

Amazon Q CLI でゲームを作ろう キャンペーンに参加しました！

CLIでのAI開発は初めてなので戸惑いながらもプロトタイプの開発を30分ほどで行えました。

環境

macOS 15.5
q 1.12.0 (Amazon Q CLIのバージョン)

実施内容

1. Amazon Q CLIのインストール

インストールはキャンペーンページにもあったように以下のページを参考にしました
https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-installing.html
途中でAmazonのBuilderアカウントをド忘れしていて手間取りました...

2. CLIの使い方をダウンロードしたアプリで確認

基本的にはbashなどでq xxxxxのようにコマンドを入力していくことでAmazon Qの機能を使うことができるようです
q helpをしてみたところ以下のように出てきました。

╭──────────────────────────────────╮
│ chat Chat with Amazon Q │
│ translate Natural Language to Shell translation │
│ doctor Debug installation issues │
│ settings Customize appearance & behavior │
│ quit Quit the app │
╰───────────────────────────────────╯

今回の開発ではq chatを使用してCLI上でAIとチャットしながら開発をしていきます
🤖🤝😊 →🚀

また、bash内でのAI予測補完が優秀でbashに追加で色々付けてなかった自分にとってはこれだけでも革新的でした
とても便利

より詳しい解説は以下のページで勉強しました

今回は触ってないけどTranslateで自然言語をshellスクリプトに変換するのは便利そうなので使ってみたいですね

料金形態については以下のページを参考にしました

3. 開発

今回はAmazon Q CLIを使ってゲームを作ろうということなので見た目が似ているqとpを戦わせるシューティングゲーム「q-shooting」を作成してきたいと思います
また、使用した技術としてJavaScriptのゲームエンジンphaserを使用して作成してみました
選定理由としてはwebのゲームが良かったのと知り合いが使用してゲームを作っているのを最近見たため興味があったという単純な理由でございます

プロジェクトファイル作成

VSCodeのターミナル上で開発を行っていきます
作業用のプロジェクトはいつも使っているviteのvanillaで立ち上げました

cd 作業ディレクトリ
npm create vite@latest

QとChat

VSCodeのターミナルでq chatと入力することでAmazon Q のチャットが立ち上がります！

    ⢠⣶⣶⣦⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣤⣶⣿⣿⣿⣶⣦⡀⠀
 ⠀⠀⠀⣾⡿⢻⣿⡆⠀⠀⠀⢀⣄⡄⢀⣠⣤⣤⡀⢀⣠⣤⣤⡀⠀⠀⢀⣠⣤⣤⣤⣄⠀⠀⢀⣤⣤⣤⣤⣤⣤⡀⠀⠀⣀⣤⣤⣤⣀⠀⠀⠀⢠⣤⡀⣀⣤⣤⣄⡀⠀⠀⠀⠀⠀⠀⢠⣿⣿⠋⠀⠀⠀⠙⣿⣿⡆
 ⠀⠀⣼⣿⠇⠀⣿⣿⡄⠀⠀⢸⣿⣿⠛⠉⠻⣿⣿⠛⠉⠛⣿⣿⠀⠀⠘⠛⠉⠉⠻⣿⣧⠀⠈⠛⠛⠛⣻⣿⡿⠀⢀⣾⣿⠛⠉⠻⣿⣷⡀⠀⢸⣿⡟⠛⠉⢻⣿⣷⠀⠀⠀⠀⠀⠀⣼⣿⡏⠀⠀⠀⠀⠀⢸⣿⣿
 ⠀⢰⣿⣿⣤⣤⣼⣿⣷⠀⠀⢸⣿⣿⠀⠀⠀⣿⣿⠀⠀⠀⣿⣿⠀⠀⢀⣴⣶⣶⣶⣿⣿⠀⠀⠀⣠⣾⡿⠋⠀⠀⢸⣿⣿⠀⠀⠀⣿⣿⡇⠀⢸⣿⡇⠀⠀⢸⣿⣿⠀⠀⠀⠀⠀⠀⢹⣿⣇⠀⠀⠀⠀⠀⢸⣿⡿
 ⢀⣿⣿⠋⠉⠉⠉⢻⣿⣇⠀⢸⣿⣿⠀⠀⠀⣿⣿⠀⠀⠀⣿⣿⠀⠀⣿⣿⡀⠀⣠⣿⣿⠀⢀⣴⣿⣋⣀⣀⣀⡀⠘⣿⣿⣄⣀⣠⣿⣿⠃⠀⢸⣿⡇⠀⠀⢸⣿⣿⠀⠀⠀⠀⠀⠀⠈⢿⣿⣦⣀⣀⣀⣴⣿⡿⠃
 ⠚⠛⠋⠀⠀⠀⠀⠘⠛⠛⠀⠘⠛⠛⠀⠀⠀⠛⠛⠀⠀⠀⠛⠛⠀⠀⠙⠻⠿⠟⠋⠛⠛⠀⠘⠛⠛⠛⠛⠛⠛⠃⠀⠈⠛⠿⠿⠿⠛⠁⠀⠀⠘⠛⠃⠀⠀⠘⠛⠛⠀⠀⠀⠀⠀⠀⠀⠀⠙⠛⠿⢿⣿⣿⣋⠀⠀
 ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠛⠿⢿⡧

╭─────────────────────────────── Did you know? ────────────────────────────────╮
│                                                                              │
│         Use /model to select the model to use for this conversation          │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯

/help all commands  •  ctrl + j new lines  •  ctrl + s fuzzy search
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🤖 You are chatting with claude-3.7-sonnet

> 

ターミナル上で日本語を使用してさせたいことを入力させると開発が進んでいきます！

自分はまずアイデア・使用技術・プロトタイプとしてしたいことなどを渡しました
プロンプトエンジニアリングをあまりちゃんと学んでいないのでマジで会話するように作っています

> qが主人公のシューティングゲームを作成します。敵としてp軍団が出てきます。
ゲームにはphaserを使用して作成します
現在viteのvanillaで作成した何も変更していないプロジェクトだけ作成してあります

適当にプロンプトを投げると現在いる場所のファイルを読み取り出します。また、読み取り編集等が行えるようにCLIの確認にはtを入力しました。

Allow this action? Use 't' to trust (always allow) this tool for the session. [y/n/t]:

> t

修正作業

出来上がったゲームを確認して、エラーがあれば投げるというのを3,4回ほどしました
エラー内容はこちらが画像を用意していないなど単純なものもあったのでなんとも言えないですがphaserを全く理解していない自分からしたら自然言語だけでエラーが直っていくのは怖い部分もありました(聞くしか解決手段がなくなるとかまでいってしまったら怖い...)

README.mdの作成

最後にこのゲームの技術的な部分をまとめたREADME.mdを作成してもらいました
ファイル全体やチャット履歴を参照しているのでわかりやすいREADMEになりました🚀

    # Q-Shooting: P軍との戦い
    
    Phaser 3、TypeScript、Viteで開発されたブラウザベースのゲーム。
    
    ## プロジェクト概要
    
    Q-Questは、プレイヤーがP軍と戦うアクションゲームです。このゲームは最新のWeb技術を使用して構築され、ゲーム開発支援におけるAmazon Q CLIの力を実証しています。
    
    ## 技術スタック
    
    - **ゲームエンジン**: [Phaser 3](https://phaser.io/) - 強力な2Dゲームフレームワーク
    - **言語**: [TypeScript](https://www.typescriptlang.org/) - 型安全なJavaScript開発のため
    - **ビルドツール**: [Vite](https://vitejs.dev/) - 次世代フロントエンドツール
    - **開発支援**: Amazon Q CLI - AI搭載コーディングアシスタント
    
    ## プロジェクト構造
    
    ```
    q-quest/
    ├── public/           # 静的アセット
    ├── src/              # ソースコード
    │   ├── scenes/       # ゲームシーン（Boot、Game、GameOver）
    │   ├── main.ts       # エントリーポイントとゲーム設定
    │   ├── style.css     # グローバルスタイル
    │   └── ...           # その他のゲームコンポーネント
    ├── index.html        # HTMLエントリーポイント
    ├── package.json      # プロジェクト依存関係
    └── tsconfig.json     # TypeScript設定
    ```
    
    ## ゲーム機能
    
    - Phaser 3ゲームエンジンとアーケード物理演算
    - 複数のゲームシーン（Boot、Game、GameOver）
    - 自動スケーリングによるレスポンシブデザイン
    - 物理演算の視覚化のためのデバッグモード
    
    ## 開発
    
    ### 前提条件
    
    - Node.js（最新のLTSバージョン推奨）
    - npmまたはyarn
    
    ### インストール
    
    ```bash
    # リポジトリをクローン
    git clone <repository-url>
    cd q-quest
    
    # 依存関係のインストール
    npm install
    ```
    
    ### ゲームの実行
    
    ```bash
    # 開発サーバーの起動
    npm run dev
    
    # 本番用ビルド
    npm run build
    
    # 本番ビルドのプレビュー
    npm run preview
    ```
    
    ## 開発におけるAmazon Q CLIの活用
    
    Amazon Q CLIはこのゲームの開発において非常に重要な役割を果たし、以下の支援を提供しました：
    
    1. **コード生成**: ゲームシーンやコンポーネントのボイラープレートコードの作成を支援
    2. **デバッグ**: 物理演算やレンダリングの問題のトラブルシューティングに関する洞察を提供
    3. **ベストプラクティス**: ゲーム開発のための最適化と最新パターンを提案
    4. **ドキュメント**: Phaser 3 APIとTypeScript統合の理解を支援
    
    ## Amazon Q CLIの使用方法
    
    Amazon Q CLIは、様々な開発タスクを支援するAI搭載コーディングアシスタントです。使用方法は以下の通りです：
    
    ### インストール
    
    ```bash
    # Amazon Q CLIのインストール
    npm install -g @aws/amazon-q-cli
    ```
    
    ### 基本コマンド
    
    ```bash
    # Amazon Qとの会話を開始
    q chat
    
    # 特定のコードについてヘルプを得る
    q chat "Phaser 3での衝突検出の実装方法は？"
    
    # 要件に基づいてコードを生成
    q chat "キーボード操作によるプレイヤー移動システムを作成して"
    
    # チャットを終了
    /quit
    ```
    
    ### 高度な使用法
    
    - Amazon Qを使用してコードベースを分析し、改善点を提案
    - 複雑なコードセクションの説明を求める
    - TypeScriptの型やPhaser 3の設定に関するヘルプを得る
    - エラーやパフォーマンスの問題をトラブルシューティング
    
    ## ライセンス
    
    [ここにライセンス情報を記載]
    
    ## 謝辞
    
    - 優れたドキュメントと例を提供してくれたPhaser 3コミュニティ
    - Amazon Q CLIツールを提供してくれたAmazon Web Services

4. プロトタイプ完成

簡単な作業プロンプトと修正を数回のみで上からp集団が降ってくる簡単なシューティングゲームができました！

動作している動画

自機の「q」は球を発射でき、球が「p」に当たると爆発のようなエフェクトが出てpは消滅します
自機の「q」が「p」に当たるとダメージを受けるようになっています
敵を倒すとScoreが加算され、時間が経つとLevelが上がり敵の挙動が変化するようになっています

プロトタイプ開発なので左下にデバッグ用のテキストやplayerなどに移動の緑線があったりといった部分も作成してくれました

5. 感想

CLIを使って開発してみてVSCode内で完結する良さがあるなと感じました
しかし、VSCodeにはGithubCopilotがおり、そちらの方が楽な部分はあるなと思ったGUI主流民でした
CLIのみで完結できるのでCLIメインの場合はとても楽できそう(ssh接続先とか?経験浅いので浅い考えしか思いつかない...)