本文へスキップ
Combat UI Design

Damage number and critical hit feedback design guide

A practical guide to making normal hits, criticals, guards, and damage-over-time numbers readable during combat without turning the screen into noise.

公開日: 2026-07-06#Damage Feedback#Combat UI#Critical Hit#Beginner

Quick Start

Start with a tiny working version

Damage numbers are not just decoration. They tell players whether their action connected, whether it mattered, and whether something unusual happened.

Build it in small code pieces

1. 値を用意する

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

CriticalDamageTutorial.cs
csharp
    [SerializeField] private TextMeshProUGUI statusText;
    [SerializeField] private float damageValue = 1f;
    [SerializeField] private float criticalRate = 2f;
    [SerializeField] private float popupScale = 3f;

2. 状態を変える

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

CriticalDamageTutorial.cs
csharp
    public void NextStep()
    {
        step = (step + 1) % 3;
        var label = step == 0 ? "通常ダメージ" : step == 1 ? "クリティカル" : "強調表示";
        if (statusText != null)
        {
            statusText.text = $"{label}\ndamageValue={damageValue:0.##}\ncriticalRate={criticalRate:0.##}\npopupScale={popupScale:0.##}";
        }

3. 画面に表示する

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

CriticalDamageTutorial.cs
csharp
        if (statusText != null)
        {
            statusText.text = $"{label}\ndamageValue={damageValue:0.##}\ncriticalRate={criticalRate:0.##}\npopupScale={popupScale:0.##}";
        }
        Debug.Log($"クリティカル数値演出: {label}");

Complete script

CriticalDamageTutorial.cs
csharp
using UnityEngine;
using TMPro;

public class CriticalDamageTutorial : MonoBehaviour
{
    [SerializeField] private TextMeshProUGUI statusText;
    [SerializeField] private float damageValue = 1f;
    [SerializeField] private float criticalRate = 2f;
    [SerializeField] private float popupScale = 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.##}\ncriticalRate={criticalRate:0.##}\npopupScale={popupScale: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 making normal hits, criticals, guards, and damage-over-time numbers readable during combat without turning the screen into 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.MAPAbility Range and Cast Confirmation UI Design GuideUse range rings, preview lines, and confirmation cues to reduce failed casts and combat confusion.