第05回 GUIの実装

前回: 第04回物理と衝突判定 / 次回: 第06回ミニゲーム実装

前回の振り返り

物理挙動と衝突判定に触れました

Rigidbody を使って重力で動くオブジェクトを作りました
Collider を使って、ぶつかる範囲を設定しました
Is Trigger を使うと、通過を検出できることを確認しました
衝突や通過のタイミングでログを出しました
今回は、ゲームの状態を画面に表示する GUI を扱います

今回の目的

ゲーム内の情報を画面に表示する

Canvas の役割を説明できるようにする
TextMeshPro や Button を配置できるようにする
UI とゲーム内オブジェクトの違いを区別する
スコアやメッセージを表示する小さな画面を作る

今回の授業内容

GUIの実装

Canvas の役割に触れる
EventSystem の役割を確認する
実習1: スコア表示を作る
TextMeshPro の役割を確認する
RectTransform、Anchor、Pivot に触れる
実習2: ボタンを作る
TMP の文字更新と表示切り替えを扱う

GUI の実装

ゲーム内の情報を画面に表示し操作する方法を学びます

メニューとかボタンとかね

GUI とは

プレイヤーに情報や操作を渡す画面要素

GUI は Graphical User Interface の略ですゲーム内の情報を表示したり、プレイヤーからの入力を受け取るための画面要素です
スコア、残り時間、HP、クリアやゲームオーバーの表示等扱う情報は様々ですが、ゲームには欠かせない要素です

Unity の GUI

Unity の標準 GUI システム

Unity には、ゲーム内で使える GUI を作るための仕組みが用意されています
uGUI と呼ばれるシステムが標準で提供されており Canvas、TextMeshPro、Button などのコンポーネントを使って GUI を構築可能です
UI Toolkit という新しいシステムもありますが、発展途上で取り扱いがやや難しいため、今回は uGUI を扱います

Canvas

UI を配置するための土台

Unity Editor の Hierarchy から右クリック > UI > Canvas を選択して作成

uGUI の UI は Canvas の中に配置します
Canvas は UI 専用の GameObject ですゲーム内の 3D 空間とは別の仮想の画面として扱えます
TextMeshPro、Image、Button などは Canvas の子として扱います

Canvas の役割

UI を画面に表示するための仕組み

キャンバスの設定例横800x縦600の仮想画面を指定している

Canvas は、子に置いた UI を画面に表示するための仕組みを提供します
ゲームはスマートフォン、タブレット、PCなど様々な環境で実行されます
画面サイズが変わってもレイアウトが崩れないよう、配置を自動で調整する機能があります

CanvasScaler

画面サイズに合わせて UI を拡大縮小する機構

CanvasScaler コンポーネントは、画面サイズに合わせて UI を拡大縮小するための機構を提供します
UI Scale Mode を Scale With Screen Size にすると画面サイズに合わせて UI の大きさを自動で調整します
Reference Resolution で基準となる画面サイズを指定します
画面サイズが変わっても、UI の見た目が大きく崩れないようにするための機能です他にも Constant Pixel Size や Constant Physical Size といったモードがありますが 通常は Scale With Screen Size を使用するのがおすすめです

EventSystem

UI の入力を扱うための仕組み

追加されたEventSystem UI 操作に必須なため、自動で作成されることがある

Button のクリックなど、UI への入力を中継するコンポーネントです
UI 操作のために必須のコンポーネントで、通常はCanvas と一緒に自動で作成されます
うっかり削除消してしまうと UI が反応しなくなりますので、存在を確認しておきましょう
入力の細かなカスタマイズが可能ですが今回はデフォルトのまま使用します

TextMeshPro とは

Unity の高品質なテキスト表示機能

TextMeshPro （TMP）は Unity で使われる文字表示用のコンポーネントです
元はサードパーティ製のアセットでしたが現在は Unity に統合されています
UI ラベル、ボタン、スコア表示、会話文などゲーム中の文字表示に広く使われます
リッチテキストや細かなスタイル設定にも対応しており現在の Unity の標準的な文字表示機能です
「TextMesh ProがUnityに参加 2017年3月20日」 https://unity.com/ja/blog/games/textmesh-pro-joins-unity

TMP の特徴

高品質な文字表示と柔軟な装飾

TMP の SDF 文字装飾の例
TMPでの文字装飾の例アウトラインや影、太さの調整が可能なばかりか疑似的なライティング表現も可能

拡大縮小しても輪郭が崩れづらい高品質な文字表示を実現しています
アウトライン、影、太さ、ぼかしなど文字の見た目を細かく調整できます
uGUI には旧来の Text コンポーネントもありますが、現在は TMP の使用が推奨されています

TextMeshPro の Font Asset

文字の形をアトラスに保存する

TextMeshPro のフォントアトラス例
アトラス化された文字の例使用するグリフが画像でまとめられている

TextMeshPro の Font Asset には使用する文字を1枚にまとめたフォントアトラスが入っています
フォントアトラスは、元となるフォントから指定した文字をレンダリングして作成されます
日本語の文字表示のためには、必要な文字を含む Font Asset を用意する必要があります

フォントの取り込みと Font Asset の作成

日本語を表示するための準備

日本語を表示するためには、必要な文字を含む Font Asset を用意する必要があります
TextMeshPro の Font Asset を作成するためにはフォントファイル（.ttf や .otf）を Unity に取り込む必要があります
取り込んだフォントファイルを選択して、 右クリック > Create > TextMeshPro > Font Asset を選択すると Font Asset が作成されます
フリーの日本語フォントなどを用意してください

Font Asset の作り方（1/2）

フォントを取り込み、 TMP の初期設定を済ませる

メニューの操作例フォントファイルを選択して右クリックから Create > TextMeshPro > Font Asset を選ぶ

日本語フォントファイルを Unity に取り込む
取り込んだフォントファイルを選択して、 右クリック > Create > TextMeshPro > Font Asset > SDF を選択する
TMP Importer が開いた場合は Import TMP Essentials をクリックして必要なファイルをインポートする

Font Asset の作り方（2/2）

必要な文字を指定して Font Asset を更新する

1.右上の Update Atlas Texture をクリック

Font Asset を選択して、Inspector の Update Atlas Texture をクリックする
Custom Characters 欄に、使用する文字を入力する
Generate Font Atlas をクリックして、 Font Asset を更新する
Custom Characters 欄に必要な文字を入力
Generate Font Atlas をクリックして Font Asset を更新する

RectTransform

UI 用の位置と大きさを扱う Component

Inspector 上のRectTransform Canvas の子に置いた UI 部品は Transform ではなく RectTransform で配置される

UI は通常の Transform ではなく RectTransform で配置します
RectTransform は通常の Transform とは異なり UI の大きさやレイアウトの基準点をまとめて扱うことができます
制御はやや複雑です今回は基本的な位置調整のみを扱います

実習1: スコア表示を作る

Canvas に TextMeshPro を配置する

スコア表示の例

Canvas を作成する
Canvas の子に Text - TextMeshPro を追加する
表示内容を Score: 0 にする
画面の好みの位置に配置する
Game ビューで見え方を確認する

文字が小さい場合は、フォントサイズと RectTransform の幅を調整します

Anchor と Pivot

画面のどこを基準に置くかを決める

Anchor は、UI が画面のどこを基準に追従するかを決めます
Pivot は、UI 自身のどの点を基準に動かすかを決めます
左上のスコアなら、Anchor も左上に合わせると扱いやすくなります
画面サイズを変えて、位置が崩れないか確認します
設定はやや複雑ですが、慣れると便利な機能です時間をかけて理解していきましょう

Button

プレイヤーの操作を受け取る UI

クリックやタップを受け取れる基本的な UI 部品です
OnClick に処理を登録することで、クリックされたときの動作を定義できます
今回はクリックしたらログを出すところまで扱ってみましょう

実習2: ボタンを作る

クリックに反応する UI を作る

Canvas の子に Button を追加する
ボタンの文字を Start に変える
位置と大きさを調整する
クリック時に呼ぶメソッドを用意する
OnClick に登録してログを確認する

UI を更新するスクリプト

スコア表示を書き換える

TMP_Text の参照を Inspector から設定します
Button の OnClick に、スコアを増やすメソッドを登録します
ボタンを押すことでスコア表示が変わるかを確認してみてください

using TMPro;
using UnityEngine;

public class ScoreView : MonoBehaviour
{
    public TMP_Text scoreText;
    int score = 0;

    public void AddScore()
    {
        score += 10;
        scoreText.text = "Score: " + score;
    }
}

表示のオンオフを切り替える

必要な時だけ表示する

using UnityEngine;

public class ClearView : MonoBehaviour
{
    public GameObject target;

    public void Show()
    {
        target.SetActive(true);
    }

    public void Hide()
    {
        target.SetActive(false);
    }
}

GameObject.SetActive(false) にすると対象を非表示にできます
表示と非表示の切り替えはクリア、ゲームオーバー、ポーズ表示などで必要になります
Button の OnClick に登録して、動作を確認してみてください

実習3: UI と状態をつなげる

表示が変わる画面を作る

スコア用 TextMeshPro を用意する
ScoreView を作成する
Button を押したら AddScore を呼ぶ
クリア表示用 TextMeshPro を用意する
ボタンや判定から表示を切り替える

Inspector で参照が設定されているかを確認します

よくあるつまずき

UI が表示されない、反応しないとき

Canvas の外に UI を置いている
TextMeshPro の色が背景と近く、見えにくい
RectTransform の幅や高さが足りていない
EventSystem がない
Script の参照欄に TextMeshPro や Button を設定していない
Font Asset に表示したい文字が含まれていない

今回のまとめ

今日のポイント

UI は Canvas の中に配置します
RectTransform、Anchor、Pivot を使って画面上の位置を調整します
TextMeshPro や Button を使うと、情報表示と入力を扱えます
次回はここまでの内容を組み合わせて、小さなゲームを実装します

おつかれさまでした！

次回予告第06回ミニゲーム実装

今までの部品でゲームを作るよ

付録：フォントとは

文字の形を定義するデータ

フォントは、文字の形を定義するデータセットです個々の文字（グリフ）を一定のルールで集めてまとめたものがフォントになります
フォントには、文字の形を定義するアウトラインデータや文字の幅や高さなどのメトリクス情報が含まれています
フォントファイル（.ttf や .otf）を Unity に取り込むと、 TextMeshPro の Font Asset を作成できます
フォントは通常、ライセンスに基づいて使用されますゲームでの使用には制限がある場合もありますので注意してください

付録：おすすめ日本語フリーフォントの例

定番のフォント各種

フォント	特徴	提供元
Noto Sans JP / Noto Serif JP	定番のゴシック・明朝	https://fonts.google.com/noto
源ノ明朝	Adobe 提供の多言語CJKフォント	https://github.com/adobe-fonts/source-han-serif/tree/release/
M PLUS	ゲームUIにも使いやすい書体群	https://mplusfonts.github.io/
BIZ UDゴシック / BIZ UD明朝	読みやすさ重視のUD系フォント	https://fonts.google.com/?query=BIZ+UD
Kosugi / Kosugi Maru	シンプルな日本語Webフォント	https://fonts.google.com/?query=Kosugi

付録：フォントのライセンスに注意

ゲームで使用する前に確認すること

多くの場合、フォントは画像作成や印刷物での使用を想定して提供されており、ゲームでの使用には制限がある場合があります
商用利用が可能か、クレジット表記が必要か、改変が許可されているかなど実際に使う前に配布ページのライセンスと利用条件を必ず確認しましょう
知的財産を適切に扱えることは、ゲーム開発者の基本条件の一つです敬意を持ち、ルールを守って使用してください

付録：使用する日本語の文字を選ぶ

Font Asset に必要な文字を含める

Font Asset を作成する際に、使用する文字を指定します
すべての文字を含めると、Font Asset のサイズが非常に大きくなります 本来は必要な文字だけを選んで Font Asset を作る必要があります
例えば、スコア表示なら数字とコロンだけで十分ですし、メッセージ表示なら、ゲーム内で使う文字をリストアップして指定するのが効率的です
文字の選択は、ゲームの内容やターゲットユーザーに合わせて行うと良いでしょう

付録：使用する文字を選ぶのが大変なら

文字セットを借りてくる

有志の方が日本語の文字テーブルを公開してくださっています感謝して使わせていただきましょう
https://gist.github.com/kgsi/ed2f1c5696a2211c1fd1e1e198c96ee4

第05回 GUIの実装 ​

前回の振り返り ​

物理挙動と衝突判定に触れました ​

今回の目的 ​

ゲーム内の情報を画面に表示する ​

今回の授業内容 ​

GUIの実装 ​

GUI の実装 ​

ゲーム内の情報を画面に表示し 操作する方法を学びます ​

メニューとか ボタンとかね ​

GUI とは ​

プレイヤーに情報や操作を渡す画面要素 ​

Unity の GUI ​

Unity の標準 GUI システム ​

Canvas ​

UI を配置するための土台 ​

Canvas の役割 ​

UI を画面に表示するための仕組み ​

CanvasScaler ​

画面サイズに合わせて UI を拡大縮小する機構 ​

EventSystem ​

UI の入力を扱うための仕組み ​

TextMeshPro とは ​

Unity の高品質なテキスト表示機能 ​

TMP の特徴 ​

高品質な文字表示と柔軟な装飾 ​

TextMeshPro の Font Asset ​

文字の形をアトラスに保存する ​

フォントの取り込みと Font Asset の作成 ​

日本語を表示するための準備 ​

Font Asset の作り方（1/2） ​

フォントを取り込み、 TMP の初期設定を済ませる ​

Font Asset の作り方（2/2） ​

必要な文字を指定して Font Asset を更新する ​

RectTransform ​

UI 用の位置と大きさを扱う Component ​

実習1: スコア表示を作る ​

Canvas に TextMeshPro を配置する ​

Anchor と Pivot ​

画面のどこを基準に置くかを決める ​

Button ​

プレイヤーの操作を受け取る UI ​

実習2: ボタンを作る ​

クリックに反応する UI を作る ​

UI を更新するスクリプト ​

スコア表示を書き換える ​

表示のオンオフを切り替える ​

必要な時だけ表示する ​

実習3: UI と状態をつなげる ​

表示が変わる画面を作る ​

よくあるつまずき ​

UI が表示されない、反応しないとき ​

今回のまとめ ​

今日のポイント ​

おつかれさまでした！ ​

次回予告 第06回 ミニゲーム実装 ​

今までの部品で ゲームを作るよ ​

付録：フォントとは ​

文字の形を定義するデータ ​

付録：おすすめ日本語フリーフォントの例 ​

定番のフォント各種 ​

付録：フォントのライセンスに注意 ​

ゲームで使用する前に確認すること ​

付録：使用する日本語の文字を選ぶ ​

Font Asset に必要な文字を含める ​

付録：使用する文字を選ぶのが大変なら ​

文字セットを借りてくる ​

今度こそ本当に おつかれさまでした！ ​

量が多くて 大変でしたな ​