Tilesetter の代替 — 無料のオンラインタイルセット生成＆マップエディター

Tilesetter は 1 枚のベース画像からタイルセットを構築し、組み立てたレベルを Unity、Godot、GameMaker Studio 2 に書き出します。それが売り文句であり、確かに優れています。人々の足を止めるのはデスクトップ配信の部分です。インストールし、マシンごとにライセンスを取得し、ブラウザのタブでは実行できないアプリケーションです。Tilesetter の代替を探しているなら、重要な問いは 2 つあります。タイルセット生成が今も機能するか、そしてエンジンを開かずに結果が動くところを見られるかです。

Neta Studio はブラウザベースの代替です。出発点は同じ — 1 枚のベース画像が、すぐに描けるグリッド揃えのタイルセットになる — ですが、プレイを押すとレベルがプレイ可能な Three.js シーンとして動作します。インストーラーも、プロジェクトファイルの往復も、プラットフォーマーのジャンプが 3 タイルの隙間を越えられるかを確かめるためにエンジンビルドを待つこともありません。

Tilesetter が優れている点

Tilesetter の中核機能は、小さなベース画像からの地形生成です。代表的な 3〜5 枚のタイル — 通常は中央の塗り、直線の端、外側の角 — を描くと、ジェネレーターがセットの残りを導き出します。内側の角、端の変種、塗りのパーツです。完全な 47 ピースの地形セットを手作業で作るのは退屈で一貫性が保てませんが、ベース画像から導き出せば角の整合性が保たれます。これは人々が実際にツールを乗り換える理由の機能であり、そしてそれは機能します。

後半はレベル構築です。生成されたセットはオートタイル挙動を備えたグリッドエディターに渡されるので、地形の線をドラッグすると、同じ正方形の列ではなくつながった端が生成されます。これはエンジンコードではなくツール側で行われるオートタイルです。

3 つ目は書き出しです。Tilesetter は Unity、Godot、GameMaker Studio 2 のプロジェクト形式に直接書き込むので、レベルデータは手作業で再スライスする必要のある PNG ではなく、エンジン標準のタイルマップとして届きます。Tilesetter のワークフローでは、これは画像からプレイ可能なエンジンシーンへの真に最短経路です。

多くの人にとって Tilesetter が物足りない点

インストールして支払うデスクトップアプリケーションです。ライセンス条件と価格はベンダーが設定し、時間とともに変わります。比較ページを信じるのではなく、一次情報で確認してください。実務上の制約は価格よりも狭いものです。Chromebook、管理された仕事用ノートPC、あるいはソフトウェアをインストールできないあらゆるマシンで作業する場合、実行できません。ベンダーが説明するブラウザ版は存在しません。

再生可能な出力がありません。Tilesetter はレベルを提供しますが、動作するレベルは提供しません。ジャンプの弧が隙間を越えられるか、あるいは出荷予定のカメラ距離でタイルの端が読めるかを知るには、書き出し、エンジンを開き、タイルマップをシーンにつなぎ、プレイを押して確認します。あらゆる設計上の疑問が往復の手間を要します。

書き出しは終着点でもあります。タイルのデザインを変えるとシートの寸法も変わり、エンジンが再読み込みし、アトラスが再リンクし、ピクセルオフセットをキーにしたタイル参照をすべて確認する必要があります。ループは、再生成、再書き出し、再読み込み、再確認です。実行は可能ですが、フィードバックのサイクルは秒ではなく分単位で測られます。

Tilesetter 対 Neta Studio — 完全比較表

以下の Tilesetter の各項目は、同製品の公開された説明に基づいて書かれています。価格やプラットフォーム要件など、数字が分からない箇所は、推測せず仕組みを説明します。

1 枚のベース画像から完全なタイルセットを生成する（ライブデモ）

このセクションのジェネレーターは、Tilesetter が最もよく知られているあの 1 つのことを行います。ベース画像を受け取り、すぐに描けるグリッド揃えのタイルセットを返すのです。PNG をドロップし、セルサイズを 16、32、48 ピクセルに設定すると、ツールがシートとタイルインデックスにスライスします。インストールも、ライセンスも、先に作るエンジンプロジェクトもありません。

最初に破綻するのは、画像を割り切れないセルサイズです。幅 1023 ピクセルのシートに 32 ピクセルのセルを指定すると、完全な列が 31 本と、31 ピクセルの列が 1 本できます。最後の列は、GPU が隣のタイルをサンプリングするために継ぎ目が出て描画されます。何かを描く前に、幅と高さが正確に割り切れるか確認してください。ツールは黙って丸めるのではなく余りを報告します。それが肝心なのです。

2 つ目の失敗はフィルタリングです。シートを線形フィルタリングでサンプリングすると、隣り合うタイルが互いに平均化され、あらゆる端に 1 ピクセルのハローが残ります。修正は 2 つあります。エンジンでテクスチャフィルターを最近傍に設定するか、書き出し時に各タイルを 2 ピクセル押し出して、境界のピクセルを外側に繰り返させます。押し出しのほうが安全です。誰かがフィルター設定を忘れたプロジェクトでも生き残るからです。

グリッドがきれいになれば、描画はすぐです。レイヤー、衝突フラグ、オブジェクト配置はすべて同じグリッド上にあり、プレイモードは結果を Three.js シーンとして実行します。作例ワールドの『サイクロプスの島』と Mini World はこの方法で作られており、グリッドが支えるレベルの規模を確かめられます。

• 正確なグリッドスライス幅と高さをセルサイズで割ります。余りは、壊れた最終列に吸収されるのではなく報告されます。
• 端の押し出し任意で各タイルの周囲に 2 ピクセルの余白を付け、最近傍フィルターのサンプリングが隣のタイルのピクセルを拾わないようにします。
• タイルインデックスのマニフェストセル座標から数値のタイル ID への JSON マップ。エンジンのコードがピクセルオフセットではなくインデックスでタイルを指定できます。
• 地形変種の生成手描きの少数のタイルから導き出される端・角・塗りの変種。外側の角の整合性が保たれます。
• 同じグリッド内のスプライト素材Agent Sprite Forge は同じセルサイズに揃えたスプライトを出力するので、キャラクターや小道具のアートが再スケーリングなしでグリッドに収まります。

Unity、Godot、GameMaker への書き出し — 並べて比較

エンジンへの読み込みは、タイルセット作業がたいてい迷子になる場所です。シートは問題なくても、設定が間違っています。エンジンごとに求める数値の組は異なり、失敗の現れ方もそれぞれ違います。

Unity

テクスチャタイプをスプライト（2D および UI）、スプライトモードを Multiple、フィルターモードを Point に設定し、ミップマップの生成をオフにします。ピクセルアートでは、圧縮は None にします。次にスプライトエディターを開き、スライス、セルサイズによるグリッドを使い、セルサイズをタイルに合わせます — 16、32、48 ピクセルです。

古典的な失敗は Pixels Per Unit です。32 ピクセルのタイルで既定の 100 のままにすると、各タイルの幅は 0.32 ワールド単位になります。タイルマップのグリッドが 1 セル 1 単位を前提にしていると、すべての行の境界で見える隙間や重なりが生じます。Pixels Per Unit をタイルのピクセルサイズに等しくするか、タイルマップのセルサイズをその逆数に設定します。もう 1 つ間違えやすい設定はピボットです。トップダウンのマップでは Center、タイルが地面のラインに揃う横スクロールでは Bottom Left です。

Godot

セルに一致する Tile Size を持つ TileSet リソースを作成し、シートを指す TileSetAtlasSource を追加し、シートに余白がある場合は検出に頼らず Margin と Separation を明示的に設定します。Godot 4 では、テクスチャの非透明領域からタイルを埋めるオプションにより、遅い手作業の工程を省けます。描画は TileMapLayer ノード上で行います。

人々がつまずく移行の注意点が 1 つあります。Godot 4 は Godot 3 のオートタイルビットマスク方式を、ペアリングビットに基づく地形セットに置き換えました。Godot 3 のオートタイル向けに生成したシートは、Godot 4 では単なるタイルとして読み込まれます — ピクセルは問題ありませんが、地形の接続は機能しません。地形セットを組み直すのであって、画像を再書き出しはしません。また、レンダリング > テクスチャ > キャンバステクスチャ > 既定のテクスチャフィルターを確認してください。これが Linear の場合、シートの内容にかかわらずピクセルアートにハローが出ます。

GameMaker Studio 2

GameMaker は、フレームサイズがタイルサイズに等しいスプライトを求め、そのスプライトから作成した Tile Set アセットを必要とします。厳しい制約は割り切れることです。スプライトの幅が 130 ピクセルでタイルサイズが 32 の場合、タイルセットは拒否されます。寸法が正確な倍数になるまでシートを切り詰めるか押し出してください。タイルセットの原点は左上で、描画はルームエディターのタイルレイヤー上で行うため、他の 2 つのエンジンよりもレイヤーの順序が重要になります。

シートのタイル間に余白がある場合、GameMaker はスプライトからそれを推測しません。このターゲット用に余白なしのシートを書き出すか、タイルセットを作成する前に余白付きシートを個別のフレームに分割してください。

Tilesetter から 5 分で乗り換える方法

何も描き直す必要はありません。タイルセットは PNG で、レベルはその PNG へのインデックスのグリッドです。どちらも移行後もそのまま使えます。唯一残らないのはプロジェクト形式の書き出しです。ワークフローに中立的な交換形式が存在しないからです — レベルは変換するのではなく、描き直すつもりで計画してください。

1 画面の部屋なら数分のドラッグです。大規模な多層マップなら半日かかりますが、それでもシートをゼロから作り直すより短い時間です。

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

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

FAQ