tile3d|ドット絵のタイルを貼って3Dの部屋を組み、OBJで書き出せる無料ブラウザツール

tile3dの画面。左にタイルセットと設定のパネル、右にドット絵のタイルで組んだ家と庭の3D表示 CG全般

banana.fish.0825氏が、ドット絵のタイルセットから3Dの部屋やジオラマを組めるブラウザツール「tile3d」を2026年10月25日にitch.ioで公開しました。インストールは要らず、ブラウザで開いてすぐ使えます。組んだものはOBJで書き出せます。ブラウザ版は無料です。

ドット絵のタイルで組んだ家と庭のジオラマに、tile3dのタイトルを重ねた画像
サンプルのタイルセットで組んだジオラマ(画像:itch.ioの配布ページより)

ドット絵のタイルで、部屋を立体に組める

PNGのタイルセットを読み込み、タイルの大きさをピクセルで指定します。手元にタイルセットが無くても、同梱のサンプル「Kenney Tiny Town」(CC0)ですぐ試せます。タイルは床と壁の6方向に貼れて、壁の表と裏に別のタイルを貼ることもできます。

置いたタイルの上にマウスを乗せると、作業面がその位置へ移ります。レイヤーを手で切り替えなくても、床の上に壁を立て、さらに上の階を重ねていけます。カメラ側の壁を隠す機能(Hキー)を使えば、部屋の内側も作業できます。

カメラ側の壁を隠して、家の中の床と内壁を表示している画面
カメラ側の壁を隠して、部屋の内側を作業する(画像:itch.ioの配布ページより)

広い床も、まとめて敷ける

Shiftを押しながらドラッグすると、四角い範囲にまとめてタイルを置いたり消したりできます。塗りつぶし(Gキー)は、つながった同じ柄のタイルをまとめて置き換えます。スポイト(Iキー)、回転(Rキー)、反転(Fキー)、元に戻す・やり直しもあります。

庭の床に、四角い範囲を指定してタイルを置こうとしている画面
Shift+ドラッグで四角い範囲にまとめて置く(画像:itch.ioの配布ページより)

組んだ部屋を、そのままBlenderで使える

書き出しは、OBJ・MTL・タイルセットのPNGを1つのZIPにまとめた形です。作業内容はブラウザに自動で保存され、JSONで保存・読み込みすれば別のPCにも持っていけます。

作者はBlender 5.2で読み込みを確かめていて、2つの設定を勧めています。表と裏の面が同じ位置に重なるので、マテリアルの「裏面を非表示(Backface Culling)」をオンにします。ドットをくっきり出すには、画像テクスチャの補間を「Closest」にします。

無料版の制限と、有料版の予定

  • 1シーンにつきタイル1,000枚まで、タイルセット1つまで
  • タイルセットのPNGは1MB・4096×4096ピクセルまで
  • マウスとキーボードのみ(タッチ操作は非対応)
  • 動作確認はChromium系のブラウザのみ

作者は有料のダウンロード版も予定しています。リリース日は未定です。タイル数の上限をなくし、1シーンで複数のタイルセットを使えるようにして、glTFでの書き出しやWindows・macOS・Linuxでのオフライン利用にも対応する予定です。Godot 4向けの書き出し、屋根やスロープ用の斜めのブロック、同じ組み合わせを何度も置けるプレハブについては、どれが欲しいかをページで募っています。

価格・入手先

価格無料(ブラウザ版)
対応OSブラウザ(Chromium系で動作確認)
作者banana.fish.0825
入手先itch.io

ダウンロード版の予定価格は12.99ドルで、変わる可能性があると書かれています。コードとページの文章は、AIのコーディングアシスタント(Claude Code)を使って書いたと作者が明記しています。サンプルのグラフィックはKenneyのもので、AIでは作られていません。

管理人のひとこと

ドット絵のタイルを箱に貼っていく作り方は、3Dのモデリングを知らない人でも部屋が組めるので、触っていて楽しそうです。描いた2Dのタイルセットが、そのまま立体の建物として組み上がります。ドット絵を描く人が、自分の絵を3Dで眺めてみる使い方もできそうです。

Blenderで同じことをするなら、板ポリを並べてUVをタイルに合わせる作業になります。1枚ずつ合わせる手間を考えると、配置だけここで済ませてOBJで持ってくるのは手軽です。

コメント

タイトルとURLをコピーしました