Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
16
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@routehachi

[Unity] 現在時刻をUI機能のTextで表示させる

備忘録です。

目的

時計アプリを作る際に必要不可欠な、リアルタイム更新されるテキスト系の時計を用意する。

テキストを用意する

Hierarchyビュー上で右クリック -> UI -> Text で
Canvas内にTextが生成される。
ゲームビューを確認しつつテキストの位置やサイズ等を設定する。(詳細は割愛する)

コードを書く

Projectビュー上のAssetsで右クリック -> Create -> C# Script で
C#スクリプトを生成してコードを書く。

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

public class TimeNowScript : MonoBehaviour {

    private Text ClockText;

    // Use this for initialization
    void Start () {
        ClockText = GetComponentInChildren<Text>();
    }

    // Update is called once per frame
    void Update () {
        ClockText.text = DateTime.Now.ToLongTimeString();
    }
}

コードの補足

参照の追加

using System;
using UnityEngine.UI;

参照にこの2つを追加した
DateTime関連の参照にSystem、UnityのUI関連にUnityEngine.UIが使われる

タイマーを表示するテキスト

    private Text ClockText;

classの代わりにTextと記述する

Textコンポーネントを取得

    void Start () {
        ClockText = GetComponentInChildren<Text>();
    }

親子関係にある子オブジェクトからTextコンポーネントを取得する
記述し忘れるとNullReferenceException: Object reference not set to an instance of an objectになる

現在時刻を取得

    void Update () {
        ClockText.text = DateTime.Now.ToLongTimeString();
    }

デバイスから現在取得し、テキストにリアルタイム反映させる
ToShortTimeString()の部分は以下に直すことで別の形式で反映させることができる

// 時、分を取得する(hh:mm (AM/PM))
        ClockText.text = DateTime.Now.ToShortTimeString();
// 時、分、秒を取得する(hh:mm:ss (AM/PM))
        ClockText.text = DateTime.Now.ToLongTimeString();
// 日付を取得する(MM/dd/yyyy)
        ClockText.text = DateTime.Now.ToShortTimeString();
// 日付を取得する(曜日,日付,yyyy)
        ClockText.text = DateTime.Now.ToLongTimeString();

アタッチする

書いたスクリプトを、生成したテキストにアタッチして、Playして動作を確認する。

録画_2018_04_16_01_07_09_482.gif

おまけ

上の画像のようにテキストに影をつける場合、
テキストのInspectorビューの下部のAdd Component -> 検索欄にShadowと入力 -> Shadow で
くっきりとした影をつけることができる(位置調整、色、透明度の設定も可能)。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
16
Help us understand the problem. What are the problem?