uGUIまとめ


> 参考
[uGUIチュートリアル](http://www.metalbrage.com/UnityTutorials/uGUI/index.html)
[uGUI (UnityのUI機能) の使い方まとめ](http://mikan-daisuki.hatenablog.com/entry/2016/01/11/175010)


## 準備

- 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 Value`と`Max Value`で返す値を、
`Whole Numbers`で整数かどうかを指定

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

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

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

> 参考
[Unity uGUIでスライダーについて解説してみる](http://tsubakit1.hateblo.jp/entry/2015/02/08/135350)


## Anchor

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

> 参考
[uGUIのAnchorを使いこなす](https://cfm-art.sakura.ne.jp/sys/archives/476)


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

cssの`background-size: cover;`の状態

Reference Resolutionは画像のサイズ

![スクリーンショット 2017-10-11 17.16.09.png](https://qiita-image-store.s3.amazonaws.com/0/136286/c7ec51f1-84df-ec29-9728-0581b9162bb0.png "スクリーンショット 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](https://qiita-image-store.s3.amazonaws.com/0/136286/25b4dc20-4c93-2a61-4ee9-f5dba87075c7.png "スクリーンショット 2017-10-09 6.51.39.png")

![slice.gif](https://qiita-image-store.s3.amazonaws.com/0/136286/51260bd9-ab0d-e106-8199-db80e6dbbdd2.gif "slice.gif")


> 参考
[UnityのuGUIとImageとSpriteとスライスについて](http://tsubakit1.hateblo.jp/entry/2015/02/19/235900)


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

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

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

![スクリーンショット 2017-10-08 12.35.45.png](https://qiita-image-store.s3.amazonaws.com/0/136286/8e591392-35c9-9341-8e7d-dcbc4b430c60.png "スクリーンショット 2017-10-08 12.35.45.png")

![logo.gif](https://qiita-image-store.s3.amazonaws.com/0/136286/2e4310d5-6938-10c3-5f9a-1d939bfbf5ee.gif "logo.gif")


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

### Image

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

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

> 参考
[Unityでフェードイン／フェードアウトを実装する方法](http://tama-lab.net/2017/07/unity%E3%81%A7%E3%83%95%E3%82%A7%E3%83%BC%E3%83%89%E3%82%A4%E3%83%B3%EF%BC%8F%E3%83%95%E3%82%A7%E3%83%BC%E3%83%89%E3%82%A2%E3%82%A6%E3%83%88%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%99%E3%82%8B%E6%96%B9/)

### CanvasGroup

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

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

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

```c: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のフェードイン/フェードアウト](http://mizutanikirin.net/unity-itween%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9Fugui%E3%81%AE%E3%83%95%E3%82%A7%E3%83%BC%E3%83%89%E3%82%A4%E3%83%B3%E3%83%95%E3%82%A7%E3%83%BC%E3%83%89%E3%82%A2%E3%82%A6%E3%83%88)
[UIをまとめてフェード【Unity】【uGUI】](http://kan-kikuchi.hatenablog.com/entry/CanvasFader)


## 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](https://qiita-image-store.s3.amazonaws.com/0/136286/c1094ad6-a4e3-b0c2-7786-bfe53ed72bf0.png "スクリーンショット 2017-10-08 21.37.05.png")

### Screen Space – Camera

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

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

![スクリーンショット 2017-10-08 21.37.22.png](https://qiita-image-store.s3.amazonaws.com/0/136286/44fd494d-6825-c369-3de4-edf9883f22af.png "スクリーンショット 2017-10-08 21.37.22.png")

### World Space

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

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

![スクリーンショット 2017-10-08 21.39.13.png](https://qiita-image-store.s3.amazonaws.com/0/136286/0db675fa-78f7-e29c-11bb-9440241e8899.png "スクリーンショット 2017-10-08 21.39.13.png")


> 参考
[【Unity】uGUIのCanvasとRenderModeについて](http://tech.pjin.jp/blog/2017/03/02/unity_ugui_canvas_rendermode/)