Unity入門 UI のチュートリアル【UIだけでゲームを作る】

アイキャッチ チュートリアル

UI に特化したチュートリアルです。

UI要素の機能と用途の把握を目的として、UIだけでゲームを作ってみます。

今回作るゲームは、クリックゲームです。

それでは、以下、解説。

UIの用途

まずは、基本的なことから。

ヒエラルキーのCreate → UI で作れるUI 要素の解説です。

Text – 画面に文字を表示する

Textの用途は、無数に考えられますね。ラベルとかスコア表示とかさまざまな使い道があります。

下記は、スクリプトからテキスト内容を変更するときの例です。

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

public class SampleScript : MonoBehaviour
{
	Text Score;

	void Start()
	{
		Score = GetComponent<Text>();
	}

	public void SetScoreText( int value )
	{
		Score.text = value.ToString(); // テキストを変更
	}
}

Text Mesh Pro – より綺麗な文字の表現を行う

Text よりも綺麗な文字表現を行いたいときに使います。

Textとの差が出やすいのは、スケールで文字を拡大したときとかかな。

一般的なフォントファイル ( otf や ttf ) が、そのまま使えず、専用のフォントアセットを作る必要があるので

若干、初心者には扱いにくいかもしれません。

どういうことができるのかはこちらのスライドをどうぞ。

Image – 画面にスプライトを表示する

UIで画像を表示したいときは、まず Image を使います。

扱える画像はスプライトだけですが、Image Type を利用できるというメリットがあります。

下記は、Image Type の例です。

ImageTypeSimple
Simple
ImageTypeTiled
Tiled
ImageTypeFilled
Filled

RawImage – 動的に生成した画像やネットワークから取得した画像を表示する

RawImageは、Imageよりも扱える画像が柔軟で、どんなテクスチャでも表示できます。

プログラム内で生成したテクスチャや、サーバーからダウンロードした画像を表示したいときは

RawImage を使用します。

一応、Sprite.Create でテクスチャからスプライトを動的に生成することもできます。

Button – ボタンをクリックしたときにイベントを実行する

ボタンを押したときにイベントを実行したいときに使います。そのままですね。

インスペクターから On Click というプロパティに実行したい処理を登録します。

スクリプトから追加するときはこちら。

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

public class SampleScript : MonoBehaviour
{
	Button button;

	void Start()
	{
		button = GetComponent<Button>();

		button.onClick.AddListener( PrintLog ); // イベントを追加
	}

	public void PrintLog()
	{
		Debug.Log( "Clicked!" );
	}
}

Toggle – クリックでON/OFFを切り替える

いわゆるチェックボックスです。

Is On というプロパティからチェックの有無を取得できます。

また、チェック状態が変化したときに実行したい処理を追加することができます。

インスペクターから On Value Changed というプロパティに追加するか、

下記のようにスクリプトから追加します。

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

public class SampleScript : MonoBehaviour
{
	Toggle toggle;

	void Start()
	{
		toggle = GetComponent<Toggle>();

		// イベントを追加
		toggle.onValueChanged.AddListener( isChecked => Debug.Log( "Check : " + isChecked ) ); 
	}
}

Slider – 設定範囲内で値の増減を行う

ユーザーに指定した範囲内で値の操作をさせたいときに使います。

Toggle と同様に、値が変更されたときに実行したい処理を On Value Changed に追加できます。

Scrollbar – スクロール量の増減を行う

ユーザーにスクロール量を変更させたいときに使います。

これを単独で使うケースは、あんまり無い気がしますが…

代わりに ScrollViewの方をよく使うことになると思います。

Dropdown – リストの中から1つ選択する

ユーザーにリストの中から1つ選択させたいときに使います。

Options というプロパティから項目を追加することができます。

他のUIと同様に、値が変更されたときに実行したい処理を On Value Changed に追加できます。

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

public class SampleScript : MonoBehaviour
{
	Dropdown dropdown;

	void Start()
	{
		dropdown = GetComponent<Dropdown>();

		// 項目を追加
		Dropdown.OptionDataList optionDataList = new Dropdown.OptionDataList();
		optionDataList.options.Add( new Dropdown.OptionData( "アイテム1" ) );
		optionDataList.options.Add( new Dropdown.OptionData( "アイテム2" ) );
		optionDataList.options.Add( new Dropdown.OptionData( "アイテム3" ) );
		dropdown.AddOptions( optionDataList.options );

		// イベントを追加
		dropdown.onValueChanged.AddListener( index => Debug.Log( "Selected Item : " + index ) ); 
	}
}

InputField – ユーザーにテキスト入力を行わせる

ユーザーに名前入力などをさせたいときに使います。

Content Type を変更することで、入力を英数字のみに制限したり、

パスワードのように入力した値を「*」で隠すことができます。

他のUIと同様に、値が変更されたときに実行したい処理を On Value Changed に追加できます。

On Value Changed では1文字でも変更があると呼ばれてしまうので、

編集終了時にだけ処理したい場合は、On End Edit に処理を追加した方がよいです。

Canvas – UI 要素を配置するための領域

UIを配置するために必須なオブジェクトです。

Canvasの子として Canvas を配置することも出来ます。

その場合、子キャンバスの設定は親キャンバスから継承され、Canvas Scaler は無効化されます。

Panel – 親UI全体に被さるImageのプリセット

Panel は、Image にデフォルトのスプライトと、親UIのサイズと同じになるようにアンカーが設定された

プリセットUIです。

ScrollView – スクロール可能な領域を作る

Scrollbar と Mask を利用したスクロールビューです。

ScrollView 内の Content というオブジェクトのサイズが、スクロールできる領域のサイズです。

このContentのサイズを変更すると、スクロールの範囲も変更されます。

その他のUIコンポーネント

Canvas Group – 親UIと子UIの特定プロパティを一括操作する

Canvas Group は、複数UIの一括でフェードイン/フェードアウトするときによく使われます。

親UIにCanvas Groupをアタッチして、子UI全体も同時に操作します。

Interactable で入力の可否を一括で変更することも出来ます。

CanvasGroup

Mask – 子UIの表示領域を親UIの形状で制限する

子UIの一部分だけを表示したいときに使います。

Mask

RectMask2D – Maskよりもパフォーマンスが良いマスク(制限あり)

Maskよりも高速なマスクです。ただし、制限がいくつかあります。

矩形でしかマスクできない、回転させることができないなど。

Shadow – TextやImageにシンプルな影をつける

立体感を出したり、目立たせたいときなどに。

Shadow

Outline – TextやImageにシンプルな輪郭をつける

文字色と背景色が同じ色で、見えなくなってしまうときなどに。

Outline

Toggle Group – 複数のToggleの中から1つだけチェックできるようにする

ラジオボタンのような相互排他的な選択肢を作りたいときに使います。

Toggle の方に Toggle Group の参照を設定することでグループ化できます。

ToggleGroup

次回につづく

今回はここまでです。

次回は、ゲーム内容の説明とアセットの準備をやっていきます。

以上。おしまい。



コメント

タイトルとURLをコピーしました