Tiled Map Editor Online — Tiledに代わる無料のブラウザ版

タイルドマップエディターとは、大きな一枚の手描き背景ではなく、少数の繰り返しタイル画像からレベルを組み立てるプログラムです。mapeditor.org が提供するデスクトップアプリケーション Tiled は、そのアイデアのリファレンス実装です。無料でオフライン動作し、グリッドの種類に柔軟で、十分に歴史があるため、出荷済みの多くのプロジェクトがいまも .tmx ファイルを携えています。このページでは、何もインストールせずに同じペイント作業を行い、再生ボタンを押して描いたばかりのマップの中を歩き回りたい、というケースを扱います。

Neta Studio はエディターをブラウザのタブで動かします。タイルセットを読み込み、タイルサイズを設定し、地面レイヤーとディテールレイヤーを描き、衝突を設定して、プレイします。グリッドは Three.js で描画される 3D ワールドになり、操作できるキャラクターと本物の衝突判定を備えます。ダウンロードするものはなく、マシン間で同期させるプロジェクトフォルダーもなく、同じマップを開けるリンクを相手に渡すだけです。

Tiled とオンラインのタイルドマップエディター

mapeditor.org の Tiled は多くのことをうまくこなします。無料のオープンソースで、オフラインで動作し、直交・アイソメトリック・スタッガード・ヘクサゴナルのグリッドを何年も前からサポートしています。レイヤー、矩形・楕円・多角形・ポリラインを持つオブジェクトレイヤー、カスタムプロパティ、テンプレート、タイルアニメーション、衝突形状、地形／Wang セットがすべて揃っています。TMX／TSX の XML と JSON 版を読み書きでき、フォーマットは十分に古いため、ほとんどのエンジン向けのエクスポーターが存在します。すでにパイプラインが .tmx を消費しているなら、Tiled がそれを制作する最も安全な場所です。

摩擦は編集そのものではありません。その周辺のすべてです。Tiled はデスクトップアプリケーションなので、プロジェクトを触るすべてのマシンにインストールが必要です。タイルセットは通常、相対パスを持つ外部の .tsx ファイルとして参照され、フォルダーが移動したり、共同作業者のチェックアウトが別の階層に置かれた途端に壊れます。再生ボタンはありません。書き出してから、マップが機能するかを確かめるために別のプログラムを開くことになります。共有するにはプロジェクトを zip にまとめ、相手側でパスが噛み合うことを祈るしかありません。

オンラインのタイルドマップエディターは、その3点だけを変え、それ以外は何も変えません。インストール不要なのは、エディターがページとともに配られるからです。ファイルのやりくりが不要なのは、タイルセットとレイヤーが、開き直せる1つのプロジェクトに収まっているからです。そして書き出して試すループが不要なのは、描いたタブの中でそのままマップをプレイできるからです。失うものも本当にあります。ネイティブのプラグインはなく、スクリプト化されたマップもなく、非常に大きなプロジェクトはデスクトップよりブラウザのほうが重くなります。コンパイル済みのエンジンに組み込むのではなく、見て歩き回るためのマップなら、この交換は割に合います。

タイルドマップとは何か（そしてなぜ名前がみんなを混乱させるのか）

この言葉は2つの役割を担い、それが衝突します。大文字の Tiled は製品名です。小文字のタイルドマップは、繰り返しタイルから作られたあらゆるマップを指します。Tiled でタイルドマップを作ることもできますが、Godot の TileMap ノード、Unity の Tilemap システム、Phaser、自作のインポーター、あるいはここで、Tiled を一度も開かずに作ることもできます。

この分裂のせいで、タイルドマップエディターの検索は2つの異なる場所に着地します。半分の人は特定のデスクトップアプリケーションとそのファイル形式を求めています。もう半分の人はタイルベースのマップを作りたいだけで、どのツールがやるかは気にしていません。どちらも妥当です。あなたが2番目のグループなら、問いはどのエディターの機能リストが長いかではなく、どれが最も速くプレイ可能な結果を目の前に差し出すかです。

仕組みとしては、タイルドマップは小さなデータです。タイルセット画像、タイルの幅と高さ、タイル単位のグリッドサイズ、そして各レイヤーごとに、0が空を意味するタイル ID の配列が1つ。その上に、矩形とポリラインを保持する任意のオブジェクトレイヤーと、キー／値の文字列によるプロパティ表があります。構造はこれで全部です。エディターはそれらの配列を編集するための良いインターフェースであり、それがフォーマットがツール間を行き来する唯一の理由です。

最初のタイルドマップをオンラインで描く

最初の画面には3つの領域があります。左がタイルセットパネル、中央がマップキャンバス、右がレイヤー一覧です。まずマップを作成します。直交グリッドを選び、グリッドを横40×縦30タイルに設定し、タイルサイズをタイルセットに正確に合わせます。32×32ピクセルなら1280×960ピクセルのキャンバスになり、作業サイズとして妥当で、描いている間も反応が保たれます。

次にタイルセット画像を読み込みます。読み込みを壊す2つの設定はマージンとスペーシングです。マージンはシート全体の周囲にある空白の縁、スペーシングはタイル間の隙間です。シートがどちらか付きで書き出されているなら、その数値を入力します。省くと、すべての列が1〜2ピクセルずれ、マップは微妙に、腹立たしいほど間違って見えます。その後はもう描くだけです。地面レイヤーを塗りつぶし、その上のレイヤーにディテールを加えます。

タイルドマップの例 — いますぐ開けるマップ

6つのシーンはスクリーンショットではなく、プレイ可能なマップとして収められています。それぞれがブラウザで開き、キャラクターを操作して進められます。タイルドマップが機能するかを確かめる唯一確実な方法です。

そのうち3つは完全なプロジェクトです。残りはエディター内の小さなデモマップで、それぞれ1つの仕組みを示すために存在します。読んで理解するのではなく、レイヤー、衝突、タイルサイズがどう設定されたかを見たいときに開いてください。

TMX／タイルセットをブラウザに読み込む

読み込みはコンバーターではなくパーサーです。map 要素から orientation、width、height、tile width、tile height を読み取り、次に tileset エントリを firstgid とともに、埋め込み画像か外部 .tsx への参照のいずれかで読み取ります。その後、各レイヤーを順番に、そのタイルデータとともに読み取ります。重要なエンコーディングは CSV と base64 で、gzip や zlib 圧縮の有無を問いません。デコードしないエンコーディングを使っているファイルなら、空のグリッドを読み込むのではなく、読み込みを止めてその名前を報告します。

生き残るのは構造的な部分です。タイルセット参照はアップロードした画像へと向け直されるので、デスクトッププロジェクトの外部 .tsx パスはたどられるのではなく置き換えられます。タイルサイズ、マージン、スペーシングは引き継がれます。レイヤーの順序、表示／非表示、不透明度は引き継がれます。タイル ID は各レイヤー内での相対位置を保ち、それが読み込み後もマップを同じに見せる理由です。オブジェクトレイヤーは矩形と多角形として届き、そのプロパティはキー／値の文字列に平坦化されます。宣言されたタイルアニメーションは保持されます。

生き残らないのは、コードだったものすべてです。Tiled は JavaScript 拡張、カスタムプロパティクラス、C++ プラグインをサポートしていますが、そのどれもブラウザのタブでは動作しません。スクリプトが生成したマップは、ここでは単にその出力タイルになります。カスタムプロパティの型は文字列へと劣化します。チャンク格納された無限マップは固定グリッドに平坦化され、非常に大きなマップではメモリの挙動が変わります。また、すべてのタイルが個別の PNG である画像コレクション型タイルセットは動作しますが、タイルごとに1回の画像リクエストを要します。マップがプラグインに依存しているなら、Tiled で作り続けてください。

Tiled の無料版と有料版

Tiled は無料です。オープンソースのデスクトップソフトウェアで、比較すべき有料プランは存在しません。ですから、無料の Tiled 対 有料の Tiled を説明するページは、別の何か — たいていは商用のタイルセットパックか、エンジンに同梱されたエディター — を説明しています。Tiled が有料だとは主張しません。実際、そうではないからです。

本当の分かれ目は、インストールするか、しないかです。Tiled はすべてのマシンにダウンロードを求め、フォルダーが移動すると壊れる相対パスとしてタイルセットを保ち、組み込みのプレイテストもないので、書き出して別のプログラムを開くことになります。ブラウザのエディターはタブを求めるだけで、プロジェクトを1か所にまとめ、同じウィンドウでマップを再生します。これが交換条件であり、価格とは何の関係もありません。

デスクトップが勝つ点もあります。プラグイン、スクリプト化されたマップ、ネットワークなしでの作業、多数のレイヤーを持つ非常に大きなマップは、いずれもデスクトップの利点であり、そうでないふりをするのは不誠実でしょう。すでにパイプラインが .tmx を消費し、それを保守する人がいるなら、Tiled にとどまってください。ブラウザのエディターは、マップを見せる必要があるとき、リンクで共有するとき、あるいはエディターを決してインストールしない人に歩き回ってもらうときに使いましょう。

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

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

FAQ