3Dアクションゲーム編
Lesson4 UIを作ろう
ここまでのLessonでプレイヤーとステージが完成しました。ここでは獲得した星の数などの情報を画面に表示するためのUIを実装していきましょう。
4-1
4-1 TextMeshProの導入
1
TextMeshProの
導入
実はUnityはテキスト周りの機能は結構不便です。ですが、TextMeshProを導入することで改善することができます。
ヒエラルキーのUI→Text-TextMeshProを選択してください。
「Inport TMP Essentials」を選択してください。
UIを作る時は2Dモードにすると便利です。シーンウィンドウの上部にある2Dボタンをクリックしてください。
ヒエラルキー内のCanvasをダブルクリックするとCanvasにフォーカスしてくれます。
2
TextMeshProの
基本的な使い方
UIを作る前にTextMeshPro（TMP）の基本的な使い方について解説します。項目が多いですが、その中でも頻繁に使う項目を紹介します。
TextMeshPro（TMP）は他にも本当に色々できるのですが、全ては紹介しきれないので一部だけ紹介します（実際にやる必要はありません）
タグを使って文字を装飾できます（タグについて解説しているページ）
文字にテクスチャを貼ったり、立体感をつけたりできます。
「3D Object」から3D空間上にTMPを配置することもできます。
TMPで日本語を表示する場合、ひと手間かかるので注意してください。日本語の導入方法はこのサイトなどを参考にしてください（このゲームのUIでは日本語を使いません）
TMPで設定を編集すると、同じフォントを使用している他のTextの設定も変化してしまったりします。これはMaterial Presetを共有しているため起こる現象です。同じ設定でTextを量産したい時は便利な機能ですが、プリセットを複数作りたい場合もあると思います。
プリセットを複数作る際はTextMeshPro→Resource→Font＆Materialsを開いて、FontAssetのマテリアルを選択してください。
インスペクター内の右上のボタンから「Create Material Preset」を選択すると新しいプリセットが追加されます。わかりやすい名前をつけられますが、指定しているフォントアセットの名前を含んでいないと設定できないので注意してください。
後はTMP内のMaterial Presetからプリセットを変更すれば完了です。
Unity Tips!
4-2
4-2 現在の体力を表示
1
UIを配置
TMPの使い方を一通り把握したら実際にUIを実装していきましょう。
まずはプレイヤーの体力を表示します。
Canvas上にTextMeshProを追加してください。名前は何でも構いませんが、解説では「HitPointText」にしておきます。
テキストの内容は「HP:99」にしておきます。ここで設定した文章はあくまで仮で、後からスクリプトで変更します。
大きさや位置はお任せするので、好みの場所に配置してください。アウトラインを設定するとゲーム画面に紛れないのでオススメです。
2
UIを更新
新しいスクリプト「HitPointUI」を追加して、以下のコードを入力してください。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using TMPro; // TMPを扱う時はこれを追加する！
public class HitPointUI : MonoBehaviour
{
TextMeshProUGUI m_hpTMP;
PlayerHitPoint PlayerHP;
void Start()
{
// 自身にアタッチされたTMPを取得
m_hpTMP = GetComponent<TextMeshProUGUI>();
// プレイヤーの体力を保持するPlayerHitPointを取得
// ※"Player"タグがついたオブジェクトから取得している
PlayerHP = GameObject.FindGameObjectWithTag("Player").GetComponent<PlayerHitPoint>();
}
void Update()
{
// 現在HPを表示
m_hpTMP.text = "HP:" + PlayerHP.HitPoint;
}
}
3
スクリプトを
アタッチ
【プログラムの解説】
・スクリプト内でTextMeshProを扱う際は上段に using TMPro; を追加しないと動作しないので注意してください。
・GameCameraと同じようにタグからプレイヤーを検索して、さらにそのプレイヤーにアタッチされているPlayerHitPointコンポーネントを取得しています。
入力が終わったらHitPointTextにアタッチして実行してみてください。「HP:99」だったテキストがしっかり現在の体力に置き換わっていることが確認できると思います。
トゲに触れたり落下したりして、数値がちゃんと減るか確認してみましょう。
4-3
1
UIを配置
TextMeshPro→3DのTMP（3Dオブジェクト）
TextMeshProUGUI→2DのTMP（UI）
のことを指します。間違えやすいので注意してください。
Unity Tips!
4-3 星の数を表示
同じように獲得した星の数も表示しましょう。
新しいTextMeshProをキャンバスに追加してください。
仮のテキスト「Star 9/9」を設定しましょう。名前はStarCountTextにしておきます。
体力と同様、大きさや位置はお任せするので好みの設定にしてください。
2
UIを更新
新しいスクリプト「StarCountUI」を追加して、以下のコードを入力してください。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using TMPro; // TMPを扱う時はこれを追加する！
public class StarCountUI : MonoBehaviour
{
TextMeshProUGUI m_starTMP;
public StarCount Star_Count;
void Start()
{
// TMPを取得
m_starTMP= GetComponent<TextMeshProUGUI>();
}
void Update()
{
// 最大の星の数と持っている星の数を表示
m_starTMP.text = "Star " + Star_Count.GetNowStarCount() + "/"
+ Star_Count.GetMaxStarCount();
}
}
3
コンポーネントを取得
入力できたらスクリプトをStarCountTextにアタッチしてください。
GroundCheckerの実装時にも使用しましたが、外部のコンポーネントを取得する手法を紹介します。
public （コンポーネント名）の変数を用意することでインスペクターから直接対象のコンポーネントを指定できます。オブジェクト同士を繋げる際、（特にゲーム制作に慣れていない人にとっては）この方法が一番わかりやすいと思いますので覚えておいてください。
StarCountコンポーネントを保持しているのはGameオブジェクトなので、GameオブジェクトをインスペクターのStar_Countにドラッグ＆ドロップしてください。
これでStarCountUIとStarCountが繋がりました。ゲームを実行して星の数を数えられているか確認してみてください。
4-4
4-4 タイムを表示
1
UIを配置
最後にGameTimerコンポーネントで数えているタイムを表示しましょう。
新しいTextMeshProをキャンバスに追加してください。
仮のテキスト「99:99」を設定しておいてください。名前はTimerTextにしておきます。
例のごとく場所や装飾はお任せします。
2
UIを更新
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
// ① TMPを扱うときに必要なものは…
（ここに入力）
public class TimerUI : MonoBehaviour
{
// ② TextMeshProを保持するためのprivateな変数 timer_TMP
（ここに入力）
// ③ GameTimerにアクセスするためのpublicな変数 Game_Timer
（ここに入力）
void Start()
{
// ④ TMPを取得して②に代入
（ここに入力）
}
void Update()
{
// 現在の時間を表示
string timeString = "";
timeString = Game_Timer.GetMinute().ToString("00");
timeString += ":";
timeString += Mathf.Floor(Game_Timer.GetSecond()).ToString("00");
timer_TMP.text = timeString;
}
}
【プログラムの解説】
・ToSrting関数はfloat型やint型の値をstring型（文字列型）に変換する関数です。引数に"00"と入力すると桁数が揃うように0を入れてくれます。例えば 3.ToString("00") とすると、03を返します。
これによって、タイムが1桁の時でも表示がずれなくなります。
・Mathf.Floor関数は引数に設定したfloat以下の最大の整数を返す関数です。小数点以下が含まれていると計算に不都合なので切り捨てています。
3
コンポーネントを
取得
Mathf.Floor関数は小数点以下切り捨て、Mathf.Ceil関数は小数点以下切り上げになります。
Floorは「床」を意味する単語で、Ceilは「天井」を意味する単語になります。この2つの関数は
天井と床をイメージすると覚えやすいはずです。
【素材】みんちりえ（ https://min-chi.material.jp/ ）
Unity Tips!
③ で設定した変数はpublicになっているので、StarCountの時と同じようにインスペクターからTimerUIとGameTimerを繋げてみてください。
実行して経過時間が表示されていたら成功です。
Gameウィンドウの「Play Focused」をクリックして「Play Maximized」を選択するとゲームを全画面プレビューできます。
しかし、これを実行するとCanvasの大きさと画面の大きさが噛み合わず不自然な表示になってしまいます。実際にゲームを出力した際に画面サイズを変更しても同じ問題が起こってしまうので、ここではその直し方を2つ解説します。
1つ目はアンカーを設定する方法です。今は画像の位置の基準が中央になっていますが、それを左上などに設定することでUIの位置を保ちます。
UIのTransformからアンカーを設定してください。教材の場合、HitPointTextは左上に配置したいのでアンカーを左上に変更します。全てのTextのアンカーを変更して実行すると、それぞれのUIが左上と右上をキープしていることがわかります。
2つ目はCanvasの設定を変更する方法です。ヒエラルキーからCanvasを選択して、Canvas ScalerのUI Scale Modeを「Scale With Screen Size」に変更してください。変更すると表示されるReference Resolutionの値を調整します。
実行すると全画面に合わせてUIが大きくなっていることがわかります。
アンカーを設定する方法はUIの大きさは変わらずに位置を調整してくれます。Canvasを設定する方法は画面サイズに合わせてUIの大きさを調整してくれます。自分のゲームに適していると思う方法を選びましょう（両方同時に使ってもOKです）
特に画面サイズが不確定なモバイルゲームやブラウザゲームの開発では、上記の設定を適切に行わないとUIがはみ出たり、本来見えてはいけない部分のUIが見えてしまったりするので注意しましょう。
Unity Tips!
いよいよ制作も大詰めです。次のLessonではタイトル、リザルト、ゲームオーバーを実装してそれぞれを繋げていきましょう。
まとめ
・TextMeshProを導入することで高機能なテキスト表示を行うことができる
スクリプト内でTextMeshProを操作する場合は、上部に using TMPro; と記述する必要がある
・Mathf.Floor関数は引数にした値の小数点を切り捨てた値を返す
Mathf.Ceil関数は引数にした値の小数点を切り上げた値を返す
評価テスト