top of page
検索
9月12日読了時間: 4分

1分間 Unity講座　UIのText（Legacy）に経過時間を小数点下2桁で表示させる方法

このブログはUnityの初心者向けに、Untiyの機能の使い方、基本のスクリプトファイルの使い方から応用までをご説明しています。中級以上の方に読んでいただきたい内容も随時更新していますので、お時間がある方、検索でここにアクセスされた方はぜひ立ち寄っていってください。


今回から数回にわたり、UIの使い方についてご説明していきます。初回の今回は「Text（Legacy）」について。このテキストは Text Mesh Pro ができてから遺産扱いにされていますが、ちょっとした文字や数字を表示するにはとても便利な素材です。


下の動画は「ファイブボックス　一分間Unity講座　UIのTextに経過時間を表示させる方法」 のショート動画です。ご興味がございましたら、こちらの動画もご参照ください！




1，UI素材の配置


ヒエラルキー上で右クリック、または左上の「＋ボタン」から　UI ⇒ Legacy ⇒ Text を選択します（OSやUnityのEditorバージョンによっては選択しの順番や名前が違いますがTextが選ばれればOKです）

　

UI、Textの取得

ヒエラルキー上には選択したTextのほかに、新たに2つのオブジェクトが配置されているはずです。

  1. Canvas　UIの親要素として配置されます。すべてのUI素材はこのCanvasの配下に配置されなければ、正しく表示されません。

  2. EventSystem　UIとスクリプトファイルのインターフェイスとなるオブジェクトです。これがないとスクリプトファイルからUIに命令したり、UIの値を取得することができません。間違って削除した場合には、UI⇒EventSystemでヒエラルキー上に配置しておきましょう。

TEXTを配置したときの状態

配置したTextはInspectorから各コンポーネント、プロパティを設定します。サンプルでは以下のようにしていています。


TextをInspectorから指定

RectTransformコンポーネント

一般のオブジェクトのTransformコンポーネントに当たるコンポーネントです。Transformコンポーネントの違いは、AnchorPreset（基準点）があるかどうかです。UIの場合、基準点、またはストレッチ状態で指定した場所からの座標を決めることができます。


Textコンポーネント

Textに表示する文字、フォントサイズ、フォントスタイル、色、折り返しの有無、配置などを指定することができます。


2，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()メソッド になります。通常、引数には何も渡さなくても文字列型に型変換されますが、任意のフォーマットを指定することで様々な形で表示することができます。


1. 数値のフォーマット

数値型（int, float, doubleなど）に対して、以下のフォーマットを使用できます。


  • "F2": 小数点以下2桁まで表示（Fixed-point）

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"

2. 日付と時刻のフォーマット

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"

  • "hh:mm tt": 時間 (12時間表示) AM/PM

DateTime time = DateTime.Now; 
string result = time.ToString("hh:mm tt"); // 出力: "02:30 PM"

3. カスタムフォーマット

エクセルの表示形式の指定のように複雑な表示形式を自由に指定できます。


  • "#,##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の個別指導のオンラインレッスンを行っています。

ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。

Comentarios

bottom of page