uGUIをアニメーションさせよう~uGUIの特徴についてレビューしよう~

2015年3月25日　FAGStudio

Unity本のおすすめ三羽ガラス

uGUIの特徴について考えてみましょう

・Sprite素材を使ってUIを作れる

・デバイス側の解像度に合わせてUIの表示調整できる

・UIをアニメーションできる

・UIにイベント設定が簡単にできる

そもそもUnityのUI機能ってどうだった？(Before 4.5.x)

・OnGUI関数は主にデバック用を想定したもの

void OnGUI () { GUI.Box (Rect (10,10,100,90), "Loader Menu"); if (GUI.Button (new Rect (20,40,80,20), "Level 1")) { Application.LoadLevel (1); } if (GUI.Button (new Rect (20,70,80,20), "Level 2")) { Application.LoadLevel (2); }}

サンプルのスクリプト

そもそもUnityのUI機能ってどうだった？(Before 4.5.xの問題点など)

・かっこいいUIが作りにくかった。

・ドローコール(処理の負荷)が大きかった。

・UIの位置や大きさはピクセル指定のためデバイスの解像度やディスプレイサイズで表示位置がずれる。

補足：アスペクト比とは？

表示できる画像の大きさの縦横比のことをアスペクト比といいます！！

昔のテレビは3:4というアスペクト比でしたが、最近では9:16の横長の画面になりましたね。最近のスマートフォンではタブレットはアスペクト比が4:3のような正方形に近い形になる傾向があり、手持ちのサイズは逆に16:9など縦長になることが多いです。

Canvas

↓Canvas

uGUIはHierarchy view上では、必ずCanvasの子供オブジェクト上としてUIパーツを配置されます(Canvasの子供オブジェクトにしなければUIオブジェクトは描画されません)。Scene view上でもCanvasの上にUIパーツが配置されます。

↓ UIオブジェクト

↓ UIオブジェクト

↓ UIオブジェクト

同じCanvas内のUIオブジェクトの描画順

同じCanvas内で設定されているUIオブジェクトはHierarchy Viewで下にあるUIオブジェクトの方がUIオブジェクトが重なった時に前に描画されます。

uGUIの特徴

Screen Space - OverLayほかのGameObjectの中でUIが１番前に描画されるモード。4.5.xまで現役で使われていたGUI TEXTやGUI TEXTUREはこれにあたります。

Screen Space - Cameraカメラを指定してUIを描画するモード。複数のCanvasを準備した際にCanvasの描画する順番をSorting Layerで指定することができます。

World Spaceほかの3Dオブジェクトと同じように描画されるモード。ほかモードだとGameObjectと同じようにTransform情報が適応されます。

様々な描画モードを搭載。Canvas Render Mode

描画の違い一覧

引用元：http://docs.unity3d.com/Manual/UICanvas.html

Screen Space -OverLay Screen Space-Camera World Space

UIオブジェクトのサイズと配置について

Render Mode　Space - OverLay, Screen Space - Cameraゲームが描画されるサイズ（= Game View）によってCanvasの大きさが変化します。

UIオブジェクトのサイズと配置について

Render Mode　Space - OverLay, Screen Space - Camera

UIオブジェクトのサイズと配置について

uGUIの1Scale=1pixelなので例えば3Dオブジェクトと並べると大きいと錯覚してしまうかも。。しかしこの状態は「Rect Transform」というUI用の従来の「Transform」が混在した状態であり、「全く別次元のもの」と考えましょう。

Scene Viewで見ると小さすぎますね。Game Viewで見ると問題なく合成されます。

Render Mode 「World Space」

UIオブジェクトのサイズについてRender Modeを「World Space」にした場合、そのままだとオブジェクトと Canvasの大きさは違いすぎます。Scale 0.01にすると、(この場合)Width 800, Height 約363にかけるとCanvasの大きさは8× 3.63になりますね。そうするとScale X1, Y1, Z1のCubeとCanvasを並べてもサイズが合うようになります。

Transform約3.63

Transform 8.0

Anchorについて

Anchorについて

Game Viewの大きさ（＝ゲームの描画されるサイズ）を変えると大きさとアスペクト比に合わせてオブジェクトと位置が同じ割合で調整されます。

ボタンをアニメーションさせよう

アニメーションの設定についてWindow →Animationから下に動くアニメーションを作成します。この場合、Position.yの値を下に上から下に下がるように設定してます。

作成したアニメーションをMecanimで設定

スクリプトで呼ぶ準備をします

using UnityEngine;using System.Collections;

public class Trigger : MonoBehaviour {

// Use this for initialization　public void StartAnim(){

GetComponent<Animator>().SetTrigger("Click");}}

Mecanim機能を呼び出す感じで呼びさせばいいですね！

スクリプトをボタンから呼び出します

SendMessageでさきほど説明したStartAnimメソッドを呼びます。

ボタンを回転させます

同じように回転アニメーションを設定

同じようにMecanimで設定

スクリプトをボタンから呼び出します

using UnityEngine;using System.Collections;

public class RotateTrigget : MonoBehaviour {

public void StartRotate(){ GetComponent<Animator>().SetTrigger("ClickRotate");

}}

スクリプトをボタンから呼び出します

iTweenをつかってみよう

ここまでは、通常のUnityのアニメーション機能を使いましたが、先月の放送で紹介した iTweenを使えば、ほかにもいろいろ動きを付けることができます。

iTweenを使ったメソッド例

public void StartAnimation(){ iTween.ScaleFrom (gameObject, new Vector3 (5, 5, 1), 3.0f); }

同じようにSendMessageでiTweenのアニメーションスクリプトを呼びます。

iTweenを使ったメソッド例

void ShakeRotation(){iTween.ShakeRotation (gameObject, iTween.Hash ("y", 290));

}

→　そのほかの動きをぜひiTweenの動きを参考に実装してみてください。

Imageのアニメーションについて

Image Typeを「Filled」にしてFilled Amountで1(全てイメージが映っている状態 )〜0(全てイメージが消えている状態)で調整することができます。

サンプルスクリプトusing UnityEngine;using UnityEngine.UI;using System.Collections;

public class Life : MonoBehaviour {

private Image myLife;

// Use this for initialization void Start () { myLife = GetComponent<Image> (); }

// Update is called once per frame void Update () { myLife.fillAmount -= 0.1f * Time.deltaTime; }}

ライフバーが減っていきます！

uGUI以上におしゃれなTextが作れます

TextMeshProについて＊ 0.146 BetaではTextMeshProをUIに統合(=ほかのUIと同じようにCanvas上に配置設定 )できます。

TextMesh Proの方がくっきり映ります

TextMesh Proの方が拡大してもくっきりフォントが映る。

Point Lightで光らせたりもできます！