本文へスキップ
Game UI Design

Reconnect and session recovery UI design guide

A practical guide to disconnect states, reconnect feedback, successful re-entry, and failure paths that keep online games from feeling hostile during network trouble.

公開日: 2026-07-10#Online#Reconnect#Session Recovery#Beginner

Quick Start

Start with a tiny working version

When an online game disconnects, players usually do not need a deep technical explanation first. They need to know whether they are still in the match, whether the game is trying to bring them back, whether they should wait, and what they risk losing.

Build it in small code pieces

1. 値を用意する

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

ReconnectSessionTutorial.cs
csharp
    [SerializeField] private TextMeshProUGUI statusText;
    [SerializeField] private float sessionId = 1f;
    [SerializeField] private float lastReceivedTick = 2f;
    [SerializeField] private float serverTick = 3f;

2. 状態を変える

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

ReconnectSessionTutorial.cs
csharp
    public void NextStep()
    {
        step = (step + 1) % 3;
        var label = step == 0 ? "切断を検知" : step == 1 ? "セッションを照合" : "元の状態へ戻す";
        if (statusText != null)
        {
            statusText.text = $"{label}\nsessionId={sessionId:0.##}\nlastReceivedTick={lastReceivedTick:0.##}\nserverTick={serverTick:0.##}";
        }

3. 画面に表示する

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

ReconnectSessionTutorial.cs
csharp
        if (statusText != null)
        {
            statusText.text = $"{label}\nsessionId={sessionId:0.##}\nlastReceivedTick={lastReceivedTick:0.##}\nserverTick={serverTick:0.##}";
        }
        Debug.Log($"オンライン再接続とセッション復帰: {label}");

Complete script

ReconnectSessionTutorial.cs
csharp
using UnityEngine;
using TMPro;

public class ReconnectSessionTutorial : MonoBehaviour
{
    [SerializeField] private TextMeshProUGUI statusText;
    [SerializeField] private float sessionId = 1f;
    [SerializeField] private float lastReceivedTick = 2f;
    [SerializeField] private float serverTick = 3f;

    private int step;

    public void NextStep()
    {
        step = (step + 1) % 3;
        var label = step == 0 ? "切断を検知" : step == 1 ? "セッションを照合" : "元の状態へ戻す";
        if (statusText != null)
        {
            statusText.text = $"{label}\nsessionId={sessionId:0.##}\nlastReceivedTick={lastReceivedTick:0.##}\nserverTick={serverTick: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 disconnect states, reconnect feedback, successful re-entry, and failure paths that keep online games from feeling hostile during network trouble.

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.