本文へスキップ
Learning Flow Design

Tutorial prompts and hint flow basics

A beginner guide to showing the right tutorial hint at the right time, keeping it short, and making it easy to revisit later.

公開日: 2026-06-30#Tutorial#Hint UI#Learning Flow#Beginner

Quick Start

Start with a tiny working version

Good tutorial flow is not about explaining everything early. It is about giving the player exactly one useful next step at the moment they need it.

Build it in small code pieces

1. 値を用意する

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

TutorialHintTutorial.cs
csharp
    [SerializeField] private TextMeshProUGUI statusText;
    [SerializeField] private float hintStep = 1f;
    [SerializeField] private float idleSeconds = 2f;
    [SerializeField] private float repeatCount = 3f;

2. 状態を変える

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

TutorialHintTutorial.cs
csharp
    public void NextStep()
    {
        step = (step + 1) % 3;
        var label = step == 0 ? "最初のヒント" : step == 1 ? "達成で消す" : "迷った時だけ再表示";
        if (statusText != null)
        {
            statusText.text = $"{label}\nhintStep={hintStep:0.##}\nidleSeconds={idleSeconds:0.##}\nrepeatCount={repeatCount:0.##}";
        }

3. 画面に表示する

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

TutorialHintTutorial.cs
csharp
        if (statusText != null)
        {
            statusText.text = $"{label}\nhintStep={hintStep:0.##}\nidleSeconds={idleSeconds:0.##}\nrepeatCount={repeatCount:0.##}";
        }
        Debug.Log($"チュートリアル表示とヒント: {label}");

Complete script

TutorialHintTutorial.cs
csharp
using UnityEngine;
using TMPro;

public class TutorialHintTutorial : MonoBehaviour
{
    [SerializeField] private TextMeshProUGUI statusText;
    [SerializeField] private float hintStep = 1f;
    [SerializeField] private float idleSeconds = 2f;
    [SerializeField] private float repeatCount = 3f;

    private int step;

    public void NextStep()
    {
        step = (step + 1) % 3;
        var label = step == 0 ? "最初のヒント" : step == 1 ? "達成で消す" : "迷った時だけ再表示";
        if (statusText != null)
        {
            statusText.text = $"{label}\nhintStep={hintStep:0.##}\nidleSeconds={idleSeconds:0.##}\nrepeatCount={repeatCount: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 beginner guide to showing the right tutorial hint at the right time, keeping it short, and making it easy to revisit later.

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.