LoginSignup
20

More than 5 years have passed since last update.

uGUIまとめ

Last updated at Posted at 2017-10-08

参考
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 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について

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20