本文へスキップ
Game UI Design

Damage Number Readability UI Design Guide

A practical guide to showing normal hits, crits, damage-over-time ticks, and healing values without turning combat into visual noise.

公開日: 2026-07-05#Damage Numbers#UI Design#Combat Feedback#Beginner

Quick Start

Start with a tiny working version

Damage numbers do not become satisfying just because they are flashy. If they are too loud, they hide the fight.

Build it in small code pieces

1. 値を用意する

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

DamageNumberTutorial.cs
csharp
    [SerializeField] private TextMeshProUGUI statusText;
    [SerializeField] private float damageValue = 1f;
    [SerializeField] private float floatHeight = 2f;
    [SerializeField] private float fadeSeconds = 3f;

2. 状態を変える

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

DamageNumberTutorial.cs
csharp
    public void NextStep()
    {
        step = (step + 1) % 3;
        var label = step == 0 ? "小さい数値" : step == 1 ? "大きい数値" : "重なりを避ける";
        if (statusText != null)
        {
            statusText.text = $"{label}\ndamageValue={damageValue:0.##}\nfloatHeight={floatHeight:0.##}\nfadeSeconds={fadeSeconds:0.##}";
        }

3. 画面に表示する

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

DamageNumberTutorial.cs
csharp
        if (statusText != null)
        {
            statusText.text = $"{label}\ndamageValue={damageValue:0.##}\nfloatHeight={floatHeight:0.##}\nfadeSeconds={fadeSeconds:0.##}";
        }
        Debug.Log($"ダメージ数値の読みやすさ: {label}");

Complete script

DamageNumberTutorial.cs
csharp
using UnityEngine;
using TMPro;

public class DamageNumberTutorial : MonoBehaviour
{
    [SerializeField] private TextMeshProUGUI statusText;
    [SerializeField] private float damageValue = 1f;
    [SerializeField] private float floatHeight = 2f;
    [SerializeField] private float fadeSeconds = 3f;

    private int step;

    public void NextStep()
    {
        step = (step + 1) % 3;
        var label = step == 0 ? "小さい数値" : step == 1 ? "大きい数値" : "重なりを避ける";
        if (statusText != null)
        {
            statusText.text = $"{label}\ndamageValue={damageValue:0.##}\nfloatHeight={floatHeight:0.##}\nfadeSeconds={fadeSeconds: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 normal hits, crits, damage-over-time ticks, and healing values without turning combat into visual noise.

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.