キャラに合う2D背景が見つからないので、Claude Codeにプロンプトを書かせてChatGPTで一から作った
私はゲームのプログラムが書けません。AIに日本語で指示して、Unity 6で2Dアクションゲームを作っています。
この記事は、前回の記事の続きです。
2Dアニメで3回挫折して「AI動画→Pythonでスプライト化」に落ち着くまで
2体目のキャラは早かった
キャラクターの動作の作り方は1体目で確立できたので、2体目は結構素早く素材を準備できました。
なぜ背景が必要になったか
キャラが2体そろうと、次は「ゲーム画面の中でどう見えるか」を確かめる必要が出てきました。
- 透過がきれいに抜けているか
- キャラの縁取りが背景の上で浮いていないか
- キャラのサイズ感は合っているか
これを確認するには、背景をつくり、敵キャラを準備する必要がありました。
敵キャラクターは、以前別のゲームを作ったときに購入した有料アセットを仮置きしています。サイズ的には合っていませんが、表示を見る分には十分です。
素材探しで見つからなかった
背景は手元のアセットや素材サイトも見ました。ただ、キャラクターの雰囲気に合うものがなかなか見つからなかったので、一から用意することにしました。
手順：Claude Codeでプロンプトを作り、ChatGPTで生成する
流れは次のとおりです。
- Claude Codeに、ステージのイメージとキャラの特徴を伝えて、ChatGPT用のプロンプトを書いてもらう
- ChatGPTで、5種類のレイヤーを同じチャットで上から順に生成する
- Unityに取り込み、キャラとVFXを重ねて確認する
作ったのは平野（草原）ステージです。レイヤーは次の5種類です。
| 順番 | レイヤー | 役割 |
|---|---|---|
| 1 | 完成イメージ | 絵柄と光の基準（ゲームには使わない） |
| 2 | 遠景 | 空・山・かすんだ丘 |
| 3 | 中景 | 丘・木・石垣・風車・遺跡 |
| 4 | 接地面 | キャラが立つ地面（横にタイル） |
| 5 | 前景 | 草むら・古木・石柱などの小物を1個ずつ |
Claude Codeが調整した4つの点
Claude Codeがプロンプトを書くときに、次の4点を意図して入れてくれました。
| 調整 | 理由 |
|---|---|
| 作品名を入れない | 特定作品の名前を出すと意匠がその作品に寄る。製品に使う素材なので、「風車と石造りのある欧風の牧歌的な草原」と特徴で指定する |
| 緑の彩度を抑える | 主人公キャラの服が緑なので、背景に埋もれる |
| 夕景を避ける | 金色のVFXや髪が背景に馴染んでしまうので、曇った朝の光にする |
| 空を暗めにする | 白い空だと、加算合成のVFXが白飛びする |
キャラとエフェクトを先に作っていたので、「背景がキャラとVFXの邪魔をしない」ことが条件として最初から入っています。
1. 完成イメージ（全文）
主人公キャラのIdle画像を添付して生成します。絵柄の基準になるので、納得できるまで作り直します。
Using the attached character only as a reference for the art style, paint a background for a 2D side-scrolling action game. Do not draw the character or any people.
Scene: a vast, windy European-style pastoral grassland in a fantasy world. Gently rolling meadows, scattered clusters of broadleaf trees, a low stone wall, a distant wooden windmill, old stone ruins, and far blue mountains under a soft overcast morning sky.
View: pure side-on view, like a stage in a 2D side-scroller. The ground is flat and horizontal across the lower quarter of the image, with no road leading into the distance and no high-angle perspective.
Style: high-end hand-painted 2D game art, rich painterly brushwork, semi-realistic fantasy, matching the attached image.
Color and value: muted, slightly desaturated sage and olive greens, dusty blues, soft grays. Overall mid-to-dark values with low contrast, so that a bright character and glowing visual effects stand out. No pure white areas. No golden sunset light.
Wide landscape format. No text, logo, UI, or watermark.
コラム：「完成イメージはなぜ必要なのですか」
ゲームに直接使わない1枚をわざわざ作る理由がわからなかったので、Claude Codeに聞いてみました。AIに任せきりにせず、理由を聞いて納得してから進めたかったからです。答えの要点は次のとおりです。
- 完成イメージは、各レイヤーの絵柄と光を揃えるための共通の基準で、ゲームには直接使わない
- レイヤーを別々に生成すると、次のずれが出やすい
- 光の向きが違う（遠景は左から、中景は右から）
- レイヤーごとに草の緑や空気感が違う
- 筆致が違う（遠景は水彩風なのに、接地面は写実的）
- 山や木や建物の雰囲気がちぐはぐになる
- 1枚ずつ見ると良くても、重ねると別々の絵を貼り合わせたように見える
- 方向性を先に確かめる役割もある。ずれに気づくのが全レイヤーを作った後だと全部作り直しになるが、完成イメージの段階なら1枚直すだけで済む
- 必須ではなく、遠景を基準にする方法もある。ただし遠景には木や建物、地面が写らないので、全部の要素が1枚に入っている完成イメージのほうが基準として確実
納得したうえで、完成イメージから作ることにしました。
2. 遠景（抜粋）
Based on the previous image, paint only the farthest background layer for a parallax side-scroller. Include only: an overcast morning sky with soft layered clouds, distant blue-gray mountains, and faint rolling hills fading into atmospheric haze on the horizon. Do not include trees, buildings, windmills, ground details, or people.
...
The left and right edges must connect seamlessly when tiled horizontally.
3. 中景（抜粋）
Based on the first image, paint only the middle background layer for a parallax side-scroller. Include: gently rolling grass hills, clusters of broadleaf trees, a low stone wall, a small wooden windmill, and a few old stone ruins, spaced unevenly across the width with gaps between them.
...
Everything above the hills and trees must be fully transparent. The bottom of the image must be solid grass hill all the way across, because the ground layer will cover it.
透過されないときは、次の一文に差し替えて、マゼンタ背景で出してもらい、あとで抜きます。
Use a perfectly flat solid magenta background (#FF00FF) instead of transparency, with no shadow or gradient on the background.
4. 接地面（全文）
キャラが立つ地面です。上の線がまっすぐでないと、キャラが浮いたり埋まったりして見えます。
Based on the first image, paint only a horizontal ground strip for a 2D side-scroller. Pure side-on cross-section view. The top surface is a perfectly straight, level horizontal line across the entire width, with short grass tufts slightly overlapping that line. Below it are grass-covered soil, small embedded stones, and dark earth, getting darker toward the bottom of the image. No perspective and no visible ground plane receding into the distance. No hills, slopes, holes, trees, buildings, or people. Grass and stone detail should be evenly spread, with no eye-catching feature that would look repetitive when tiled. Same art style. Muted sage and olive greens with dark brown earth, mid-to-dark values. Everything above the grass tufts must be fully transparent. The left and right edges must connect seamlessly when tiled horizontally. Wide landscape format, PNG with transparent background. No text, logo, or watermark.
5. 前景（抜粋）
[ITEM] を入れ替えて、1個ずつ生成します。
Based on the first image, paint a single foreground prop for a 2D side-scroller: [ITEM]. Show only this one object, complete and not cut off, in pure side view, with its base on a straight horizontal line.
...
No ground, cast shadow, scenery, or people. PNG with transparent background.
入れ替えたITEMは、草むら、タンポポと野花、古木、苔むした石柱、木柵の5つです。
うまくいかないときの追加指示
| 症状 | 追加する指示 |
|---|---|
| 明るすぎる | Make the whole image darker and lower in contrast. Remove all near-white areas. |
| 色が鮮やかすぎる | Reduce the green saturation by about 30 percent, toward sage and olive. |
| 見下ろし気味になる | Use a completely flat side-on view with a level horizon. No perspective. |
| 地面が傾く | Make the top edge of the ground a perfectly straight horizontal line. |
継ぎ目の直し方
「継ぎ目なし」と指示しても、完全にはつながらないことが多いです。
- 画像編集ソフトで、画像を横に半分ずらす（継ぎ目が中央に来る）
- ChatGPTに添付して、次のように頼む
Repaint only the vertical seam in the center so that the left and right sides connect naturally. Keep everything else, the size, and the style exactly the same.
全体が少し変わってしまう場合は、中央だけを元画像に合成します。
この手順もClaude Codeが用意してくれていましたが、今回は継ぎ目を直さずにそのまま使えました。
最初は3枚で十分
最初に作るのは、完成イメージ・遠景・接地面の3枚で十分です。Unityでキャラとエフェクトを重ねて確認してから中景・前景へ進むと、手戻りが減ります。
Claude Code自身も「ChatGPTで試していないので調整が必要」と書いていたプロンプトでしたが、実際にはほぼ一発で使える絵が出ました。
結果
キャラクターとの合わせは問題なく、概ね満足しています。手順を流用することで、他のステージも準備できそうです。
まとめ
- キャラの作り方が決まったので、2体目は素早く準備できた
- 透過・縁取り・サイズ感を確かめるには、背景と敵キャラが必要だった
- 雰囲気に合う背景素材が見つからず、一から作った
- Claude Codeにプロンプトを書かせ、ChatGPTで5種類のレイヤーを同じチャットで順に生成した
- 背景がキャラとエフェクトの邪魔をしないよう、彩度・光・空の明るさを最初から指定した
- 完成イメージを基準にすると、レイヤー同士の絵柄と光が揃う。理由をAIに聞いて納得してから進めた
- 同じ手順で、他のステージも作れそう
リンク
- 前回の記事：2Dアニメで3回挫折して「AI動画→Pythonでスプライト化」に落ち着くまで
- 2Dアニメ編の動画: https://youtu.be/Qtvfq5eEp0M
- 開発中の3Dゲーム「勇者パーティの苦労人」（itch.io）: https://subaru33jp.itch.io/the-hero-partys-babysitter
- 前作の2Dゲーム「Princess Vanguard」（ブラウザで遊べます）
- itch.io: https://subaru33jp.itch.io/princess-vanguard
- ふりーむ（フリーゲーム夢現）: https://freegame-mugen.jp/roleplaying/game_15623.html
- デモ動画: https://youtu.be/J8aooF3N8AA
- X（@PuddingAthlete）