VANNAN GAMES

← 制作ノート一覧

AIに「まっすぐな横断歩道」を描かせるのに苦労した話

みんなでわたる。

このサイトのゲーム画像は、キャラクターも背景もすべてChatGPTの画像生成で作っています。お金をかけずに量産できる反面、AIには「言ったとおりに描かない」という強烈な個性があります。いちばん苦労したのは、大群で交差点を渡るゲーム『みんなでわたる。』の横断歩道でした。

横断歩道は、まっすぐであってほしい

このゲームは真上見下ろし視点で、道路が縦にスクロールします。背景タイルとして必要なのは「真上から見た、完全にまっすぐな横断歩道」。ところが何度発注しても、AIは気を利かせて遠近感をつけてくるのです。奥に向かってすぼまる白線、微妙に斜めのアングル、果ては頼んでいない歩行者のおまけ付き。絵としては上手いのですが、タイルとして並べると継ぎ目でガタガタに折れ曲がります。

うまくいったのは発注文の書き方を変えたときでした。「横断歩道を描いて」ではなく、「真上からの俯瞰。遠近感なし。白線はすべて画面と平行の等間隔の長方形」と、絵の構図ではなく幾何学的な制約として指定する。それでも完全な直線にはならなかったので、最後は生成画像から白線の質感だけを借りて、コード側でまっすぐなタイルに焼き込み直しました。AIと分業した形です。

透明背景と「市松模様」事件

キャラクター画像は背景透過のPNGで欲しいわけですが、素朴に「背景は透明で」と頼むと、AIはかなりの確率で透明を表すあの市松模様(チェッカー柄)を、絵として律儀に描いてきます。画像編集ソフトのスクリーンショットで学習しているのでしょう。いまは発注文の定型に「背景は完全な透明(アルファ透過)にしてください。市松模様やチェッカー柄などの『透明を表す模様』は絶対に描かないでください」という一文を必ず入れています。この呪文を発明してから事故はほぼゼロになりました。

それでも黒や白の背景が焼き込まれてくることはあるので、受け入れ側にも保険があります。画像の四隅から同色領域を塗りつぶして透過に変換する処理をPythonで書いておき、納品のたびに通しています。キャラクターを縁取る白いステッカー風のフチは残したいので、塗りつぶしの判定はフチの白と背景の白を明度と連結性で区別しています。

検証はコンタクトシートで

『フルスタック!』ではカード35枚・敵10体をこの方式で量産しました。枚数が増えると「頼んだものと違う絵が混ざっている」事故が起きます。実際、35枚の連番のうち1枚だけダウンロードに失敗していて、以降の割り当てが1枚ずつズレていたことがありました。以来、納品のたびに全画像を1枚のコンタクトシート(サムネイル一覧)に並べて目視することにしています。地味ですが、これがいちばん確実でした。

発注書はリポジトリで管理する

画像の発注文は、チャットに打って流すのではなく、リポジトリ内に発注書ファイルとして残しています。1ブロック=1画像で、そのままコピペできる形式です。これには3つの利点がありました。①再発注が一瞬(横断歩道は3回作り直しました)、②納品済み・未納品の管理が発注書のチェックで済む、③うまくいった言い回しが資産として貯まる。「市松模様の呪文」も、発注書に書いてあるから毎回忘れずに済んでいます。発注文をファイルに残しておくと、何を頼んで、どこを直したかも後から確認できます。

世界観は「画風の指定」で揃える

枚数を量産していると、1枚1枚は良くても並べたときにバラバラ、という問題が出てきます。対策は発注文の後半を全カード共通の定型にすることでした。『フルスタック!』なら「ノートPCに貼るステッカー風のフラットイラスト。太い白フチ。文字は入れない」。この2〜3行を全発注に付けるだけで、35枚のカードが同じ売り場の商品に見えるようになります。逆に言うと、画風の指定を都度アドリブで書いていた初期の数枚は、後からすべて再発注になりました。

納品後の処理も定型化しています。届いたPNGは余白をトリミングして正方形キャンバスの中央に置き、512pxへ正規化してから組み込む。ゲーム側は「512pxの透過PNGが来る」前提で組んであるので、受け入れのたびに個別調整をしなくて済みます。

AI画像生成と付き合うコツ

今回のような画像を作るときに気をつけていることは3つです。①構図の雰囲気ではなく「まっすぐ」「等間隔」「遠近感なし」のような制約で指定する。②市松模様のように失敗のパターンが分かったら、発注文に書き足して次も使う。③届いた画像をコンタクトシートで確認し、必要なら透過処理や補正をする。横断歩道の白線も、生成だけではまっすぐにならず、最後はコードで直しました。