ベーマガ世代、ChatGPTとゼロからRPGを作る旅

第21章：王都の町作り～噴水タイルと水路

王都の町マップ

本ゲームでは、ストーリーを発散させないために、人間の居住地は村・町・都の三つに絞っている。
（それでもなんだかんだ要素が増えて、制作が伸びているが……）
主人公の故郷であるハーマの村から西へ行くとブレイマーの町。 そこから北へ行くと王都バルハルトだ。

ブレイマーの町は木の壁と石壁の混合式だが、王都は掘に囲まれた城壁の中に町がある堅牢な作り。
城門から町を抜けて最奥部に王城とするのか、ぐるっと回遊して中央に城みたいな作りにするのか悩みどころ。

ChatGPTに相談したら、奥に進むごとに階級や重要性が増す王道構造（スラム→広場→貴族街→城）が合うのではとのこと。

個人的には回遊スタイルに興味があった。２０年ぐらい書き続けている未発表ファンタジー小説では、このスタイルの城下町を採用している。
攻め落とすには、敵は狭い路地の坂道をぐるぐる回りながら数多の城門を突破し、最長ルートをたどらねばならない。これぞ鉄壁のかたつむり構造！
しかし残念ながら、２Ｄマップで中央を高くする渦巻構造は、ちょっと表現が思いつかない。

結局、お勧め王道スタイルでのマップ案を作ってみることにした。

【西】　　　　　　　　　　　 　　　 【東】
┌─────────────┐
│ 城門 🛡　　　　　 　　　　 │
│ ↓ 　　　　　 │
│ 城下町（市場・広場・民家・酒場など） │
│ ↓ 　　 │
│ 貴族街（館、噴水、公園）　　　 │
│ ↓ 　 │
│ 城門２（小門）🛡　 　　　 │
│ ↓ 　　 │
│ ┌───────────────┐
│ │ 王城 🏰（中庭） │
……

北側に城、と念押ししたが、どうもChatGPTは時系列で上から下に描くようである。
ちなみに私は方向音痴なので、このゲームではすべて「北が上」。
上から下に階段を上らせるのは絵的に厳しいので、北側を城にする必要がある。

ChatGPTはどうしても城下町と貴族街を分けさせたいようだ。
そういやあドラクエ１１やオクトパストラベラーでも、貧民街と高台の貴族の町が露骨に分かれている構造があったっけなあ……
この都で階層構造を強調したいわけではないので、城以外はフラットな作りにし、城に近い建物を気持ち大きめに描く程度にとどめた。

噴水を作ろう

ただ建物が並んでいてもつまらないので、城の中庭に作ろうとしていた噴水を、町中にも設置しようかなと思い始めた。
城の周囲には川と直結した堀がある。
ならば、町に水路を引き込んでも違和感がなさそうだ。

問題は、私の貧弱な画力で噴水アニメーションを表現できるのか？
ChatGPTに相談してみると、パーティクルを使ったプログラム例を出してくれたが、軽量シンプルに進めたいので、ドット絵でお願いしてみる。

🎨 噴水ドット絵（高精細・RPG向け）生成プロンプト案
high-resolution pixel art of a decorative medieval fountain for a classic JRPG town square, circular stone basin with carved edges, clear blue water surface and a small central statue pouring water, gentle water splashes, top-front perspective (¾ view), SNES / Dragon Quest III-style, soft color palette, simple shading, 96x96 pixels, transparent background
「この静止ドット絵をまず生成してみたい」
「動きをつけたアニメ版で試したい」
どちらを先にやってみようか？

アニメーション版でお願いしたいな。

▲一枚絵だった。

いや、だからアニメーションって……聞いてた？　ねえ、聞いてた？
まあ、仮で描いてもらっただけなので、ここから調整だ。
そもそもtop-front perspective (¾ view) ではゲームに組み込めない。
※¾ viewは、斜め上からの視点で、スリー・クォータービューと読むらしい。

今、一枚絵になってしまったけど、アニメーションのプロンプトだとどうなる？
噴水タイルをマップに貼って、３コマぐらいの切り替えでアニメーションさせたい。 見下ろし視点、斜めでなく真正面からの構図で。

▲横長にすると、左右見切れがちである。

なるほど、波紋はこうやって広げればいいのか。
ただ、このままアニメーションにするのはやはり無理。
左右はみ出しているのは、16色のビットマップに作りなおす際に自力で調整するとして、像からこぼれる水が出たり止まったりするのは変な気がする。
それに、これを96px×96pxで表現した場合、左右や上下に水路をつなげようとすると位置が半端だ。

48×48pxの水路とつなげることを考えると、縦横48px×3ブロックの池を作っておいて、
真ん中に噴水だけを48×48pxで描けると良いかもしれない。

その設計だと、以下のように構成できるね：

💧 構造プラン
┌───────────────┐
│ 水路タイル │ ← 48×48（共通）
│ ┌───────┐ │
│ │ 噴水(48×48) │ │
│ └───────┘ │
│ 池タイル(3×3) │ ← 全体144×144
└───────────────┘

つまり：
外側：48×48pxの「池の縁」タイル9枚（3×3）
中央：噴水タイル（48×48px、アニメ3コマ）

🎨 噴水タイル生成用プロンプト案（48×48、真正面）
pixel art spritesheet of a small decorative fountain for a top-down RPG map, front-down view (not isometric), showing 3 animation frames of gently splashing water, simple circular stone basin, SNES / Dragon Quest style, 48x48 pixels per frame, transparent background, evenly spaced frames on a single row

生成する前にちょっと手が止まる。
もともとは「像」や「縁」みたいなものは想定していなかった。
一段高い噴水というよりは、池の中で水が吹きあがっているだけで良い。

噴水のとこなんだけど、stone basinっているかな？ 水しぶきだけにしたら、池の真ん中に溶け込むかな？　なんて思って。

まさにそこ、「stone basin をなくすかどうか」は、噴水を池の一部として自然に見せるか、それとも独立したモニュメントとして際立たせるかの分かれ目なんだ。

✨ basinなしで作るときのポイント
水面の色（池と合わせる）を透過気味にして、周囲と溶け込む。
中央に「湧き上がる水柱＋飛沫」だけ描く。
フレーム3枚で「水が湧く → 高く上がる → 落ちる」をループさせると◎。

🧾 basinなし噴水タイル（48×48・3コマ）生成プロンプト案
pixel art spritesheet of a small water spring fountain without stone basin, for a top-down RPG map, front-down view (not isometric), showing 3 animation frames of gently splashing water rising from the surface, clear blue water, subtle highlights, SNES / Dragon Quest style, 48x48 pixels per frame, transparent background, evenly spaced frames on a single row

▲水ブロックだけ円筒形に切り抜かれた、おもしろい立体画像ができあがった。

これを水面に溶け込ませるには結構テクニックがいる。

今円形になっているんだけど、くっつけたらバックは全部水になるから、できたら背景全体水にしてしまうといいかも？
落ちてくる白いしぶきを多めにして、背景の水色と差別化する必要がありそうだけど。

🎨 改良版生成プロンプト案
pixel art spritesheet of a small water fountain animation on a full water surface background (no stone edge), for a top-down RPG map, showing 3 animation frames of a white water splash rising from the blue water surface, front-down view (not isometric), SNES / Dragon Quest style, 48x48 pixels per frame, transparent background, evenly spaced frames on a single row, strong white splash contrast against blue background

▲水の中の噴水アニメーション案

背景はつながったが、やはりまだ水量が少ない。
また、水の輪のない周囲の池の水面とどうつなげればよいのか。周りの水面もアニメーションさせなければならないのか。
この辺り相談すると、周りの池のアニメーション案も書いてみてくれた。

▲周囲の池の水のアニメーション案

結局、これらの絵を横目で参考にしつつ、自分でドット絵をポチポチ打ってみることに。
中心から水が吹き上げている絵を描いた後、そこから弧を描いた感じで水滴を周囲に落としてみた。
すこーしだけ波のある水背景の上に噴水を重ねて、それぞれ３フレームのアニメーションで重ねてみる。

▲左端が背景。右端が噴水

なんじゃこのしょぼいの？　と思われるかもしれないが、１６色しかないので苦肉の策である。

▲１６色の中にいい感じのブルーがなかったので、水路の水は二色のドットを交互に入れている。

正直描いている時は自分でも不安しかなかったが……
動いてみると、それなりに噴水っぽく見えるではないか！
水路の水も適当に作ったわりに流れているように見え、「おおっ！」となった。

▲動いている様子は、ぜひゲーム内で見ていただきたい。

このゲーム内でいろいろな水のドット絵を描いてきたが、ちょっとずつは上達している気がする。

タイル作りの秘密

この王都の地面、タイルがブロック型でないのに気づかれた方はいるだろうか？
実は、いい加減ブロックを描くのが飽きてきたため、ミツバチスタイルで六角形をベースにしてみた。

マップチップ縦横は48px。
縦横12pxに収まるように六角形を作ればシームレスにつながる……というわけにはいかなかった。
左右はつながるのだが、上下は間に別の六角形の一辺が挟まり、結局18pxごとの繰り返しとなってしまったのだ。
マップチップは縦横48pxなので、３パターンのタイル（A,B,C）を上から下にA,B,C,A,B,Cのように並べていくことで解決できた。

チップの素因数：48=3*2*2*2*2
タイルの素因数：18=3*3*2
最小公倍数：(3*2*2*2*2)*3=48*3=144
つまりタイル３回で元の模様に戻るというわけ。

ゲーム作りには算数が欠かせない。
素因数分解や最小公倍数なんて、世の中に出たら役に立たない！　と言っているお子さんには、ゲーム作り……いや、タイル敷き詰め問題を考えさせるのがお勧めかも。
抽象的な解き方を暗記するより、実例で理解するのが一番だ。

ちなみに四角形のブロックは描くのは簡単だが、それはそれで悩みがある。
以下のように初めから2の倍数でパターンを繰り返しているのだが、右端や左端に黒いラインが付かないため、背景が同じ色だと境目なしにつながって見えてしまうのだ。

▲右下画像を見ると分かるが、右端が一面灰色のチップと同化してしまう。

初期のドラクエで床は赤レンガ、壁はグレーとしっかり色分けしているのには、いろいろ理由がありそうだ。

「隣のブロックとの境」はなかなか厄介な問題である。
ハーマの村ではうっかり道路に草むらを少しはみ出すスタイルで描いてしまったため、上下が草むら、左右が草むら、行き止まり（三方が草むら）、T字路（上全面と右下、左下に草）、曲がり角など、大量のパターンを作る羽目になった。
屋根を壁からはみ出させ、かつすべての家の周囲に「黒い縁取り」を入れられるように、家の「左端」「右端」用の壁も描き分けた。
マップチップ製作者にしか分からない、プレイヤーからするとまったくどうでもよい苦労なのだが、少し凝り始めるとすべての作業が爆増していくので大変……

次回はいよいよ手に汗握る（？）コロシアム戦について！