本文へスキップ
Progression UI Design

Day-night cycle and event timer UI design guide

A practical guide to showing time-of-day shifts, timed events, and upcoming schedule changes without making players miss the moments that matter.

公開日: 2026-07-09#Time Systems#Progression UI#Event Display#Beginner

Quick Start

Start with a tiny working version

Day-night systems and timed events can make a world feel alive, but they only work well when players understand what the clock means for their next decision. Maybe enemies become stronger at night, a shop closes at dusk, or a defense event starts on a schedule.

Build it in small code pieces

1. 値を用意する

Inspectorで変更できる値と表示先を置きます。

DayNightTimerTutorial.cs
csharp
    [SerializeField] private TextMeshProUGUI statusText;
    [SerializeField] private float dayHour = 1f;
    [SerializeField] private float eventHour = 2f;
    [SerializeField] private float timeScale = 3f;

2. 状態を変える

ボタンを押した時に、1つだけ状態を進めます。

DayNightTimerTutorial.cs
csharp
    public void NextStep()
    {
        step = (step + 1) % 3;
        var label = step == 0 ? "朝を表示" : step == 1 ? "夕方へ進む" : "イベント時刻を知らせる";
        if (statusText != null)
        {
            statusText.text = $"{label}\ndayHour={dayHour:0.##}\neventHour={eventHour:0.##}\ntimeScale={timeScale:0.##}";
        }

3. 画面に表示する

変わった結果を画面に出して確認します。

DayNightTimerTutorial.cs
csharp
        if (statusText != null)
        {
            statusText.text = $"{label}\ndayHour={dayHour:0.##}\neventHour={eventHour:0.##}\ntimeScale={timeScale:0.##}";
        }
        Debug.Log($"昼夜変化とイベント時刻: {label}");

Complete script

DayNightTimerTutorial.cs
csharp
using UnityEngine;
using TMPro;

public class DayNightTimerTutorial : MonoBehaviour
{
    [SerializeField] private TextMeshProUGUI statusText;
    [SerializeField] private float dayHour = 1f;
    [SerializeField] private float eventHour = 2f;
    [SerializeField] private float timeScale = 3f;

    private int step;

    public void NextStep()
    {
        step = (step + 1) % 3;
        var label = step == 0 ? "朝を表示" : step == 1 ? "夕方へ進む" : "イベント時刻を知らせる";
        if (statusText != null)
        {
            statusText.text = $"{label}\ndayHour={dayHour:0.##}\neventHour={eventHour:0.##}\ntimeScale={timeScale:0.##}";
        }
        Debug.Log($"昼夜変化とイベント時刻: {label}");
    }
}

Inspector

Connect the UI reference in the Inspector, then use the button to confirm each value changes.

Summary

What to take away

A practical guide to showing time-of-day shifts, timed events, and upcoming schedule changes without making players miss the moments that matter.

The page is designed to help you move from reading to a small practical decision. Use the checklist above before jumping into the next related article.

Related guides

SYSThreat indicator and aggro readability design guideA practical guide to showing who enemies are targeting and where immediate danger is pointing without flooding the screen.MAPCapture point, overtime, and score visibility design guideA practical guide to making ownership, progress, score flow, and overtime rules easy to read in control-based game modes.