タイルマップエディター — 無料オンラインのタイルマップ作成＆レベルエディター

タイルマップエディターとは、グリッドとタイルセットとブラシです。PNG を読み込むか、プロンプトからセットを生成し、セルサイズをひとつ設定して、レイヤーをまたいでセルを塗り、通行を塞ぐセルに衝突の印を付け、書き出します。このページのタイルマップエディターはブラウザで動作します。ダウンロードもアカウントもビルド手順も不要で、最初に目に入るのはエディターのスクリーンショットではなく、エディターそのものです。

以下では、このツールが実際に何をし、どこで破綻するのかを説明します。なぜ 1 ピクセルの余白があるシートが、タイルサイズだけを入力すると正しく読み込めないのか。なぜ各辺 2 状態のオートタイル規則には、16 ではなく 47 のバリエーションが必要なのか。PNG には載せられない何を TMX が運ぶのか。そして、再生ボタンを押して描いたばかりのマップを歩けることが、修正の速さをどう変えるのか。

タイルマップエディター（ライブツール）

ライブツールはこのページの最初にあります。キャンバスはグリッドで、その横にタイルセットが並び、レイヤー一覧は、ひとつずつ非表示にしたりロックしたりできる独立したグリッドの積み重ねです。セルを塗るのはクリックひとつ。ドラッグすれば連続したセルを塗れます。矩形ツールは範囲を塗りつぶし、塗りつぶしツールは広い床を処理し、消しゴムは下のレイヤーまで消し戻します。

仕事をするのは 4 つの機能です。グリッドは文書全体でひとつの数値、つまりピクセル単位のセルサイズを固定し、すべてのブラシ、レイヤー、書き出しはその単位で測られます。ブラシはクリックが何を書き込むかを決めます。単一タイル、矩形ブロック、塗りつぶし、線、消去です。レイヤーは別々のグリッドを重ねるので、地形、装飾、衝突は独立したまま編集できます。衝突はセルを通行不可として印を付け、絵に描き込むのではなくデータとして保存するので、壁を塗り直すたびにその衝突ボリュームを作り直す必要はありません。

描くことと遊ぶことの間に、保存ダイアログもコンパイル手順もありません。エディターが書き出す文書は、そのままランタイムが読み込む文書です。これにより、あるプログラムでは正しく見えるマップが、別のプログラムに読み込んだ途端に半タイルずれる、という一群のバグが丸ごと消えます。

タイルセットを読み込むか、生成する

入り口は 2 つあります。手持ちの PNG を読み込むか、テキストプロンプトからセットを生成してそれで描くかです。どちらも同じ場所に行き着きます。キャンバスの隣に、整列されたタイルシートが置かれます。

どちらも自分で用意したくない場合、無料タイルセットライブラリは、よく使われるセルサイズの既製シートを集めたカタログです。Agent Sprite Forge は問題のもう半分、キャラクターと小道具を担当します。これらは地形とは別の規則に従い、通常は 1 アクションあたりより多くのフレームを必要とします。

エディターは何かを読み込む前にタイルサイズを尋ね、その数値は絵と正確に一致していなければなりません。16 ピクセルのタイルが並ぶ 256×256 のシートは、16 列×16 行です。シートの縁に 1 ピクセルの余白があり、タイル間に 1 ピクセルの間隔がある場合（スプライトツールではよくある既定値です）、単純な計算では列数が間違って出るので、余白と間隔も入力するか、シートをトリミングしてください。間違えるとグリッドがずれます。1 列目は問題なく見えても、それ以降のタイルはシート全体に広がる誤差でずれていきます。

タイルセットの読み込みを壊す原因はほかに 3 つあります。絵が整数でない倍率で拡大縮小されたために 15 や 33 ピクセルになっているタイル。隣のセルに 1 ピクセルはみ出して描かれた絵。これは継ぎ目ごとに隣のタイルの細い線として現れ、エンジンがフィルタリングを有効にしてサンプリングすると悪化します。そして、透明な領域が実際には黒になっているアルファチャンネル。これはマップを描画した瞬間、空のセルをすべて塗りつぶしブロックに変えてしまいます。

代わりにセットを説明しましょう。セルサイズ、視点、パレット、そして必要なタイルの役割（床、壁、壁の角、扉、水際など）です。AI タイルセットジェネレーターは、要求したセルサイズにすでに整列されたシートを返すので、余白の計算なしで読み込めます。

結果は出発点として扱いましょう。生成されたセットは表面は得意でも連続性は苦手です。16 枚目の床タイルが 1 枚目とシームレスにつながることはまれで、端のタイルはオートタイルが連結した地形として受け入れる前に、たいてい塗り直しが必要です。

タイルを描き、レイヤーと衝突を追加する

編集しやすいままのマップは、1 枚ではなく 3 つのレイヤーでできています。地面はプレイヤーが歩く地形を保持します。ディテールは、壁、木、木箱、デカールなど、上に描かれるすべてを保持し、地面に触れずに見た目を変えたり隠したりできます。衝突は目に見えるものを何も保持しません。プレイヤーが入れないセルのマスクです。

衝突は地形に焼き込んだ暗いタイルではなく、専用レイヤー上のデータとして保ちましょう。衝突ボリュームを地面の絵に描き込んでしまうと、絵を編集するとレベルデザインが変わり、レベルデザインを編集すると絵が変わります。レイヤーを分けておけば、床を何度でも塗り直せて、壁は元の位置にとどまります。

注意すべき失敗パターンは、壁の並びの中の 1 つの未設定セルです。40 タイル続く壁に衝突セルが 1 つ欠けていると、プレイヤーがすり抜ける穴になり、通常のズームでは見えません。それを見つける手順はこうです。衝突以外のすべてのレイヤーを隠し、マップをシルエットとして眺め、輪郭が途切れていないか確認します。

オートタイルと 47 タイルセットの解説

オートタイルは、周囲に何があるかに基づいて描くタイルを選ぶ、タイルマップエディターの機能です。壁の角を手で選ぶ代わりに、任意の壁タイルを描くと、エディターが隣接するセルを調べ、ビットマスクを構築し、一致するバリエーションに差し替えます。1 つ目の隣にもう 1 つ壁を描けば、両方のセルが更新されます。

規則の単純な版は、北・東・南・西の 4 つの隣接セルを見て、2 の 4 乗、つまり 16 通りの組み合わせを扱います。このセットは描くのは簡単ですが、1 か所だけ失敗します。内側の角です。北に壁、東に壁があり、それ以外に何もない床のセルを考えてみましょう。これは珍しいケースではなく、L 字型の部屋の内側がどこでもそう見える姿です。16 タイルのセットには、1 つのセルの北側と東側の両方に沿って縁を描くバリエーションがないので、はぐれ床ピクセル、二重の境界線、あるいは目に見える穴が生じます。

47 タイルのブロブセットは、ブロブタイルセットとも呼ばれ、4 つの角を加えます。8 つの隣接セルを素直にすべて追うと、2 の 8 乗、つまり 256 通りの組み合わせになり、その大半は冗長です。角は、それに接する両方の辺が埋まっているときにだけ絵を変えます。2 つの空の辺の間に位置する角は、その 4 つの状態すべてで同じように描画されます。この 1 つの削減を適用すると、256 のケースが 47 の異なるケースにまとまります。この数字はここから来ています。

エディターは通常、ブロブセットを 8 ビットマスクで索引付けされたルックアップテーブルとして保存します。辺に 1、2、4、8、角に 16、32、64、128 です。描くとき、エディターは描いたセルと、同様にオートタイルされているすべての隣接セルのマスクを再計算するので、1 回のクリックで最大 9 個のセルを書き換えられます。実務上の帰結は、オートタイルには専用の地形レイヤーが欲しいということです。手で配置した小道具をそのレイヤーに混ぜると、オートタイルの更新のたびに、それらを上書きしてよいかを判断しなければならなくなります。

Tiled マップ と タイルマップ — どちらのこと？

2 つの異なる検索がここにたどり着き、それぞれ違うものを求めています。タイルマップエディターはカテゴリーです。タイルのグリッドを描いてマップを生成する、あらゆるツールを指します。Tiled はそのカテゴリーの中の 1 つの具体的なプログラムで、mapeditor.org で公開されているデスクトップエディターであり、人々はそのプログラムを名指しするとき、よく「tiled map editor」という検索語を入力します。

カテゴリーのことを指していたなら、このページのライブツールはタイルマップエディターで、インストールは不要です。ブランドのことを指していたなら、おそらく求めているのは、すでに持っているファイル — デスクトップのワークフローが生成する TMX プロジェクトや TSX タイルセット — を開き、今使っているマシンに何もインストールせずに作業を続けられるものです。Tiled の代替ページがそれを直接扱っています。どのファイルが引き継げて、どの設定が引き継げないのか、そして 2 つの書き出し形式がどう対応するのかを。

仕組み上の違いは、文書がどこに住むかです。デスクトップエディターはプロジェクトをローカルディスクに書き込み、それらを再び開くにはそのマシンにプログラムがインストールされている必要があります。ブラウザエディターは文書をセッションとブラウザストレージに保ち、どこか別の場所でマップを再構築できるだけの完全さを書き出しに依存します。だからこそ書き出し形式が両者の本当の橋渡しになるのです。それが次のセクションの話題です。

マップを書き出す（PNG / TMX / JSON）

3 つの形式、3 つの役割。どれが最も公式に聞こえるかではなく、何がそのファイルを読むかで選びましょう。

PNG は平坦な画像です。書き出しツールはマップをセルサイズ×マップサイズで描画するので、32 ピクセルのセルが並ぶ 40×25 のマップは 1280×800 ピクセルになり、レイヤーは 1 枚の画像に統合されるか、レイヤーごとに 1 ファイルとして書き出されます。モックアップ、サムネイル、メニュー背景、あるいはアーティストとの打ち合わせに使いましょう。エンジンへの受け渡しには使わないでください。PNG はグリッドもタイルの識別情報も衝突も運ばないので、下流では色以外に壁と床を区別する手立てがありません。

TMX は Tiled の XML 交換フォーマットで、タイルツールのエコシステムが持つ共通語に最も近いものです。レイヤー、タイルセット参照、タイルごとのプロパティ、オブジェクトレイヤー、カスタムプロパティを運び、ほとんどのエンジンとコンバーターが読み取れます。バグの大半を引き起こす詳細が 1 つあります。TMX のタイル ID はマップ内のすべてのタイルセットにまたがってグローバルで、タイルセットごとの firstgid でオフセットされます。2 つのシートを統合してこのオフセットを間違えると、2 つ目のシートを使ったすべてのセルが、間違ったシートのタイルで読み込まれます。エラーは出ません。ただ見た目がおかしくなるだけです。

JSON は、ほとんどのエンジンとウェブのランタイムが直接取り込む形式です。通常はレイヤーの一覧で、各レイヤーがタイルインデックスの平坦な配列とセルサイズを保持し、衝突は別の配列になります。読み込む側が実行時にマップを構築するため、行の順序の慣習が重要です。これを反転するとマップ全体が上下に鏡映しになり、海岸線のあるマップでは明らかで、対称的なダンジョンでは見えません。空のセルにも決まった値が必要です。形式によって 0 を使うものもあれば -1 を使うものもあり、間違った方を選ぶと、すべての隙間に実際のタイルが置かれてしまいます。

自分のマップの中に入る（プレイ可能なデモ）

このページのプレイ可能なデモは『サイクロプスの島』。同じエディターで描いたタイルマップから作られた、アイソメトリックのピクセルアートゲームです。再生を押すとカメラがマップの中に降りていきます。衝突レイヤーは壁になり、地面レイヤーはキャラクターが歩く床になり、ディテールレイヤーは位置に応じてキャラクターの後ろか前に描画されます。

これは、ほとんどのツールページが飛ばしてしまう手順です。マップを描いて書き出すということは、プレイヤーの縮尺でレベルを初めて目にするのが、別のプログラムで、別のカメラで、ビルドの後になるということを意味します。その場で遊べれば、レベルデザインは 1 分に 10 回転できるループになります。通路を描き、歩き、1 タイル広すぎることに気づき、描き直す。

アイソメトリック投影は、直交マップでは考えなくてよいことを 1 つ追加します。描画順です。画面上で下にあるタイルほどカメラに近いので、レンダラーは奥行きで、おおよそ行ごと、次にレイヤーごとに並べ替えます。そうしないと、キャラクターを遮蔽すべき壁の上にキャラクターが描かれてしまいます。症状は、壁の後ろを歩くときスプライトが壁の上端から飛び出して見えることです。デモでこれを見たら、原因は衝突マスクではなく深度ソートです。

そこからマップは 2 つの方向に進めます。2D のままなら、プレイヤーコントローラーを載せたタイルマップのままです。3D ゲームビルダーに持ち込めば、同じグリッドがジオメトリになり、各セルが床のスラブや壁として押し出されます。これが Mini World の土台にあるアプローチです。キャラクター側は Agent Sprite Forge が担当します。どちらの道でも、あなたが描いたグリッドは変わりません。

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

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

FAQ