タイルマップの作り方 — 無料エディターで学ぶステップバイステップガイド

タイルマップの作り方を学ぶというのは、ほとんどが 4 つの決定を正しい順序で下すことに尽きます。セルサイズ、タイルセットの並び、レイヤーの積み重ね、そして衝突をどこに持つか。これらを一度決めてしまえば、あとはマップを描くだけの機械的な作業になります。

以下の手順は、書かれた説明が Neta Studio でプレイ可能な世界になるまでに私たちが使う順序に沿っています。タイルセットを選ぶか生成し、グリッドを固定し、ディテールより先に地形の塊を置き、レイヤーを分け、最後にオートタイルで端を解決します。ここでは何もインストールする必要はありません。エディターはブラウザで動作し、以下の数値はすべて、マップを描き直すことなく後から変更できます。

タイルマップとは？（明快な定義＋図解）

タイルマップは、絵のグリッドではなく、インデックスのグリッドです。各セルは、タイルセット内の 1 枚のタイルを指す整数を保持し、レンダラーはそのインデックスを参照して、セルの位置にタイルを描画します。32 ピクセルのセルが並ぶ 20×12 のマップは、240 個の整数で、640×384 ピクセルを覆います。

この間接参照こそが要点です。草のタイル 1 枚はシートに 1 度だけ保存され、何百ものセルから参照されるので、マップファイルは小さく保たれ、すばやく読み込めます。タイルマップは絵ではなくデータなので、ノイズ関数から生成したり、テキストとして編集したり、Git で 2 つのバージョンを差分比較したり、カメラの移動に合わせてチャンク単位でストリーミングしたりできます。

このページの上部にある図は、私たち自身のタイルを 32 ピクセルの 12×8 グリッドに並べたものです。草が内部を埋め、砂が左端と下端に沿って走り、砂が途切れる右下の角に水があります。データとして読むと、列 3・行 0 のセルは草のインデックスを保持し、列 0・行 7 のセルは水の角のインデックスを保持し、そのほかのすべてのセルは普通の砂のインデックスを保持します。原点は左上で、x は右へ、y は下へ増えます。エンジンが左下を原点に使う場合、行インデックスを「行数−1−y」に反転するまで、マップは上下逆に描画されます。

• グリッドマップ作成時に固定される列と行。20×12 のマップと 40×24 のマップは、同じカメラズームでもまったく異なる挙動になります。
• セルサイズ1 つのセルのピクセル上の大きさ：16、32、48、64。タイルセットのタイルサイズと正確に一致していなければならず、そうでないとサンプリングがタイルの途中に落ちます。
• タイルの集合インデックスが指し示す画像と、それが何列・何行あるかの定義。
• インデックスのレイヤー1 レイヤーにつきセルごとに 1 つの整数。地面レイヤーは密で、ディテールレイヤーはほとんど空、衝突レイヤーは絵ではなくフラグを保持します。

タイルセットとは？（タイルマップとの違い）

タイルセットは絵本であり、タイルマップはその中への参照を並べたページです。タイルセットはピクセルを所有します。シートと、そのシートがたとえば 32 ピクセルのタイル 8 列分であるという規則です。タイルマップは配置を所有します。各レイヤーの各セルにどのインデックスが入るかです。

この 2 つの言葉は絶えず取り違えられます。ほとんどのエディターが同じパネルに両者を並べて表示するからであり、単一ファイルの形式がその分割を隠せるからです。Tiled では分割は明確で、タイルセットファイルはマップファイルとは別です。Unity では、Tile アセットがスプライトを保持し、Tilemap コンポーネントがセルを保持します。Godot では、TileSet とタイルマップレイヤーは別々のリソースです。

実際の帰結はこうです。タイルセットを変更すると、それを参照するすべてのマップが変わり、タイルマップを変更すると 1 つのレベルだけが変わります。32 ピクセルのシートを 48 ピクセルのシートに差し替えると、どのインデックスも依然として解決されますが、すべてのマップが別の縮尺で描画され、端で隣のタイルをサンプリングしてしまうかもしれません。タイルセットは、バージョン番号を伴う公開インターフェースとして扱いましょう。

ステップ 1：タイルセットを選ぶ、または作る

ルートは 2 つあります。既存のシートを使うか、生成するかです。既存のシートのほうが速いですが、そのパレット、セルサイズ、ライセンスを引き継ぐことになります。その上に 40 枚ものマップを築く前にライセンスを確認し、それが詰め込み型のアトラスではなくグリッド状のシートであることを確認しましょう。アトラスは、均一なセルではなくタイルごとに矩形座標を保存するため、インデックス付けが難しくなり、オートタイルも扱いにくくなります。

地形が特定のパレットに一致しなければならないなら、生成しましょう。Agent Sprite Forge は、書かれた説明から一定のセルサイズのタイルシートを生成し、最もよくあるずれの原因を取り除きます。それは、アーティストがセルの外にハイライトを足したために、1 枚のタイルだけ幅が 33 ピクセルになっているシートです。

どちらのルートを取るにせよ、最初の作業は描くことではありません。測ることです。シートを 100% のズームで開き、列と行を数え、チームのほかのメンバーが見つけられる場所にセルサイズを書き留めましょう。

• 単一のセルサイズほとんど空のタイルも含め、すべてのタイルを同じ幅と高さに。32 ピクセルのシートに 33 ピクセルのタイルが 1 枚あるだけで、書き出しツールが読み順で詰め込む場合、それ以降のすべてのインデックスがずれます。
• 本物の透明白ではなくアルファ。不透明な白背景のシートは、ブラウザで空の上に白い箱を描いてしまいます。
• 記録されたグリッド列、行、余白の有無を記録しましょう。インデックスの計算は「行×列＋列」で、0 始まり、左から右、上から下へ読みます。
• 間隔の方針を決める余白のあるシートは、テクスチャの滲みを減らすためにセル間に 1〜2 ピクセルを追加しますが、その代償としてサンプリング計算にオフセットが生じます。最初の描画の前に、どちらを使うか決めておきましょう。

ステップ 2：タイルサイズとグリッドを決める

セルサイズは 3 つの要素で決まります。プレイヤーが実際にプレイするズーム、目標とする描画解像度、そして描く覚悟のあるアートの量です。1920 ピクセル幅のビューポートに 16 ピクセルのタイルを置くと、横に 120 セル並び、1 画面あたりのレベル量は多く、ディテールの余地はほとんどありません。64 ピクセルのタイルなら 30 セルで、読める木を描くのに十分なピクセルがあります。

厳しい制約は算数です。セルサイズはシートを割り切れなければなりません。256 ピクセル幅のシートは、32 ピクセルならちょうど 8 列、48 ピクセルなら 5.33 列になるので、最後の列はタイルの端数となり、それ以降のすべてのインデックスがずれていきます。シートの寸法は美的な選択ではなく、セルサイズの倍数です。

整数倍で拡大縮小しましょう。ビューポートがグリッドの整数倍でないと、セルが半ピクセルに落ち、フィルタリングが隣り合う 2 枚のタイルをサンプリングし、マップ全体を縦に 1 ピクセルの継ぎ目が走ります。両端から直しましょう。エンジン側では最近傍フィルタリング、カメラ側では整数のズームです。

ステップ 3：まず地面を、次にディテールを描く

作業は段階に分けて進め、常に地形を先にしましょう。地形はあなたが変更するもの、装飾は動かしたくないものです。木を 60 本置いてから海岸線を 4 セル左にずらすと、それらの木は突然すべて水の中に立つことになります。

まず 1 種類のタイルから始めましょう。マップ全体を 1 つの草のインデックスで埋め、プレイ時のズームでシルエットを見て、それから初めてオートタイルに端を解決させます。ディテールは形が固まってから、衝突はディテールの後に来ます。小道具が歩けてしまうと気づくのは、描き直しではなく衝突の編集だからです。

プレイヤーから見えるものはすべて描きましょう。空のセルは、レンダラーがマップの背後に描くものになり、それは通常、意図した背景ではありません。クリアされたキャンバスに頼るより、カメラに設定した背景色のほうが安全です。

ステップ 4：レイヤー、奥行き、衝突を追加する

タイルマップは、レイヤーに分けた瞬間に平坦でなくなります。最小限役立つ積み重ねは 3 つです。密な地面レイヤー、まばらなディテールレイヤー、そして絵をまったく保持しない衝突レイヤーです。マップ内の何かがプレイヤーを隠すべきなら、キャラクターより上のオーバーレイレイヤーを早めに追加する価値があります。

奥行きも同じグリッドから生まれます。見下ろし型のマップでは、各オブジェクトの下端で並べ替えます。足元が最も低いものが最後に描画されます。タイルの場合、セルの y がすでに位置を表しているので、これは無料で手に入ります。動くキャラクターには、決定的なタイブレークを伴うオブジェクト単位の並べ替えが必要で、通常はオブジェクトの y に、セル内での小数のオフセットを足したものです。それがないと、同じ行にある 2 つのオブジェクトがフレームごとにちらつきます。

衝突は、同じ寸法の並行配列としてグリッドに対応します。タイルセット内で各タイルに固体フラグを付け、壁を描けば同時に固体として印が付くようにし、マップごとの上書きには衝突レイヤーを使います。セル単位のフラグでは、セル内部の斜面、一方通行の足場、薄い壁を表現できません。それらはタイルマップではなく、グリッドの上に重ねる別個のオブジェクトに属します。

• 地面レイヤー密：すべてのセルがインデックスを保持します。安全にオートタイルできる唯一のレイヤーです。
• ディテールレイヤーまばらで、空のところは透明。木、岩、デカール。ここにあるものが誤って移動を妨げてはいけません。
• オーバーレイレイヤーキャラクターより上に描画：木の梢、橋、屋根。プレイヤーを隠すべきものはすべて。
• 衝突レイヤー絵はなし。マップと同じ大きさの真偽値の配列で、タイルセットの固体フラグから初期化し、例外は手作業で編集します。

ステップ 5：オートタイルと 47 タイルセット

オートタイルは、静かに失敗する部分です。8 つの隣接セルを持つ地形タイルには、2 の 8 乗、つまり 256 通りの隣接の組み合わせがあります。角は、それに接する両方の辺が埋まっているときにだけ意味を持ち、その対称性によって 256 通りのケースが 47 枚の固有のタイルにまとまります。これが、ほとんどのエンジンとエディターが地形ごとに 47 タイルのブロブセットを、記録されたレイアウトで消費する理由です。

16 タイルセットにも出会うでしょう。これは 4 つの辺の隣接セルを読み、角を無視します。また 2×2 のミニタイルセットでは、各セルが 4 つの 4 分の 1 タイルから描画されるので、13〜16 枚のミニタイルですべてのケースを覆えます。16 タイルセットは描くのは簡単ですが、角が鈍くなります。ミニタイル方式は必要な画像が少ない代わりに、すべての地形を 4 分の 1 単位で作らなければならず、ピクセルアートが柔らかくなります。

すき間なくオートタイルされるタイルマップの作り方

マスクが仕組みのすべてです。各セルについて、8 つの隣接セルから 8 ビットの整数を構築します。ビット 0 が北、ビット 1 が北東、ビット 2 が東、以降は時計回りです。順序を 1 つ選び、コードの隣に書き留め、決して変えないでください。1 ビットずれたマスクでも、それらしい地形は生成されてしまうので、食い違った慣習が、誰かが角の誤りに気づくまで何か月も生き残ります。

次にマスクをタイルインデックスに変換します。方法は 2 つあります。256 項目の完全なルックアップテーブルは、生成が簡単で、行を出力できるのでデバッグも容易です。もう 1 つは 47 項目のテーブルと対称性関数です。対象がメモリ制約を受けない限り、完全なテーブルを取りましょう。角に関するバグの一群を丸ごと取り除けます。

オートタイルを組み込む前に知っておくべき失敗パターン

マップの端の継ぎ目は、範囲外のセルの扱いが一貫していないことから生じます。マップの外の世界が空なのか同じ地形なのかを一度決め、その規則をすべての地形に適用しましょう。

2 つ目のよくある失敗は上書きです。オートタイルは自分が管理するセルを書き換えるので、特定の見た目のために手描きしたタイルは、次のパスで消えてしまいます。オートタイルの後に地形レイヤーをロックするか、手動の上書きを最後に適用する別のリストに保存しましょう。

開いて遊べるタイルマップの作例

動くマップを読むことは、その説明を読むよりも多くを教えてくれます。『サイクロプスの島』は、単一の地形セットと別個の衝突レイヤーで作られたプレイ可能なマップです。海岸線を歩き、砂から水への移行でタイルが変わるところを見てください。それが実際に使われている 47 のブロブのケースです。

Mini World はより小さな作例です。開いてレイヤーの積み重ね — 地面、ディテール、オーバーレイ — を見て、マップが空っぽではなく完成して見えるのに、どれほどわずかなディテールタイルで足りるかを確かめましょう。

3D ゲームビルダーは同じグリッドを受け取り、それを押し出します。各セルはブロックになり、衝突レイヤーは垂直の壁になり、y による並べ替えは Three.js シーンでの本物の奥行きになります。あなたの 2D マップが首尾一貫していれば、3D 版にかかる手間はほとんどありません。レイヤーが混ざっていれば、押し出しがそれを即座に暴きます。

• 『サイクロプスの島』エディターのズームではなくプレイ時の速度で、オートタイルされた地形の端を研究するための歩けるマップ。
• Mini Worldスクロールせずにレイヤーの積み重ねを確認するための小さなグリッド。
• 3D ゲームビルダー同じタイルマップをブロックに押し出したもので、衝突レイヤーがジオメトリになり、奥行きが本物になります。

タイルセットテンプレートのダウンロード（PS / Aseprite グリッド）

このテンプレートは描画の補助であり、必須ではありません。透明なキャンバスで、セルごとにガイドがあり、安全領域を示す 1 ピクセルの内側の印があり、上端の行と左端の列に沿ってインデックス番号が付いているので、描きながらインデックスがどこに収まるかを確認できます。その上に描き、書き出しの前に非表示にしましょう。

テンプレートはプロジェクトに合わせましょう。512×512 のキャンバスには、32 ピクセルのセルが 16×16 並びます。16 ピクセルのセルなら同じファイルに 32×32 が入り、ガイドの不透明度を下げるべきです。その密度ではガイドがアートを隠してしまうからです。

それが属する世界へ、歩いて入ろう

スプライトとは、立つ場所を持たないキャラクターです。最後の一手は、ほかにはないものです。いま作ったシートを、誰かが歩き回れる世界 — 小さな島、惑星、雨の通りの角 — に置きましょう。このサイトのすべての世界は、1 つの書かれた説明から作られ、プレイできるページとして公開されています。

FAQ