uGUIまとめ

  • 7
    いいね
  • 0
    コメント

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

準備

  • Canvas

    • 右クリック > UI > Canvas
  • スクリプト

    • CanvasにUIController.csをアタッチ
      (UI周りを一括で操作する)
  • 画像

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

Button

https://docs.unity3d.com/jp/540/ScriptReference/UI.Button.html

UI > Button

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

Slider

UI > Slider

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

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

UIController.cs
void OnSlider(float _value) {
    print(_value);
}

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

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

Anchor

用途 操作
ピボットの位置も一緒に寄せる shiftを押しながら
矩形も一緒に寄せる altを押しながら
ピボットと矩形も一緒に寄せる shift+altを押しながら
中央で大きさが変わらない center, middle
左下に固定 left, bottom
画面いっぱいに広がる背景 stretch, stretch

参考
uGUIのAnchorを使いこなす

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

cssのbackground-size: cover;の状態

Reference Resolutionは画像のサイズ

スクリーンショット 2017-10-11 17.16.09.png

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

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

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

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

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

スクリーンショット 2017-10-09 6.51.39.png

slice.gif

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

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

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

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

スクリーンショット 2017-10-08 12.35.45.png

logo.gif

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

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;
UIController.cs
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が一番前に描画される。

スクリーンショット 2017-10-08 21.37.05.png

Screen Space – Camera

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

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

スクリーンショット 2017-10-08 21.37.22.png

World Space

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

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

スクリーンショット 2017-10-08 21.39.13.png

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