マップチップツール Tilesetter 無料版でオートタイルを自動生成1/2

ゲームのマップなどを作成するマップチップ画像オートタイルの作成支援もしてくれるマップチップ作成ツール無料版 Tilesetter Lite を使って、1個のマップチップ画像からオートタイル用のマップチップ画像群自動生成して、それを画像ファイル出力する手順を紹介します。

前回の記事

前回は、マップチップ作成ツール無料版 Tilesetter Lite を itch.io からダウンロードしてアプリケーションを起動するまでの手順を紹介しました。

オートタイルのもとになる1個のマップチップ画像の作成

Aseprite などで作成したタイルサイズの画像をクリップボードに Ctrl + C でコピーします。
※ Paint.NET で 16 × 16 ピクセルの右上のマップチップ画像を範囲選択してからコピーしました。

TileSetter 1つのタイル画像からオートタイルを作る1

オートタイルの自動生成

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

TileSetter 1つのタイル画像からオートタイルを作る2

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

TileSetter 1つのタイル画像からオートタイルを作る3

全ての隣接パターンのオートタイルで用いるマップチップ画像が生成されました。

例えば、左上のマスならば、白い破線が左と上の辺にあり、左と上だけが異なるタイルと接している場合に使われるマップチップになります。

TileSetter 1つのタイル画像からオートタイルを作る4

生成したオートタイル用の画像を png ファイルに保存する

作成されたオートタイル用のマップチップ群の画像を png ファイルに保存します。

png ファイルに保存するマスの範囲をマウスをドラッグして指定します。

TileSetter 1つのタイル画像からオートタイルを作る5

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

TileSetter 1つのタイル画像からオートタイルを作る6

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

TileSetter 1つのタイル画像からオートタイルを作る7

画像の確認

先ほど自動生成したオートタイルの画像についていた白い破線も画像に含まれています

これは、あとでオートタイルのそれぞれのマップチップがどの位置のマップチップかを判別する際に役立ちます。
1枚だけでもこの状態で残しておくと、オートタイルの設定をする際の目安になると思います。

この白線画像は、上下左右の辺ごとに異なっていて、それらを別の画像に差し替えることで、ゲームなどで使うオートタイルの画像を作れます。

TileSetter オートタイルの白い破線の代わりになる画像を設定1

今回はここまで

今回は、ゲームのマップなどを作成するマップチップ画像オートタイルの作成支援もしてくれるマップチップ作成ツール無料版 Tilesetter Lite を使って、1個のマップチップ画像からオートタイル用のマップチップ画像群自動生成して、それを画像ファイル出力する手順を紹介しました。

次回は、デフォルトの白い破線以外の画像で、オートタイルの端の部分を描画して、オートタイル画像を完成させます。

参照サイト Thank You!

記事一覧 → Compota-Soft-Press

コメント

Ads Blocker Image Powered by Code Help Pro

お願い - Ads Blocker Detected

このサイトは広告を掲載して運営しています。

ポップアップを閉じて閲覧できますが、よろしければ

このサイト内の広告を非表示にする拡張機能をオフにしていただけませんか?

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

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