More than 5 years have passed since last update.

uGUIまとめ

Last updated at 2017-10-19Posted 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 ValueとMax 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は画像のサイズ

以下の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;

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);
    }
}