今からでも間に合うUnity5のuGUI入門

Unity 4.6から新しいUIシステム「uGUI」が使えるようになりました。¹
これまでUnityの組み込みUIはOnGUIなどイマイチ感が拭えませんでしたが、これからはNGUIなどのプラグインを別途導入しなくとも良さそうです。²
この記事ではUnity5を使ってnGUIの使い方と全体像を簡単に紹介します。³

まずは前準備

1. 新しいプロジェクトを作成
2. 「Directional Light」今回は使わないので削除
3. 「Main Camera」の「Clear Flags」を「Solid Color」にして背景を単色に変更
4. 「Game」タブのちょっと下をクリックして「Free Aspect」に解像度を変更
   
   (ここまででこんな感じ)

画像を表示してみる

1. プロジェクトにpng画像を追加 ⁴
2. 追加したpng画像を選択し「Inspector」の「Texture Type」を「Sprite (2D and UI)」へ変更
3. 「Hierarchy」の「Create」から「UI」「Image」
4. 作られた「Hierarchy」の「Image」を選択
5. 「Inspector」の「Source Image」追加したpng画像を選択
6. 「Inspector」の「Pos X」と「Pos Y」の両方を0、「Width」と「Height」をpng解像度に合わせて設定
   
   (ここまででこんな感じ)

ボタンイベントを使ってみる

1. 「Hierarchy」の「Create」から「UI」「Button」
2. 作られた「Hierarchy」の「Button」を選択
3. 「Inspector」の「Pos X」を0、「Pos Y」を100
4. 「Hierarchy」から「Button」左に三角マークをクリックし子要素として表示された「Text」を選択
5. 「Inspector」の「Text」を"button"から"ボタン"へ
6. 「Project」の「Create」から「C# Script」をクリックしファイル名を「ButtonClick」へ
7. 「Hierarchy」の「Create」から「Create Empty」をクリックし"Script"と命名
8. 「ButtonClick」をダブルクリックで開きスクリプトを後述のように編集
9. 「ButtonClick」をドラッグし"Script"へドロップ
10. 「Hierarchy」から「Button」を選択
11. 「Inspector」の「On Click()」右下の「＋」をクリックし、「Hierarchy」の"Script"をドラッグし追加された入力欄へドロップ
12. 「Inspector」の「On Click()」下「No Function」をクリックし「ButtonClick」の「OnClick」を選択
13. Unityを再生して「Game」タブ内のボタンをクリックすれば「Console」タブへ「click me」と表示されます！

ButtonClick.cs

using UnityEngine;

public class ButtonClick : MonoBehaviour
{
    public void OnClick()
    {
        Debug.Log("click me");
    }
}

(ここまででこんな感じ)

全体像を見てみる

使うのはそう難しくありませんね
全体がどう組み合わさっているかHierarchyを見てみます

hierarchy

Main Camera : 今回は特に関係ないです
Canvas      : 子にUI要素(画像とかボタンとか)を持ちます
  - Image   : 画像を表示。親にCanvasが必要
  - Button  : ボタンイベントを発火。親にCanvasが必要
    - Text  : テキストを表示。フォント設定可。親にCanvasが必要
EventSystem : マウス操作、タッチ操作、キーボード操作などから発生するイベント処理を担当
Script      : 今回はボタンイベントの受け口として使いました

まとめ

これからUnityで開発を行うのであればUIシステムをuGUIにするのが良さそうです！⁵
スプライトパッカーなどUI関連の部分も標準提供されているので、何かと楽です。

1. Unity 4.6 リリースノート Features: "New UI System" ↩

2. NGUIは使い勝手の良いUIフレームワークで、長らくUnity開発者の間で広く使われててきた有料アセットです。こちらのNGUI関連記事がとても面白いので合わせてご紹介します ↩

3. Unity5.2.1p4 を使って動作確認しています ↩

4. unity-chanの素材を使わせて頂きました ↩

5. もし既にNGUIを使っているなら無理して引っ越す必要はないかも。例えばNGUIのUICamera.genericEventHandler相当がuGUIには見当たらないなど移行は簡単ではなさそう。 ↩