RPGツクール形式のタイル画像からUnity向け8方向オートタイルを作成する(ためにImageMagickを使った)

はじめに

RPGツクールやウディタでは8方向オートタイルに対応するために画像の仕様が定められています。
例えばRPGツクールでは以下のような形式です。(画像は今回の記事用に自作したものです)

RPGツクール、ウディタでは仕様に沿った画像を制作するだけで
47パターンの8方向タイルマップによしなに対応します。
とても強力な機能..!

↓RPGツクールやウディタがよしなに作るオートタイルは47パターンある。

一方UnityのTilemapにはそのような機能はありません。
がUnityでも8方向タイルに対応したい!
というわけで上記の画像から47パターンの画像を作成する力技で一旦解決しました。
以下に変換方法を書きます。
＃ スマートな方法があれば教えてほしいです..

画像変換ソフトにはImageMagickを使用しました。
ImageMagickのセットアップは本筋でないので割愛しますが、Macであれば
以下コマンドでインストール可能です。

$ brew install imagemagick

UnityはTilemapに対応した2017.2以上が対象です。

変換方法

以下のinput.pngという16x16タイル画像をサンプルとして使用します。

画像を最小単位に分割する

まずImageMagickのconvertコマンドで画像を分割します。16x16タイルの場合は半分の8x8を指定します。

convert input.png -crop 8x8 c%02d.png

以下のように24個の画像を出力します。

最小単位画像から47パターンのタイル画像作成

ImageMagickのmontageコマンドで47パターンの全パターン画像を作成します。
どの画像を合成するかはひたすら照らし合わせました。以下の通りです。

# 8方向隣接している
montage c18.png c17.png c14.png c13.png -geometry 8x8 -background none -tile 2x2 t00.png

# ななめ1方向以外隣接している
montage c02.png c17.png c14.png c13.png -geometry 8x8 -background none -tile 2x2 t01.png
montage c18.png c03.png c14.png c13.png -geometry 8x8 -background none -tile 2x2 t02.png
montage c18.png c17.png c06.png c13.png -geometry 8x8 -background none -tile 2x2 t03.png
montage c18.png c17.png c14.png c07.png -geometry 8x8 -background none -tile 2x2 t04.png

# ななめ2方向以外隣接している
montage c02.png c03.png c14.png c13.png -geometry 8x8 -background none -tile 2x2 t05.png
montage c18.png c17.png c06.png c07.png -geometry 8x8 -background none -tile 2x2 t06.png
montage c02.png c17.png c06.png c13.png -geometry 8x8 -background none -tile 2x2 t07.png
montage c18.png c03.png c14.png c07.png -geometry 8x8 -background none -tile 2x2 t08.png
montage c02.png c17.png c14.png c07.png -geometry 8x8 -background none -tile 2x2 t09.png
montage c18.png c03.png c06.png c13.png -geometry 8x8 -background none -tile 2x2 t10.png

# ななめ3方向以外隣接している
montage c02.png c03.png c06.png c13.png -geometry 8x8 -background none -tile 2x2 t11.png
montage c02.png c03.png c14.png c07.png -geometry 8x8 -background none -tile 2x2 t12.png
montage c02.png c17.png c06.png c07.png -geometry 8x8 -background none -tile 2x2 t13.png
montage c18.png c03.png c06.png c07.png -geometry 8x8 -background none -tile 2x2 t14.png

# ななめ4方向以外隣接している
montage c02.png c03.png c06.png c07.png -geometry 8x8 -background none -tile 2x2 t15.png

# 上3方向は隣接していない
montage c10.png c09.png c14.png c13.png -geometry 8x8 -background none -tile 2x2 t16.png
montage c10.png c09.png c06.png c13.png -geometry 8x8 -background none -tile 2x2 t17.png
montage c10.png c09.png c14.png c07.png -geometry 8x8 -background none -tile 2x2 t18.png
montage c10.png c09.png c06.png c07.png -geometry 8x8 -background none -tile 2x2 t19.png

# 下3方向は隣接していない
montage c18.png c17.png c22.png c21.png -geometry 8x8 -background none -tile 2x2 t20.png
montage c02.png c17.png c22.png c21.png -geometry 8x8 -background none -tile 2x2 t21.png
montage c18.png c03.png c22.png c21.png -geometry 8x8 -background none -tile 2x2 t22.png
montage c02.png c03.png c22.png c21.png -geometry 8x8 -background none -tile 2x2 t23.png

# 左3方向は隣接していない
montage c16.png c17.png c12.png c13.png -geometry 8x8 -background none -tile 2x2 t24.png
montage c16.png c03.png c12.png c13.png -geometry 8x8 -background none -tile 2x2 t25.png
montage c16.png c17.png c12.png c07.png -geometry 8x8 -background none -tile 2x2 t26.png
montage c16.png c03.png c12.png c07.png -geometry 8x8 -background none -tile 2x2 t27.png

# 右3方向は隣接していない
montage c18.png c19.png c14.png c15.png -geometry 8x8 -background none -tile 2x2 t28.png
montage c02.png c19.png c14.png c15.png -geometry 8x8 -background none -tile 2x2 t29.png
montage c18.png c19.png c06.png c15.png -geometry 8x8 -background none -tile 2x2 t30.png
montage c02.png c19.png c06.png c15.png -geometry 8x8 -background none -tile 2x2 t31.png

# 角2方向
montage c08.png c09.png c12.png c13.png -geometry 8x8 -background none -tile 2x2 t32.png
montage c08.png c09.png c12.png c07.png -geometry 8x8 -background none -tile 2x2 t33.png
montage c10.png c11.png c14.png c15.png -geometry 8x8 -background none -tile 2x2 t34.png
montage c10.png c11.png c06.png c15.png -geometry 8x8 -background none -tile 2x2 t35.png
montage c16.png c17.png c20.png c21.png -geometry 8x8 -background none -tile 2x2 t36.png
montage c16.png c03.png c20.png c21.png -geometry 8x8 -background none -tile 2x2 t37.png
montage c18.png c15.png c22.png c23.png -geometry 8x8 -background none -tile 2x2 t38.png
montage c02.png c15.png c22.png c23.png -geometry 8x8 -background none -tile 2x2 t39.png

# 縦
montage c16.png c19.png c12.png c15.png -geometry 8x8 -background none -tile 2x2 t40.png

# 横
montage c10.png c09.png c22.png c21.png -geometry 8x8 -background none -tile 2x2 t41.png

# 1方向のみ隣接していない
montage c16.png c19.png c04.png c05.png -geometry 8x8 -background none -tile 2x2 t42.png
montage c00.png c01.png c12.png c15.png -geometry 8x8 -background none -tile 2x2 t43.png
montage c10.png c01.png c22.png c05.png -geometry 8x8 -background none -tile 2x2 t44.png
montage c00.png c09.png c04.png c21.png -geometry 8x8 -background none -tile 2x2 t45.png

# 全方向隣接していない
montage c00.png c01.png c04.png c05.png -geometry 8x8 -background none -tile 2x2 t46.png

# 使用しない
montage c08.png c11.png c20.png c23.png -geometry 8x8 -background none -tile 2x2 t47.png

47パターンの画像が出力されます。
(念の為48番目(=t47.png)を出力しましたが、以後使用しません)

タイル画像の結合

Unityで扱いやすくするため48画像を一枚の画像にします。

montage t*.png -geometry 16x16 -background none -tile 8x6 output.png

最終的には以下のような画像になります。

Unityで使う

画像をSpriteとして取り込みRule Tileにします。
8方向の隣接パターンを打ち込みます。

このページの上の方にあるオートタイル47パターンの画像は、
Unity上でひとつのRuleTileで作成したSceneビューの画像です。
47パターンの8方向オートタイルが正しく適用されていることがわかります。

まとめ

オートタイルのパターンとImageMagickで画像変換方法をまとめました。
ななめを考慮しない場合や回転・反転して代用できる場合はパターン数が少なく済みます。

注意

RPGツクール向け素材画像には、RPGツクール以外で利用不可のものがあります。
ライセンス関連は事前に確認してください。
この記事は一切の責任を負いません。