このブログはUnityの初心者向けに、Untiyの機能の使い方、基本のスクリプトファイルの使い方から応用までをご説明しています。中級以上の方に読んでいただきたい内容も随時更新していますので、お時間がある方、検索でここにアクセスされた方はぜひ立ち寄っていってください。
今回から数回にわたり、UIの使い方についてご説明していきます。初回の今回は「Text（Legacy）」について。このテキストは Text Mesh Pro ができてから遺産扱いにされていますが、ちょっとした文字や数字を表示するにはとても便利な素材です。
下の動画は「ファイブボックス 一分間Unity講座 UIのTextに経過時間を表示させる方法」 のショート動画です。ご興味がございましたら、こちらの動画もご参照ください！
UI素材の配置
ヒエラルキー上で右クリック、または左上の「＋ボタン」から UI ⇒ Legacy ⇒ Text を選択します（OSやUnityのEditorバージョンによっては選択しの順番や名前が違いますがTextが選ばれていればOKです）
ヒエラルキー上には選択したTextのほかに、新たに2つのオブジェクトが配置されているはずです。
- Canvas
UIの親要素として配置されます。すべてのUI素材はこのCanvasの配下に配置されなければ、正しく表示されません。 - EventSystem
UIとスクリプトファイルのインターフェイスとなるオブジェクトです。これがないとスクリプトファイルからUIに命令したり、UIの値を取得することができません。間違って削除した場合には、UI⇒EventSystemでヒエラルキー上に配置しておきましょう。
配置したTextはInspectorから各コンポーネント、プロパティを設定します。サンプルでは以下のようにしていています。
RectTransformコンポーネント
一般のオブジェクトのTransformコンポーネントに当たるコンポーネントです。Transformコンポーネントの違いは、AnchorPreset（基準点）があるかどうかです。UIの場合、基準点、またはストレッチ状態で指定した場所からの座標を決めることができます。
Textコンポーネント
Textに表示する文字、フォントサイズ、フォントスタイル、色、折り返しの有無、配置などを指定することができます。
UIのコントロール
スクリプトファイルを用意して、Canvas にアタッチします。サンプルでは「UIManager」という名前にしています。
事前に変数を2つ用意します
Text型 timeText ： 上で作成したTextのTextコンポーネントにアクセスするための変数
float型（少数型） timer ： 経過時間を代入するための変数
UIManager.cs で変数の宣言、およびStart関数で初期値の取得を行います。
Text timeText;
float timer;
void Start()
{
//子要素から「Text」というオブジェクトを探して、Textコンポーネントを取得
timeText = transform.Find("Text").GetComponent<Text>();
}このスクリプトファイルはCanvasにアタッチされています。Canvasから見てtimeText は、子要素の「Text」オブジェクトのTextコンポーネントになります。
子要素を探すには Transform.Find("オブジェクト名") メソッドを使用します。
さらにコンポーネントを取得するには GetComponent<コンポーネント名>()メソッドを使用します。
Update関数内では次の処理を行います。
void Update()
{
timer += Time.deltaTime;
timeText.text = timer.ToString("F2") + " 秒";
}変数：Timer に時間を加算するには、Time.deltaTime を使用します。
timer += Time.deltaTime;
Time.deltaTime は、Updateなど繰返えさられるイベント関数の1フレームの時間になります。これをどんどん加算することで、正確な経過時間を取得することができます。
Textで表示することができるのは、string型（文字列型）になります。小数点型、整数型などの変数を表示するには文字列型に型変換する必要があります。
この処理を行うのが ToString()メソッド になります。通常、引数には何も渡さなくても文字列型に型変換されますが、任意のフォーマットを指定することで様々な形で表示することができます。
以下に ToString() メソッドで使用される、主なフォーマットをまとめました。
数値のフォーマット
数値型（int, float, doubleなど）に対して、以下のフォーマットを使用できます。
- “F2”: 小数点以下2桁まで表示（Fixed-point）
※今回サンプルで使用しています。Fに続く数字が小数点以下の桁数になります。
float value = 123.4567f;
string result = value.ToString("F2"); // 出力: "123.46"- “N0”: カンマ区切りの整数表示（Number with group separators）
int value = 1234567;
string result = value.ToString("N0"); // 出力: "1,234,567"- “E2”: 指数表記（Exponential notation）
double value = 12345.6789;
string result = value.ToString("E2"); // 出力: "1.23E+004"日付と時刻のフォーマット
DateTime型に対して、以下のフォーマットを使用できます。
- “yyyy/MM/dd”: 年/月/日
DateTime date = DateTime.Now;
string result = date.ToString("yyyy/MM/dd"); // 出力: "2024/09/12"- “yyyy-MM-dd HH:mm”: 月-日-年 時:分
DateTime date = DateTime.Now;
string result = date.ToString("yyyy-MM-dd-yyyy HH:mm"); // 出力: "2024-9-12 14:30"- “tt hh:mm”: AM/PM 時間 (12時間表示)
DateTime time = DateTime.Now;
string result = time.ToString("tt hh:mm"); // 出力: "PM 02:30"カスタムフォーマット
エクセルの表示形式の指定のように複雑な表示形式を自由に指定できます。
- “#,##0”: 三桁区切り
int value = 12345
string result = value.ToString("#,##0"); // 出力: "12,345"- “0000”: 桁数を固定し、足りない部分はゼロで埋める
int number = 42;
string result = number.ToString("0000"); // 出力: "0042"- “#,##0.00”: カンマ区切りの小数点以下2桁まで表示
double value = 12345.678;
string result = value.ToString("#,##0.00"); // 出力: "12,345.68"- “#%”: パーセント表示
double percentage = 0.75;
string result = percentage.ToString("#%"); // 出力: "75%"- “#.###”: 小数点以下を3桁まで表示（末尾のゼロは表示されない）
double value = 123.45678;
string result = value.ToString("#.###"); // 出力: "123.457"その他にも様々な表現方法がありますので、必要に応じ試してみましょう。
ファイブボックスでは、Unityの個別指導のオンラインレッスンを行っています。
ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。
