uGUIまとめ

参考
uGUIチュートリアル
uGUI (UnityのUI機能) の使い方まとめ

準備

• Canvas

  • 右クリック > UI > Canvas

• スクリプト

  • CanvasにUIController.csをアタッチ
    （UI周りを一括で操作する）

• 画像

  • 使用する画像をスプライトにする
    Texture Type > Sprite(2D and UI)
    Applyを押す

Button

UI > Button

OnClickから関数を実行する
BGMを切り替えたり、ステージを選択したり、スタート画面を閉じたり...

Slider

UI > Slider

Min ValueとMax Valueで返す値を、
Whole Numbersで整数かどうかを指定

OnValueChangedに値が返ってくるので、受け取りたい関数を登録する

void OnSlider(float _value) {
    print(_value);
}

画像を差し替えれば自作のスライダーをつくれる

参考
Unity uGUIでスライダーについて解説してみる

Anchor

参考
uGUIのAnchorを使いこなす

縦横比を崩さずに背景画像を隙間なく広げる

cssのbackground-size: cover;の状態

Reference Resolutionは画像のサイズ

以下のTipsを参照
http://www.metalbrage.com/UnityTutorials/uGUI/Scaler.html

画像の一部のみを拡縮する

SpriteEditor
https://docs.unity3d.com/jp/540/Manual/SpriteEditor.html

画像を9分割して、四隅は固定、その他の部分を拡縮する

Anchorにstretch, stretchの指定をすれば
スクリーンサイズに応じて全画面に広がる背景の完成

参考
UnityのuGUIとImageとSpriteとスライスについて

横幅に合わせてロゴを拡縮

• ロゴの横幅を最小で0.3、最大で0.7にすることで、
  常に画面の横幅の40%のサイズを保つ

• Preserve Aspectにチェックを入れることで
  縦横比を固定する

フェードイン/フェードアウト

Image

ImageやPanelなどImageコンポーネントがついているものは、
colorのalphaを操作する

GetComponent<Image>().color = new Color(red, green, blue, alfa);

参考
Unityでフェードイン／フェードアウトを実装する方法

CanvasGroup

CanvasGroup
https://docs.unity3d.com/jp/540/Manual/class-CanvasGroup.html

CanvasにはImageコンポーネントはついていないので、
CanvasGroupのalphaを操作してフェードする

GetComponent<CanvasGroup>().alpha = 1.0f;

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class UIController : MonoBehaviour {
    CanvasGroup CG;

    void Start () {
        CG = GetComponent<CanvasGroup>();
    }

    void FadeOut() {
        iTween.ValueTo(
            gameObject,
            iTween.Hash(
                "from", 1f,
                "to", 0f,
                "time", 1f,
                "onupdate", "UpdateFade",
                "oncomplete","CompleteFade"
            )
        );
    }

    void UpdateFade(float value){
        CG.alpha = value;
    }

    void CompleteFade(){
        gameObject.SetActive(false);
    }
}

参考
Unity – iTweenを使ったuGuiのフェードイン/フェードアウト
UIをまとめてフェード【Unity】【uGUI】

RenderMode

https://docs.unity3d.com/jp/540/Manual/class-Canvas.html
https://docs.unity3d.com/jp/540/Manual/UICanvas.html

Screen Space – Overlay

キャンバスはスクリーン合わせて縮小拡大された後、シーンやカメラへの参照をせずに直接レンダリングされます。

一般的な使い方。UIが一番前に描画される。

Screen Space – Camera

Canvas は指定したカメラの前にいくらかの距離をとって、平面オブジェクトの上にあるかのようにレンダリングされます。

複数のCanvasを用意した時に、描画する順番をSorting Layerで指定することができる。

World Space

UI をシーン内の平面オブジェクトであるかのようにレンダリングします。

キャラの名前やステータスの表示、吹き出しのセリフなどに使える。キャラにボタンを押させるなど、シーン内でのインタラクティブな要素としても使える。

参考
【Unity】uGUIのCanvasとRenderModeについて