ゲームのマップなどを作成するマップチップ画像のオートタイルの作成支援もしてくれるマップチップ作成ツールの無料版 Tilesetter Lite を使って、1個のマップチップ画像からオートタイル用のマップチップ画像群を自動生成して、それを画像ファイルに出力する手順を紹介します。
前回の記事
前回は、マップチップ作成ツールの無料版 Tilesetter Lite を itch.io からダウンロードしてアプリケーションを起動するまでの手順を紹介しました。
オートタイルのもとになる1個のマップチップ画像の作成
Aseprite などで作成したタイルサイズの画像をクリップボードに Ctrl + C でコピーします。
※ Paint.NET で 16 × 16 ピクセルの右上のマップチップ画像を範囲選択してからコピーしました。

オートタイルの自動生成
コピーしたマップチップ画像を Tilesetter の左上の適当なマスをクリックで選択して Ctrl + V で貼り付けます。
※ 左上の Tile Size の欄で現在のタイルサイズが 16 であることが確認できます。

画像を貼り付けたマスを選択した状態で、そこを右クリックして表示されるメニュー「Build Borders (Blob)」を選択します。
※右上のエリアが小さくて操作しづらい場合は、画面の仕切り線をドラッグしてエリアを広げましょう。

全ての隣接パターンのオートタイルで用いるマップチップ画像が生成されました。
例えば、左上のマスならば、白い破線が左と上の辺にあり、左と上だけが異なるタイルと接している場合に使われるマップチップになります。

生成したオートタイル用の画像を png ファイルに保存する
作成されたオートタイル用のマップチップ群の画像を png ファイルに保存します。
png ファイルに保存するマスの範囲をマウスをドラッグして指定します。

指定範囲の部分で右クリックをして表示されるメニュー「Export」→「Image」を選択します。

出力先を指定して「保存」ボタンを押すと、指定した範囲が画像ファイルとして保存されます。

画像の確認
先ほど自動生成したオートタイルの画像についていた白い破線も画像に含まれています。
これは、あとでオートタイルのそれぞれのマップチップがどの位置のマップチップかを判別する際に役立ちます。
1枚だけでもこの状態で残しておくと、オートタイルの設定をする際の目安になると思います。
この白線画像は、上下左右の辺ごとに異なっていて、それらを別の画像に差し替えることで、ゲームなどで使うオートタイルの画像を作れます。

今回はここまで
今回は、ゲームのマップなどを作成するマップチップ画像のオートタイルの作成支援もしてくれるマップチップ作成ツールの無料版 Tilesetter Lite を使って、1個のマップチップ画像からオートタイル用のマップチップ画像群を自動生成して、それを画像ファイルに出力する手順を紹介しました。
次回は、デフォルトの白い破線以外の画像で、オートタイルの端の部分を描画して、オートタイル画像を完成させます。
参照サイト Thank You!
記事一覧 → Compota-Soft-Press
コメント