UnityでのUIデザインの基礎をまとめてみました

Unityは物理演算等内部ロジックの実装にも強いですが、UIについては当然のごとく各種機能が用意されています。ゲーム用のプラットフォームなのでUIが充実しているのは大前提となります。

そこでこのページでは、Unityで作れるUIデザインの基礎について解説します。

文字だけのUI

UIの基礎の基礎として、まずは文字を出してみましょう。UIはユーザーインターフェースの略で、要するにシステムのなかでユーザーの目に触れる部分、ユーザーが表面的に操作できる部分のことです。

ゲームで言えば、グラフィック以外のユーザーの目に見えているものはUIです。スタートボタンもパラメーターの表示もすべてUIです。そう考えると、UIの基本としてまずは文字表示があります。具体的な方法は以下のようになります。

Hierarchyウィンドウ上で右クリック→UI→Textを選択

上記の通り実行すると、「New Text」と表示されます。UIの土台としてはこのように簡単に実現することが可能です。このように基礎の基礎があり、次に基礎があります。

画像の表示

文字の次は画像を表示してみます。画像もそのままUIに乗せるだけなので、UIデザインの基礎です。画像表示の機能をImageと言いますが、その具体的な使い方は以下です。

Hierarchy上で右クリック→UI→Image

これで真っ白のImageが作成されました。座標を書き換えると位置を調整できます。そして画像を入れる方法も非常にシンプルで、真っ白のImageの上に画像をドラッグ＆ドロップするだけです。

詳細は割愛しますが、ドラッグ＆ドロップで入れた画像はGUIやスクリプトで様々な編集ができます。色や質感を変えたり、ボタンにしたりといった基本的なことはGUIですぐに実現可能で、より複雑な機能はスクリプトで実装します。

ボタンを付ける

ほとんどのゲームではボタンを押して先に進めるシーンがあります。そのためUIにおいて基本の機能です。ボタンを作る流れは以下のようになります。

Hierarchy上で右クリック→UI→Button

これで基本となるボタンが作成されました。ボタンは押したときに処理を実行するためにあるので、スクリプトを設定します。そのためには以下の流れを取ります。

Buttonを選択中に、Inspector上に表示されるAddCompoentボタンを押す → NewScriptを選択

これでスクリプトを書く画面が開きます。スクリプトを記述することで、ボタンを押した際の処理が出来上がるのです。以下がサンプルスクリプトです。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ButtonScript : MonoBehaviour {

 　　　public void OnClick()
 　　　{
 　　　 　　　Debug.Log("ボタンを押した際の処理を実行");
 　　　}
}

このようなスクリプトを記述したら、ボタンを押したらこのスクリプトを実行してください、という登録を行います。「On Click()」の+ボタンを押して追加します。処理の内容は様々で、たとえばシーンを切り替える、ゲームをスタートさせる、ゲームを終了する、などなどです。

canvasの使い方

canvasは名前の通りUIを作る場所です。canvasはほぼGUIから設定可能で、主に「Canvas」「Canvas Scaler」「Graphic Raycaster」の3つを操作することで設定していきます。まずCanvasはUIの描画方法やカメラ指定を行うコンポーネントです。

通常ボタンや文字の配置は2Dですが、Canvasを設定することで3DにUIを配置することができます。次にCanvas ScalerはUIのスケールやピクセル制御を行うコンポーネントです。

最後にGraphic RaycasterはUIで発生するクリックやタッチを検出する機能です。

動的なUI生成

上で説明してきたものは静的なUIですが、UIを動的に生成することも可能です。たとえばprefabを使います。

prefabの使い方

prefabは動的なUIを生成するものです。Resources関数で取得して生成する方法がもっとも使いやすく、具体的には以下のような流れになります。

Hierarchyウィンドウ上を右クリック→Create→Folderでフォルダを作成

これでフォルダができたのでオブジェクトのプレハブをドラッグ＆ドロップし、Resources関数を使います。たとえばUIに四角いオブジェクトを出現させるサンプルコードは以下のようになります。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PrefabTest : MonoBehaviour {

 　　　void Start () {
 　　　 　　　GameObject obj = (GameObject)Resources.Load ("Cube");
 　　　 　　　Instantiate (obj, new Vector3(0.0f,2.0f,0.0f), Quaternion.identity);
 　　　}

}

処理としてはクラスオブジェクトを生成し、そのオブジェクトを元にUIを生成しています。処理が走ったタイミングでオブジェクトが出現するため、同的なUIになっています。

Resourcesクラスの使い方

上の例ではprefabのResources関数を使用しましたが、Resoucesクラスでプレハブを取得することも可能です。似たような概念であるため両者の違いや全体での位置づけが理解しにくいかと思いますが、最初は断片的な知識で問題ないかと思います。

Unityに様々な機能があり、もともとあった機能にグレードアップして付け加えられた機能も多数あります。つまり、似たような機能が複数あり、なおかつ両者の関係性が必ずしも明確化されているわけではないということです。

「この機能とこの機能はよく似ているけどどう違うのか、他にも似たような機能があるのか。」といった疑問が出てくるのは当然なのですが、Unityの機能がすべて体系化されているわけではないので、似たような機能があってもそこまで気にせず、また完全に役割分担できるわけではないことも知っておくと良いですね。

慣れていくうちに機能を全体的に把握できるようになり、Unityの体系化されている部分とそうでない部分がわかってきます。Resourcesクラスのサンプルコードは以下のようになります。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class CreateManager : MonoBehaviour {

 　　　void Start () {
 　　　 　　　GameObject obj = (GameObject)Resources.Load ("Cube");
 　　　}
}

まとめ

UIのデザインは奥が深いので他にもいろいろあります。しかし最初からすべてを把握するのは不可能で、もっと言えば上記の通りUnityに様々な機能がある分体系化していくことも難しいです。

プログラミング言語にしてもフレームワークなどのツールにしても体系化して大枠から捉えていくのが一般的なのですが、Unityの場合大枠と細部の両方から攻めていくことをおすすめします。

すべて把握しようとするよりも、自分に今必要な機能を調べながら実装していくのが良いでしょう。

【Unity関連記事】
▼Unityの基礎編
・ 【unityのフリーランス求人・案件情報】エンジニア需要や開発単価、未経験でもいける？
・ 【unity入門】ゲーム開発だけじゃない、Unityで出来ること

▼Unityの外部アセット、リソース編
・ UnityでMMDモデルを自由自在に動かしてみよう！
・ Unity adsを使って簡単に広告を導入しよう
・ Unityのアセットストアの上手な使い方
・ Unityで作られているARアプリをまとめてみました

▼Unityのコンポーネント編
・ Unityのrigidbodyを使って物理演算を導入してみよう
・ コードを使わずにUnityでキャラ追従のカメラを作る方法
・ Unityで簡単にアニメーションを作成する方法をまとめました
・ Unityでオブジェクトを回転させる方法をわかりやすくまとめました
・ Unityのtransformを使ってオブジェクトの座標や回転を操作する
・ Unityのアニメーターを簡単に作成する方法まとめ
・ UnityのShaderの解説と使い方まとめました
・ Unityで「当たり判定」（衝突判定）を付ける方法
・ Unityのgetcomponentの上手な使い方と使用時の注意点まとめ
・ Unityでキャラの移動を制御する方法まとめ
・ Unityのraycastを使って出来ることをまとめました

▼Unityのデフォルト機能、ゲーム製作編
・ blenderで作ったオブジェクトをUnityで組み込んでみよう
・ Unityのコルーチンとは？使い方をまとめました
・ Unityで作られているRPGゲームを作るための６つのステップ
・ Unityのパーティクルを使って演出できるエフェクト例
・ （この記事）UnityでのUIデザインの基礎をまとめてみました
・ Unityのcloud buildの便利な点をまとめました
・ Unityを使って半日でFPSゲームを作ってみよう