【Unity】uGUIで使える簡易オートタイル

Unityでオートタイルが実装されるよ的なアナウンスがあったと思いますが、
2017.2には搭載されていないようなので、自前で実装してみました。
(探せば腐るほど実装例ありそうですが……)

今回はGUIでオートタイルが使いたかったので、
(具体例でいえば、可変長のメッセージウィンドウを実装したかったので)
uGUIで使えるような実装にしてみました。

実装

f:id:chicchi0531:20171128170615p:plain
リソースとして、こんな感じの画像を用意します。
これをインポートして、あらかじめ9分割(3x3)しておきます。

f:id:chicchi0531:20171128170746p:plain
f:id:chicchi0531:20171128170826p:plain

リソースを用意したら、コードをかいていきます。

using UnityEngine;

public class AutoTileWindow : MonoBehaviour {

    //ウィンドウタイルのサイズ
    [SerializeField]
    Vector2 _TileSize = new Vector2(32, 32);

    //ウィンドウのサイズ
    [SerializeField]
    Vector2 _WindowSize = new Vector2(3, 3);

    //タイルゲームオブジェクトへの参照
    [SerializeField]
    RectTransform[] _TileReference = new RectTransform[9];

    //インスペクタ変更時、実行時に呼ばれる
    private void OnValidate()
    {
        //タイルの移動とスケール
        for(int i=0;i<3;i++)
        {
            for(int j=0;j<3;j++)
            {
                //タイルの移動
                var x1 = (j > 0) ? _TileSize.x : 0;
                var y1 = (i > 0) ? _TileSize.y : 0;
                var x2 = ((j > 1) ? _WindowSize.x : 0) + 1.0f;
                var y2 = ((i > 1) ? _WindowSize.y : 0) + 1.0f;
                _TileReference[i*3 + j].anchoredPosition = new Vector2(x1 * x2, - y1 * y2);

                //タイルのスケール
                var size = new Vector2(_TileSize.x, _TileSize.y);
                if (j == 1) size.x *= _WindowSize.x;
                if (i == 1) size.y *= _WindowSize.y;
                _TileReference[i*3 + j].sizeDelta = size;
            }
        }
    }
}

最新のMonoBehaviorにはOnValidateというメソッドが定義されているので、
これをオーバーライドして実装します。
OnValidateメソッドは、エディタ側のインスペクターの値を変更したときや、実行開始時に呼ばれるみたいです。
この特性を利用して、エディタ上で動的にウィンドウの大きさを調整できるようにしています。

使い方

先ほど分割した画像リソースのゲームオブジェクトを作成します。
作成したらその親オブジェクトなどに上のスクリプトをアタッチします。

f:id:chicchi0531:20171128171128p:plain
f:id:chicchi0531:20171128171203p:plain

アタッチしたスクリプトのTile Reference 配列に画像のゲームオブジェクトを渡します。
順番は、下の画像のようにしてください。

f:id:chicchi0531:20171128171610p:plain

リソースの画像サイズに応じてTile Sizeを変更したら、
後はWindow Sizeを好きなサイズに変更するだけです。

※注意
画像のゲームオブジェクトはAnchorsを左上、Pivotを(0,1)に合わせないと動かないかもしれません。

参考になれば幸いです。

実装例

f:id:chicchi0531:20171128171933p:plain