NDI™で送信するRTAイベントタイマーをUnityで作る #02 時計編

2024年10月9日 19:37

キャンバスの設定

TimersCanvas に空のオブジェクトを作成し、名前を Watch Object に変更。画像やプログラムをこのオブジェクトに繋げていく

位置合わせ用に背景をおく

画像配置用に Watch Background Image を作成し、Photoshop で作成した 960 x 270 の画像を配置。こちらに数字と記号、1文字ずつを配置していく。このサイズのパネルを8つ敷き詰めて、1920 x 1080 にする

各数字＆記号の作成、配置

今回はまだ数字＆記号ファイルがないので、いらすとやでダウンロードしたファイルで作成していく。数字＆記号を1文字つずつダウンロードし、Assets > Pictures に入れておく

Watch Background Image の上に時計のパーツを1つずつ配置していく。最後に Watch Object に（-480, 405）を設定し、Watch Backgroud Image の Image チェックボックスを外して、配置を完了する

時計プログラム

Watch Object でコンポーネントを追加、New Script で名前を NowTime にしてソースを作成し、以下のように記述する

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI; // Image を扱うために必要

public class NowTime : MonoBehaviour
{
    [SerializeField] Image year1_image;
    [SerializeField] Image year2_image;
    [SerializeField] Image year3_image;
    [SerializeField] Image year4_image;
    [SerializeField] Image month1_image;
    [SerializeField] Image month2_image;
    [SerializeField] Image date1_image;
    [SerializeField] Image date2_image;

    [SerializeField] Image hour1_image;
    [SerializeField] Image hour2_image;
    [SerializeField] Image minute1_image;
    [SerializeField] Image minute2_image;
    [SerializeField] Image second1_image;
    [SerializeField] Image second2_image;


    [SerializeField] Sprite[] number = new Sprite[10];

    DateTime dt;

    // Start is called before the first frame update
    void Start()
    {
        SetTime();
    }

    // Update is called once per frame
    void Update()
    {
        SetTime();
    }

    void SetTime()
    {
        dt = DateTime.Now;
        int year = dt.Year;
        int year1 = year / 1000;
        int year2 = (year - year1 * 1000) / 100;
        int year3 = (year - (year1 * 1000 + year2 * 100)) / 10;
        int year4 = year - (year1 * 1000 + year2 * 100 + year3 * 10);
        year1_image.sprite = number[year1];
        year2_image.sprite = number[year2];
        year3_image.sprite = number[year3];
        year4_image.sprite = number[year4];

        int month = dt.Month;
        int month1 = month / 10;
        int month2 = month - (month1 * 10);
        month1_image.sprite = number[month1];
        month2_image.sprite = number[month2];

        int date = dt.Day;
        int date1 = date / 10;
        int date2 = date - (date1 * 10);
        date1_image.sprite = number[date1];
        date2_image.sprite = number[date2];

        int hour = dt.Hour;
        int hour1 = hour / 10;
        int hour2 = hour - (hour1 * 10);
        hour1_image.sprite = number[hour1];
        hour2_image.sprite = number[hour2];

        int minute = dt.Minute;
        int minute1 = minute / 10;
        int minute2 = minute - (minute1 * 10);
        minute1_image.sprite = number[minute1];
        minute2_image.sprite = number[minute2];

        int second = dt.Second;
        int second1 = second / 10;
        int second2 = second - (second1 * 10);
        second1_image.sprite = number[second1];
        second2_image.sprite = number[second2];
    }
}

インスペクターに戻り、Watch Object の Now Time に各画像を入れていく。これで画面に表示できるようになる

最後に NDI で送信され、透過され正しく表示されていることを確認する

おつかれさまでした

時計はパッと見てあると便利ですよね。次はストップウォッチの作成に入りましょう