Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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

スクリーンショット 2018-10-13 13.23.53.png

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

↓RPGツクールやウディタがよしなに作るオートタイルは47パターンある。
スクリーンショット 2018-10-13 13.59.31.png

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

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

$ brew install imagemagick

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

変換方法

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

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

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

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

以下のように24個の画像を出力します。
スクリーンショット 2018-10-13 14.06.22.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)を出力しましたが、以後使用しません)

スクリーンショット 2018-10-13 13.27.39.png
スクリーンショット 2018-10-13 13.28.03.png
スクリーンショット 2018-10-13 13.28.13.png

タイル画像の結合

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

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

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

スクリーンショット 2018-10-13 14.09.07.png

Unityで使う

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

スクリーンショット 2018-10-13 14.07.51.png

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

まとめ

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

注意

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away