本文へスキップ
Game UI Design

Status Effect UI and Duration Feedback Design Guide

A practical guide to designing readable status effect UI for poison, buffs, debuffs, and timed effects. Learn how to order icons, show remaining duration, surface danger, and reveal counterplay clearly.

公開日: 2026-07-03#Status Effects#UI Design#Feedback#Beginner

Quick Start

Start with a tiny working version

Players rarely get frustrated because a poison, slow, or buff exists. They get frustrated because they cannot tell what is active, how urgent it is, or what they should do next.

Build it in small code pieces

1. 値を用意する

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

StatusEffectTutorial.cs
csharp
    [SerializeField] private TextMeshProUGUI statusText;
    [SerializeField] private float remainingSeconds = 1f;
    [SerializeField] private float stackCount = 2f;
    [SerializeField] private float tickDamage = 3f;

2. 状態を変える

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

StatusEffectTutorial.cs
csharp
    public void NextStep()
    {
        step = (step + 1) % 3;
        var label = step == 0 ? "効果を付ける" : step == 1 ? "残り時間を減らす" : "切れたら消す";
        if (statusText != null)
        {
            statusText.text = $"{label}\nremainingSeconds={remainingSeconds:0.##}\nstackCount={stackCount:0.##}\ntickDamage={tickDamage:0.##}";
        }

3. 画面に表示する

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

StatusEffectTutorial.cs
csharp
        if (statusText != null)
        {
            statusText.text = $"{label}\nremainingSeconds={remainingSeconds:0.##}\nstackCount={stackCount:0.##}\ntickDamage={tickDamage:0.##}";
        }
        Debug.Log($"ステータス効果と残り時間: {label}");

Complete script

StatusEffectTutorial.cs
csharp
using UnityEngine;
using TMPro;

public class StatusEffectTutorial : MonoBehaviour
{
    [SerializeField] private TextMeshProUGUI statusText;
    [SerializeField] private float remainingSeconds = 1f;
    [SerializeField] private float stackCount = 2f;
    [SerializeField] private float tickDamage = 3f;

    private int step;

    public void NextStep()
    {
        step = (step + 1) % 3;
        var label = step == 0 ? "効果を付ける" : step == 1 ? "残り時間を減らす" : "切れたら消す";
        if (statusText != null)
        {
            statusText.text = $"{label}\nremainingSeconds={remainingSeconds:0.##}\nstackCount={stackCount:0.##}\ntickDamage={tickDamage: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 designing readable status effect UI for poison, buffs, debuffs, and timed effects. Learn how to order icons, show remaining duration, surface danger, and reveal counterplay clearly.

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.