【バイブコーディング】レトロ戦略ゲームを作るその２(画像素材)

前回、レトロ戦略ゲームの基本部分を生成した。

前回は、サイズなどの形式だけ合った素材をコードインタープリタで生成したので、何のユニットかわからなかった。
今回は、画像素材を生成AIで生成し、既存の素材を置き換えることを試した。

ドット絵

画像素材は、16x16のドット絵という仕様になっている。
画像生成AIの出力サイズは、1024x1024などの固定サイズになっているため、直接16x16サイズで生成はできない。
そこで、生成された画像を切り抜いて、画像編集ソフトで縮小することを試した。

しかし、16x16で縮小した後、ゲーム画面では64x64に拡大して表示しているので、クオリティが低くなった。
16x16で、何のユニットかわかるようにするのはうまくいかず、ドット絵は職人芸だと思った。

ゲーム画面では64x64に拡大しているので、はじめから64x64にした方がよいので、画像素材の仕様を64x64に変更した。

シートで出力

ChatGPTでゲーム素材を生成する良い方法を聞いたところ、一つ一つの画像を生成するよりも、シートで出力すると効率が良いとのとこだったので、シートでまとめて出力するようにした。
ChatGPTにそのためのプロンプトを出力してもらった。

Generate a sprite sheet with 16 strategy game units.
pixel art
top-down
64x64 grid

### Units
- Every file below is required and must be `64x64`, grayscale, and transparent around the sprite.

| File | What to draw |
|---|---|
| `infantry.png` | Foot soldier with firearm. Must clearly read as a person, not a vehicle or icon. |
| `engineer.png` | Support infantry. Can include tool / pack / specialized silhouette distinct from regular infantry. |
| `tank_a.png` | Light tank silhouette. Smallest and simplest tank class. |
| `tank_b.png` | Medium tank silhouette. Heavier than `tank_a`. |
| `tank_z.png` | Heavy tank silhouette. Largest land tank class among regular tanks. |
| `turret.png` | Stationary or emplacement-like gun platform. Must not read as a mobile tank. |
| `sp_artillery_a.png` | Self-propelled artillery, lighter class. Long barrel and rear support silhouette recommended. |
| `sp_artillery_b.png` | Heavier self-propelled artillery. Larger body and heavier gun than `sp_artillery_a`. |
| `anti_air_missile.png` | Anti-air missile vehicle. Missile pod / launcher silhouette should be clear. |
| `anti_air_tank.png` | Anti-air gun vehicle. Turret / gun cluster should read as anti-air role. |
| `rocket_launcher.png` | Ground rocket artillery. Multi-tube launcher silhouette recommended. |
| `armored_car.png` | Fast wheeled armored vehicle. Must read as lighter and faster than tanks. |
| `supply_truck.png` | Logistics vehicle. Cargo bed / container / supply silhouette should be visible. |
| `fighter_a.png` | Fighter aircraft, lighter class. Fast and compact air silhouette. |
| `fighter_b.png` | Fighter aircraft, heavier class. Distinct from `fighter_a` in wing/body proportions. |
| `bomber.png` | Bomber aircraft. Heavier body and payload-oriented silhouette. |

## Style Guide

- 2D pixel art
- 64x64 pixels
- top-down strategy game style
- similar readability to Game Boy Wars / Advance Wars
- slightly cartoon but military readable
- strong silhouettes
- minimal shading (2~4 color ramps)
- clean outline
- no perspective tilt
- no text
- no UI frame
- neutral faction color

### Unit Style

- grayscale only
- transparent background
- clear silhouette
- centered in 64x64
- pixel-art scale readable

このプロンプトで出力された画像は以下の通り。
そのまま使えそうなクオリティで出力された。
色は、ゲーム側でサイドカラーに塗るのでグレースケールになっている。