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、管理された仕事用ノートパソコン、あるいはソフトウェアをインストールできないあらゆるマシンで作業しているなら、動作させられません。販売元が説明するブラウザ版は存在しません。

プレイ可能な出力がありません。Tilesetterはレベルを与えてくれますが、動作するレベルは与えてくれません。ジャンプの軌道が隙間を越えられるか、あるいはタイルのエッジが出荷予定のカメラ距離で識別できるかを知るには、書き出し、エンジンを開き、タイルマップをシーンに組み込み、再生を押して確認します。あらゆる設計上の疑問が往復の手間を伴います。

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

Tilesetter対Neta Studio — 完全比較表

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

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

このセクションの生成ツールは、Tilesetterが最もよく知られているあの機能を担います。ベース画像を受け取り、すぐに描画できるグリッド整列済みのタイルセットを返します。PNGをドロップし、セルサイズを16、32、48ピクセルのいずれかに設定すると、ツールがシートとタイルインデックスに分割します。インストール不要、ライセンス不要、先に作るエンジンプロジェクトもありません。

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

2つ目の失敗はフィルタリングです。シートを線形フィルタリングでサンプリングすると、隣り合うタイル同士が平均化され、すべてのエッジに1ピクセルのにじみが残ります。対処法は2つです。エンジンでテクスチャフィルターを最近傍に設定するか、書き出し時に各タイルを2ピクセル外側へ拡張し、境界のピクセルを外側に繰り返します。フィルター設定を忘れたプロジェクトでも生き残るため、拡張のほうが安全です。

グリッドが整えば、描画はすぐに始められます。レイヤー、衝突フラグ、オブジェクト配置はすべて同じグリッド上にあり、プレイモードでは結果がThree.jsシーンとして動作します。グリッドが支えるレベルの規模を見たいなら、サンプルワールドのThe Cyclops' IslandとMini Worldがこの方法で作られています。

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

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

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

Unity

Texture TypeをSprite (2D and UI)に、Sprite ModeをMultipleに、Filter ModeをPointに設定し、Generate Mip Mapsをオフにします。ピクセルアートではCompressionをNoneにします。次にSprite Editorを開き、SliceのGrid By Cell Sizeを使い、セルサイズをタイルに合わせます — 16、32、48ピクセルのいずれかです。

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

Godot

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

人を引っかける移行の注意点がひとつあります。Godot 4はGodot 3の自動タイルビットマスク方式を、peering bitsに基づく地形セットに置き換えました。Godot 3の自動タイル向けに生成したシートは、Godot 4では通常のタイルとしてインポートされます — ピクセルは問題ありませんが、地形のつながり設定は機能しません。地形セットを組み直すのであり、画像を再書き出しするのではありません。またRendering > Textures > Canvas Textures > Default Texture Filterも確認してください。これがLinearだと、シートの中身に関係なくピクセルアートににじみが出ます。

GameMaker Studio 2

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

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

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

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

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

それが属する世界へ足を踏み入れる

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

FAQ