AIアイソメトリックゲームメーカー — ブラウザで歩ける2.5Dの世界を作る

AIアイソメトリックゲームメーカーは、書かれたシーンの説明を受け取り、遊べる2.5Dの世界を返します。ダイヤモンド型のタイルグリッド、45度のヨーに固定されたカメラ、奥から手前へ並べ替えられたプロップ、そしてクリック一つでどこへでも送れるキャラクター。Neta Studio はこれをブラウザの中で行います。文章を入力すると、コンポーザーが地形とプロップをグリッド上に配置し、あなたは再生ボタンを押すだけです。エンジンのインストールも、エクスポートの手順も、ビルドのパイプラインもありません。

普通なら週末を丸ごと食いつぶす部分は、すでに配線済みです。2:1の投影、奥行きソート、そしてクリックで移動の裏側にある画面座標からタイル座標への逆変換です。あなたが実際に操るのは、レイアウト、タイルセット、キャラクター、移動のルール、そしてカメラをどこまで動かせるかです。

一文から → アイソメトリックの世界へ

最初の画面はコンポーザーです。テキスト入力欄が一つ、タイル単位のマップサイズ、そしてタイルサイズ。レベルデザイナーに説明するのと同じ調子でシーンを描写し、生成すると、ダイヤモンド型グリッドの世界がすでに組み上がった状態でエディタに着地します。既定値は64×64タイル、1タイルあたり64×32ピクセルで、これならズームなしでも一つの平行投影カメラの中に画面いっぱいの世界が収まります。

返ってくるのは四つの層です。地面はタイルごとに地形IDを一つ保持し、タイルごとにメッシュを分けず、単一のメッシュにマージされます。プロップは登録されたフットプリントの上に載ります。1×1の樽、3×3の家、水際に接していなければならない2×4の桟橋などです。エンティティはプロップとは分けて保たれます。動くからであり、経路探索のデータを必要とするからです。照明と霧はその上に載り、ソート順には影響しません。

カメラは45度のヨーと、2:1のダイヤモンドに正確に一致するピッチに設定されます。それは atan(0.5)、約26.57度であり、多くのチュートリアルが挙げる30度ではありません。投影は平行投影なので、透視除算はなく、マップの遠い端のタイルも手前の端のタイルも同じピクセルサイズです。奥行きソートは、再生ボタンを押す前からすでに有効です。

地形の分布、バイオームごとのプロップ密度、そして一つのアトラスに収まるパレットを選びます。さらに重要なのはフットプリントの登録で、これが後の遮蔽を正しく保つ鍵になります。港町を頼めば、桟橋、木箱、水際が返ってきますが、桟橋が水に接しなければならないことを言葉で伝えない限り、それは分かりません。

ブラシで地形を塗り直し、ライブラリからプロップをドラッグし、スポーン地点を設定します。川に架からなければならない橋のように、ルールが付いたものは自分で置きます。コンポーザーが与えるのは出発点となるレイアウトであり、完成したレベルではありません。

ダイヤモンドグリッドと奥行きソートは、おまかせ

アイソメトリックのタイルとは、45度回転させ、高さを半分に潰した正方形です。tileW = 64、tileH = 32 とすると、世界座標から画面座標への変換は sx = (x - y) * 32、sy = (x + y) * 16 です。投影はこれで全部です。これは真のアイソメトリック投影ではなく、およそ26.57度のダイメトリック投影であり、まさにそのため2:1のダイヤモンドは整数ピクセルに収まり、真の30度のアイソメトリックグリッドはそうなりません。2:1の比率が選ばれるのは、両軸を等しく短縮し、すべてのスプライトを単一のカメラ角度向けに描けるようにするからです。

この投影での奥行き順は画家のアルゴリズムです。tileX + tileY が小さいオブジェクトを先に描きます。これは二つのオブジェクトが対角線を共有するまで成り立ちます。(5, 3) の柵と (4, 4) のキャラクターはどちらもキー8を生みます。ソートが返した順が上に描かれ、ソートが安定でなければ順序はフレームごとに入れ替わり、そのペアは継ぎ目でちらつきます。二つ目の破綻は高さです。中心を基準に固定されたスプライトは中央のピクセルでソートされるので、96ピクセルのランタンは、その土台の前に立つキャラクターの上に描かれてしまいます。アンカーはスプライトの下端中央、オブジェクトが占めるタイルの上にあるべきです。

三つ目の破綻はサイズです。キー20で一つのオブジェクトとしてソートされた3×3の建物は、(9, 12) のキー21のキャラクターの上に描かれてしまいます。そのキャラクターが建物の左側の列の前に立っているとしてもです。エンジンは登録されたフットプリントを読み取り、1×1より大きいものは列ごとの短冊に分割するので、キャラクターはある列の前を通り、次の列の後ろを通ります。長い壁を単一のスプライトにできないのも同じ理由です。

本物のタイルグリッドでクリック移動

これは投影の逆変換から始まります。ポインタ位置を取り、カメラの原点とレターボックスのオフセットを引き、tileX = (sx / 32 + sy / 16) / 2、tileY = (sy / 16 - sx / 32) / 2 を計算し、両方を切り捨てます。二つ目の項の符号を間違えると、キャラクターはダイヤモンドの中心を挟んだ鏡像のタイルへ歩いていきます。それが午後を丸ごと費やすことになる不具合です。

カメラが回転したり自由に動いたりできるなら、その逆変換をキャッシュしてはいけません。カメラからポインタを通るレイを飛ばし、地面平面と交差させ、当たった世界座標の点を同じ式でタイルに変換します。レイキャスト版は数行で済み、どんなカメラの変更にも耐えます。

次に検証します。クリックされたタイルは、プロップのフットプリントが載っているか、水か、マップの外か、到達不能かもしれません。範囲外の座標はクランプし、占有グリッドを確認し、8近傍について対角コスト1.414、二つのブロックされたタイルの間で角を曲がらない条件でA*を実行します。ピクセル毎秒ではなくタイル毎秒で移動するので、タイルサイズを変えても速度は一定に保たれます。スプラインで滑らかにした経路に沿ってタイル中心を通り、到着半径を約0.05タイルにしないと、キャラクターはウェイポイントごとに引っかかります。

作れるアイソメトリックのジャンル

四つのジャンルがほとんどのアイソメトリックの企画を覆いますが、それらが違うのは占有のルールと時間の進み方であり、投影ではありません。シティビルダーは、複数タイルのフットプリント、接続しなければならない道路網、配置前にフットプリントをプレビューする建設モードの上に成り立ちます。タクティクスはターン制なので、経路探索は多数のユニットについて一度に走り、射程のハイライトはダイヤモンドグリッドに直接描かれます。ダンジョンクロウラーは小さなマップと狭い通路を使い、カメラが決して動かないため列ごとの壁の分割が最も重要になります。アクションRPGはリアルタイムなので、操舵、攻撃状態、アニメーションのブレンドが、経路探索の優雅さよりも重要です。

四つすべてで同じままなのは、2:1のダイヤモンド、ソートキー、足元のアンカー、そしてクリック時の逆変換です。制作の途中でジャンルを切り替えても変わるのは占有のルールと更新ループであり、レンダラーではありません。

今すぐ遊ぶ — ブラウザの中で

ここにあるすべての世界は、インストールもエクスポートもなしにブラウザで動きます。シーングラフは Three.js、レンダラーは WebGL2（WebGL1へのフォールバック付き）で、マップはマージされた地面のジオメトリとインスタンス化されたプロップとして読み込まれます。再生ボタンを押せば、あなたは歩いています。世界を共有すれば、別の誰かが自分のマシンで、同じ45度のヨーのままその中を歩いています。

スマートフォンでも同じクリックの経路がポインターイベントを通って走るので、タップはクリックになります。タップの対象はタイルなので、1タイルのプロップに対する少し不正確なタップでも正しいタイルに解決されます。幅32タイル未満のマップでは、既定でピンチズームは無効です。2:1のダイヤモンドはスマートフォンの幅ですでに判読できるからです。フレームレートが落ちたら、マップサイズを削る前にプロップの数を削ってください。インスタンス化は地形を消すよりも効きます。

Mini World は小さなマップの事例です。小さなダイヤモンドの島、わずかなプロップ、一人のキャラクター、そして全体を横切るクリックで移動。地面のマージとタイルごとのソートの挙動を眺める最短の方法です。マップ全体を一度に見渡せて、おかしなソートキーが隠れる場所がないからです。

サイクロプスの島 は、遮蔽が本当に問題になる事例です。背の高いプロップ、壁の列、そしてその背後を歩くキャラクター。キャラクターが建物の角を通過するときの様子を眺めてください。手前の短冊はキャラクターの上に描かれ、後ろの短冊はキャラクターの下に描かれ、キャラクターが壁を突き抜けることは決してありません。

エージェント・スプライトフォージ は、アイソメトリックの角度向けに描かれたキャラクターシートを生成します。ピボットはすでに下端中央にあり、フレームの高さもタイルの高さに合わせられています。カメラを既定のヨーに保つなら、シートは一枚で十分です。カメラの回転を有効にすると、ヨーの各段階ごとにシートが必要になります。45度向けに描かれたスプライトは90度では正しく見えないからです。

それが属する世界へ歩み入る

スプライトは、立つ場所を持たないキャラクターです。最後の一歩は、他にはない当社だけのものです。今作ったシートを、誰かが歩き回れる世界に置いてください — 小さな島、惑星、雨の街角。このサイトのすべての世界は、一つの書かれた説明から作られ、遊べるページとして公開されています。

FAQ