Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

まずは前準備

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

画像を表示してみる

  1. プロジェクトにpng画像を追加 4
  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解像度に合わせて設定 figure2.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");
    }
}

figure3.png
(ここまででこんな感じ)

全体像を見てみる

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

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

まとめ

これからUnityで開発を行うのであればUIシステムをuGUIにするのが良さそうです!5
スプライトパッカーなど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には見当たらないなど移行は簡単ではなさそう。 

tadokoro
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした