概要
ウディタ等でちょっとしたタイルマッピングするのに毎回Tiledを起動したりプロジェクトを保存したりするのが面倒になってくる瞬間はありませんか。
私はありました。
そんな人のためのブラウザで使用できるタイルマッピングツールを作成しました。
指定したタイルサイズで画像を切り取って出力するWEBアプリです。
PC用です、Windows11 Google Chromeのみで確認しています。
スマホには非対応です。
URL
NoartsTileMapper（ブラウザ版）
ブラウザにデータを保存する仕組みになっています。
サーバーには画像データは一切残りません。
使い方
画像読み込み
出力エリアとソースエリアでそれぞれ画像を読み込めます。
キャンバスエリアへのドラッグドロップにも対応しています。
対応画像はPNGのみです。
出力エリア：
既存のタイルの一部を変更したい場合になどに読み込み、読み込まなくでも使えます
ソースエリア：
既存のタイルをもとに新規にタイルを作りたい場合などに使用
タイルサイズ
全体のタイルサイズは右上から16*16,32*32,48*48から選べます。
タイルサイズは描画中でも変更可能です。（あまり変えない方がいいと思いますが）
思想として、タイルサイズを切り取り、タイルサイズを貼り付けることで組み換えます。
出力エリア：
キャンバスのタイル個数は左側の「縦タイル数」「横タイル数」から変更できます。
描画中でも変更可能ですが、描画した箇所以上に削ると長さを戻しても描画内容は消えます。
できるだけ変更しない方が良いと思います
タイルの描画、左右反転、上下反転
ソースエリアのタイルをドラッグで選択すると、出力エリアにポインタを移動した際にプレビュータイルがでて、貼り付けることができます。
選択タイルの左右反転、上下反転も右上から可能です。
出力エリアのタイルも1タイルだけコピーできます。
背景色・透明色
透明色兼背景色を指定できます。透明化しない設定も可能です。
スポイト機能での背景色設定もできます。
背景色と同じ色のデータが貼り付け対象にある場合、警告がでてきます。
出力エリアの画像ダウンロード方法
左上の「エクスポート」ボタンからダウンロードできます。
等倍拡大ボタン
ソースエリアのタイルサイズを指定の大きさで変更します。
「等倍拡大」でソースエリアのタイルを指定サイズの大きさのタイルにできます。
16*16のタイルを32*32で使いたいがための機能です。
すべて出力エリアにコピーボタン
ソースエリアの内容をすべて出力エリアにコピーします。
等倍拡大で16*16のタイルを32*32上でこのボタンを押下してタイルサイズを二倍にしたい場合などに使うつもりで作りました。
キャンバスをクリアボタン
出力エリアをクリアします。
出力エリアはページを離れたあとでも残り続けるため、新規に作成する場合はクリックしてください。
データクリア
セレクトボックスで選択した箇所、背景色などのブラウザデータをクリアします。
タイル幅指定エクスポート
2025/12/15追加
チェックするとエクスポート時に指定のタイル幅の個数で保存できるようになります。
タイルを組み換え後にウディタ形式にする場合などに便利です。
おわり。
