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

# はじめに

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

<img width="283" alt="スクリーンショット 2018-10-13 13.23.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/30d6215e-27c6-ba76-d66b-8984993662d8.png">

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

↓RPGツクールやウディタがよしなに作るオートタイルは47パターンある。
<img width="683" alt="スクリーンショット 2018-10-13 13.59.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/96e8712e-331a-03e0-8dd0-f22cc314050e.png">


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

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

```
$ brew install imagemagick
```

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

# 変換方法

以下のinput.pngという16x16タイル画像をサンプルとして使用します。
![input.png](https://qiita-image-store.s3.amazonaws.com/0/19692/62c701c0-3c29-4938-0c10-2f7ae97e9b5d.png)


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

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

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

以下のように24個の画像を出力します。
<img width="872" alt="スクリーンショット 2018-10-13 14.06.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/3fbe51b4-1b3a-054d-b74d-bb37b16d074d.png">



## 最小単位画像から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)を出力しましたが、以後使用しません)

<img width="883" alt="スクリーンショット 2018-10-13 13.27.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/d3987e2d-f7af-56b7-3fea-ec4271fe41f3.png">
<img width="886" alt="スクリーンショット 2018-10-13 13.28.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/3fb5ed45-5a88-d936-9cfd-7c039d2f5ee3.png">
<img width="881" alt="スクリーンショット 2018-10-13 13.28.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/19135ac9-3e5c-d63a-c985-b2f39d3aac38.png">

## タイル画像の結合

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

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

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

<img width="318" alt="スクリーンショット 2018-10-13 14.09.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/8df1690e-2b67-f174-490d-3cc501d2aee2.png">


# Unityで使う

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

<img width="254" alt="スクリーンショット 2018-10-13 14.07.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/fd3bd595-75f7-5d89-aa39-0c85c05ce2a5.png">

このページの上の方にあるオートタイル47パターンの画像は、
Unity上でひとつのRuleTileで作成したSceneビューの画像です。
47パターンの8方向オートタイルが正しく適用されていることがわかります。
<img width="683" alt="スクリーンショット 2018-10-13 13.59.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/62982ad4-9f56-838e-3a26-ffede29793ba.png">

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

## 注意

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