こんにちは、ゲーム開発にチャレンジ中の麗（うらら）です。
前回の記事では、AIに作ってもらったゲーム画面がなぜダサく見えるのか？を調べて整理してみました。
今回は、そこから一歩進んで、実際にどう改善していけばいいのかをまとめてみます。
おそらく方法はひとつじゃないのですが、何かヒントになればな、と思いながら・・・。
今回目指したい方向性はこれです。
16-bit風ピクセルアート × 夜景シティ × レトロアーケードHUD
まず「どんな見た目にしたいか」を決める
まずは見た目の方向性を言葉にします。
例えば、この画像なら、
- 16-bit風ピクセルアート
- 夜景シティ
- レトロアーケードHUD
- 横スクロール風
- 紫・濃紺・オレンジの空
- 赤白のプレイヤー
- 黄色く光るコイン
- ピクセル風の枠付きUI
という感じ。
ここは自分のイメージを言語化するスキルが求められます。
デザインに慣れていない私のような人にとっては、まずは用語を覚えるところから始めたほうが良さそうです。
改善1：イメージ画像を用意してから依頼する
画像生成AIを使用してイメージ画像を作成するなど、自分のイメージするUI画面を先に作成しておきます。
それをファイルとして開発中フォルダに保存しておき、参考にしてもらう。
なるべく近い雰囲気でコーディングAIがデザインをしてくれるようになりますが、本格的なデザインにするには、一つ一つの素材を生成する必要があります。
改善2：HUDをゲームらしいUIにする
HUDとは、現在のステータスを表わすものです。
（例えば、スコア：〇〇 など）
仮画面では、スコアやバッテリーが裸の文字になりがちなので、ゲーム用のHUDにします。
たとえば、
左上：スコアとコイン 中央上：バッテリーゲージ 右上：シールド
のように配置します。
さらに、
ピクセル風の枠 暗い背景パネル 金色や青色のアクセント 大きめの数字 アイコン 統一された余白
などを入れると、ゲーム画面っぽく近づくようです。
改善3：背景をレイヤーに分ける
背景は1枚で済ませるより、レイヤーに分けると奥行きが出るようです。
遠景：薄いビル群 中景：少し濃いビル群 近景：暗くて大きいビル群
そして、それぞれ違う速度で動かします。
遠景：ゆっくり動く 中景：普通に動く 近景：速く動く
これがパララックスです。
同じビルでも、距離ごとに色や動きの速度を変えるだけで、かなり画面に奥行きが出る……らしい。
改善4：プレイヤーを主役にする
ゲーム画面では、プレイヤーが一瞬で分かることが大事です。
今回なら、プレイヤーは赤白の小型機にして、背景より明るくします。
赤と白で目立たせる 暗いアウトラインを付ける 噴射炎を出す 移動方向に少し傾ける
こうすると、背景が夜景で複雑になっても、プレイヤーが埋もれにくくなります。
主役は、ちゃんと主役に見せる必要があります。
改善5：コインを報酬らしくする
コインは小さいですが、ゲームの目的に関わる大事な要素です。
なので、ただの黄色い丸ではなく、
ピクセル風の金色コイン 暗いアウトライン 小さな発光 ふわふわ浮く動き 取得時のエフェクト
を入れると良さそうです。
プレイヤーが見た瞬間に、
「あ、これは取るものだ！」
と分かるようにします。
改善6：小さな演出を足す
絵が下手でも、演出があると一気にゲームっぽくなります。
たとえば、
- コイン取得時に粒が弾ける
- +1 のスコア表示が浮かぶ
- バッテリーゲージがなめらかに減る
- ダメージ時に画面が少し揺れる
- プレイヤーが一瞬点滅する
- 噴射炎が揺れる
こういう小さな動きが、画面の手触りを良くしてくれます。
コーディングだけでどこまで作れる？
CodexのようなAIコーディングツールに頼めば、コードだけでも多少は作れます。
参考画像としてこちらの画像を渡してUIを改善してもらいました。
↑これが
↓こうなりました
参考画像のような高密度なピクセルアートをコードだけで再現するのは難しいかもしれません。
絵の完成度が足りなければ、素材を用意するのが良さそうです。
最初から全部の素材を作ろうとすると大変なので、先にCodexで「それっぽい仮画面」を作ってもらい、
- プレイヤーだけ弱い
- HUDだけ仮っぽい
- 背景の近景ビルだけ足りない
- コインだけ安っぽい
足りないと感じる部分を素材で補う
こうやって、イマイチな部分だけ素材を差し替えていくと、労力は緩和できそう。
つまり、
Codexで仮の完成形を作る ↓ スクショを見る ↓ 弱い部分だけ素材を作る ↓ また差し替える
この流れが良さそうです。
依頼するときの注意点
一気に全部頼むと、AIが失敗してしまう可能性があります。
背景だけ HUDだけ プレイヤーだけ 演出だけ
1回の依頼につき1つを決めて、
ゲームロジックを変えずに 「背景」「HUD」「カラーパレット」だけを改善してください。
といったプロンプトで送ると良さそうです。
まとめ：AIに任せるだけでなく、自分の解像度を上げていく
AIにゲームを作ってもらうと、動くゲームを作ることができたとしても、見た目がイマイチになることがあります。
「動くゲーム」を優先して作ってくれる反面、あいまいな指示ではAIが「UIは後回し」と判断してしまうのです。
今回調べながら感じたのは、AIに指示を出すために
- 自分自身のイメージの解像度を上げる
- イメージを言語化できるよう用語を覚える
こういったことが私にはまず必要かなと思いました。
ゲーム開発、まだまだ分からないことだらけですが、少しずつ「どう直せばいいのか」が見えてきたような気がします。
