Amazon Q CLI を使ってWSL上でビリヤードゲームを作成した

## 6/22 追記 
キャンペーン実施期間を6/20に空目していたため、正しい値 6/30に修正しました。失礼いたしました。

## はじめに
こんにちは。 イオ なん太と申します。
初投稿です。

Amazon Q CLI を使ってゲームを作ることで、Amazon Qの使い方を学びつつTシャツもいただける、という素敵企画が2025/6/30まで実施中とのことです。日本語版の要綱は以下。

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

乗るしかないですよね、このビッグウェーブにね

というわけでAmazon Q CLIの導入からゲームを作成するまで記事にまとめましたのでご紹介します。

## 環境
* Ubuntu 24.04.01 LTS on WSL, Windows10
* Python 3.12.2

## Amazon Builder ID を取得する
以下のリンク先へ進み、Amazon Builder IDを取得します。

https://community.aws/builderid?trk=b085178b-f0cb-447b-b32d-bd0641720467&sc_channel=el

案内を読みつつ、「Login」から進んでいけばIDが取得できます。普段からAWSを使っていて既にIDをお持ちであればこの作業は不要かもしれません。

また、Amazon Builder IDの取得に限った話ではないですが、本キャンペーンに参加する上で必要な情報は冒頭で紹介したこちらのページから辿ることができます。

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

## 必要なツールをインストールする
まずはWSL上のUbuntuにAmazon Q CLIをインストールするために、以下を参考にしました。

https://community.aws/content/2v5PptEEYT2y0lRmZbFQtECA66M/the-essential-guide-to-installing-amazon-q-developer-cli-on-windows?trk=e07eca93-fa2f-4351-b567-f293b83eb635&sc_channel=el_

ちゃんと文章を読みながら作業すれば問題なくインストールできます。

起動は`q chat`、終了は`/q`です。起動時のAAがクール。
```
$ q chat

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

╭─────────────────────────────── Did you know? ────────────────────────────────╮
│                                                                              │
│      Set a default model by running q settings chat.defaultModel MODEL.      │
│                          Run /model to learn more.                           │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯

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

>
```
また、pygameが必要ですのでこのタイミングで導入しましょう。
通常`pip install pygame`ですが、WSL上では`apt install`で導入します。
```
sudo apt install python3-pygame
```
`python3-xyz`の`xyz`がモジュール名になります。

## 実際にゲームを作る
ここではビリヤードゲームを作ろうと思います。具体的には、
* プレイヤーは1人
* 15個の的玉を手玉とキューを用いて全部ポケットに入れることが目標
* 全部入れるまでのショット数をスコアとする

まずはこれをそのまま食べさせてみます。
```
ビリヤードゲームを、以下の点を満たしつつ作成してください。
・プレイヤーは1人とします。
・15個の的玉を手玉とキューを用いて全部ポケットに入れることが目標です。
・すべての球がポケットするまでにかかったショット数をスコアとします。
・先述の制約により、スコアが少ない方が高度なプレイとされます。
```
出力されたpyファイルを実行するとこのようなゲームが起動しました。
![b1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114202/57488129-4d89-457c-a27e-98dcd323dbde.png)

いいですね！早速、ちゃんとビリヤードしています。
Amazon Q くんが以下のようにプレイ方法を教えてくれたので遊んでみましたが、ちゃんと動作します。
```
## ゲームの操作方法

• マウスで狙いを定め、左クリックを押し続けるとパワーがチャージされます
• 左クリックを離すとショットが打たれます
• Rキー: ゲームをリセット
• ESCキー: ゲーム終了
```

ただ、ぱっと見で気になる点もいくつか。
* ポケットとテーブルの縁が同じ色(黒)なので視認性が悪い。
* 3番玉、11番玉がテーブルと完全に同じ緑色でこちらも視認性が悪い(3番と11番)
* 左上と右上のスコア？表示が崩れている。

また、実際にプレイしないとわかりませんが、手玉を突く際に**キューが伸びている方向に打ち出されます**。個人的に、直感に反していてわかりにくい。

この辺の改善を提案してみましょうか。

```
いいですね！ただ、以下の点を改良すればさらに良いゲームになると考えます。
・ ポケットとテーブルの縁が同じ色(黒)なので視認性が悪く、改良が必要。
・的玉の中にテーブルと完全に同じ緑色のものがいるため、こちらも視認性が悪い(3番と11番)
・ 左上と右上のスコア？表示が崩れている。文字化けでしょうか？
・手玉を突く際にキューが伸びている方向に打ち出さるが、個人的に直感に反する。キューが伸びる方向と逆方向(現実に即した方向)に直してください。
```

2分ほどでAmazon Qくんから改善完了のコメントが。
```
ご指摘いただいた点をすべて修正しました。改良点は以下の通りです：

1. ポケットとテーブルの縁の視認性改善
   • テーブルの縁を濃い茶色（DARK_BROWN）に変更
   • ポケットの周りにグレーの縁を追加して視認性を向上

2. 緑色の的玉の視認性改善
   • 3番と11番の緑色の的玉をそれぞれシアン（CYAN）とピンク（PINK）に変更

3. 文字化け問題の修正
   • 日本語フォントを使用するように設定
   • Windows、Linux、macOSの各環境に対応するフォントを試行
   • フォントが見つからない場合はデフォルトフォントにフォールバック
   • テキスト表示位置も調整

4. キューの方向を現実に即した方向に修正
   • キューが手玉からマウスと反対方向に伸びるように変更
   • 球の打ち出し方向もマウスから手玉への方向に修正（現実のビリヤードと同じ）

これらの修正により、ゲームの視認性が向上し、より直感的な操作感になりました。キューの動きも現実のビリヤ
ードと同じように、キューが伸びる方向と逆方向に球が打ち出されるようになっています。

ゲームを実行するには、以前と同様に以下のコマンドを使用してください：

python billiards_game.py


これで、より快適にプレイできるビリヤードゲームになったはずです。
```
出てきたものは以下の通り。
![b2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114202/e3acd7a1-20bc-42b4-ae68-0a7eb4915006.png)
いや、文字化け、直ってないねえ~
日本語フォントの扱いが苦手なのでしょうか？
```
文字化けが依然改善していません。日本語フォントでの実装が難しければ英語フォントを使っても構いませんの
で、これを直してください。
```
```
文字化けの問題を解決するために、以下の修正を行いました：

1. すべてのテキストを英語に変更
   • ゲームタイトルを「Solo Billiards Game」に変更
   • すべての表示テキストを英語に変更（「Shots」「Remaining」「Power」など）
   • ゲームクリア時のメッセージも英語に変更

2. フォント設定の簡素化
   • 日本語フォントの複雑な設定を削除
   • Pygameのデフォルトフォント（None, 36）を使用

3. テキスト位置の調整
   • 「Remaining」テキストの位置を少し左に移動して、画面からはみ出さないように調整

4. READMEファイルも英語に統一
   • READMEファイルも英語版に戻して、一貫性を保持

これらの変更により、文字化けの問題が解決され、すべてのテキストが正しく表示されるようになりました。英語
のテキストとデフォルトフォントを使用することで、環境に依存せず確実に表示されます。

前回の修正で対応した以下の改良点はそのまま維持しています：
• ポケットとテーブルの縁の視認性向上（テーブルの縁を濃い茶色に、ポケットにグレーの縁を追加）
• 緑色の的玉をシアンとピンクに変更して視認性を向上
• キューの方向を現実に即した方向に修正（キューが伸びる方向と逆方向に球が打ち出される）

ゲームを実行するには、以前と同様に以下のコマンドを使用してください：

python billiards_game.py


これで文字化けの問題が解決され、より快適にプレイできるビリヤードゲームになりました。
```

ゲーム画面はコチラ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114202/456e2cf9-6cc9-42a4-bf6b-7289a2743cd8.png)
ｷﾀ――(ﾟ∀ﾟ)――!!
今何ショットしたか、ボールがいくつ残っているかちゃんと表示されています。

これでかなり見られる見た目になったと思うので今回はここまで。詰められるところはまだあると思いますが、きりがないので...

## まとめ
プロンプトのみでここまでゲームが作れる時代になったのですね。骨格部分はほぼ問題なく作成できていますが、画面内のコンテンツをどう見せれば良いユーザー体験になるかといった、感覚的な部分はまだちょっと弱いのかな、という印象を受けました。今回のケースで言えばボールの配色や、キューと玉の打突方向の関係等ですかね。ビリヤードボールの色に緑色が存在するのはその通りなんですがね。テーブルの緑色とボールの緑色を若干変えるとか。

そこまで出来てしまうと、人間がコーディングに参加する必要性がどんどん薄れていくような気もしますが。ひとまず現状では、大枠を生成AIに担当させて細かい部分を人間が修正するのがよいのかなあ、と考えました。


以上です。お読みいただきありがとうございます。Tシャツの入手をお忘れなく。