UnityのuGUIを使ってみた話とモバイル対応 - プログラミングで世界を変える

遅ればせながらもUnity 4.6から導入されたuGUIのお話です。

ググると「もしかして NGUI ?」と言われ、調べにくいことこの上ないuGUIですが、自分用のメモもかねてまとめてみます。

spriteとの違い

今までUIボタン等は全てspriteで実装してきました。 spriteを使ってきた理由としては、

直感的に配置が出来る。
モバイル出力時に位置がズレない

です。後述しますが、二つ目が重要。

また、デメリットとしては

timescale=0に対応出来ない(raycastが物理エンジンを使っているので動作しない)。

が挙げられます。物理挙動を多用するゲームではこれが致命的です。先日ここでつまずいたことをきっかけに、uGUIを使ってみました。

uGUIの使い方

f:id:splas_boomerang:20150212011206p:plain

HierarchyウィンドウのCreate>UIからButtonなりを選択すると、EventSystemとCanvasなるものが現れます。Canvasの子として配置したUIオブジェクトをEventSystemで制御する感じです。

uGUI Buttonから呼び出す関数に引数を指定する

Buttonを押した時の挙動はButton (Script) コンポーネントのOn Click() の項目を編集することで指定出来ます。他のスクリプトから参照した関数はこのように呼び出すのですが、Inspectorウィンドウから指定する場合は、引数としてint, float, bool, stringしか渡すことが出来ません。

f:id:splas_boomerang:20150212012531p:plain

そのため、他の型の引数を渡したい場合は以下のようにします。

void Start () {
    Button button = GameObject.Find (filename).GetComponent<Button> ();
    button.onClick.AddListener (() => {
            // 指定したい処理
    });
}

uGUIを使ったモバイル対応

uGUIですが、このままモバイル形式に出力するとUnity Editor上での見た目と異なった表示になると思います。モバイル環境は解像度が異なるためです。spriteの場合は実体を持つオブジェクトとして表示されるため、Unity Editor上での表示とずれることはありません。uGUIの導入前にGUI Buttonをモバイル対応させるには、Scriptから画面サイズを取得し、相対的な比率でpositionとscaleを指定する必要がありました。

uGUIの場合は、CanvasのCanvas Scaler (Script) コンポーネントを指定することで、モバイルのような高解像度環境にも対応出来ます。僕のバージョン(Unity 4.6.1f1)ではデフォルトでついていました。β版ではReference Resolutionという名前だったそうです。

f:id:splas_boomerang:20150212014154p:plain

画像はiPhone 6を基準とした設定。Ui Scale ModeをScale With Screen Sizeにし、Reference Resolution(基準解像度?)を指定してやれば多分モバイルでも同じように表示されるはずです。Ui Scale ModeがConstant Pixel Sizeの時とは恐らく少しずれますが、新しい設定にした後に再度調整が必要です。