チュートリアル：本物の画面の上を案内するツアー

プレイヤーに見えるもの

• どの画面でも強調された要素と、暗くなった残り。レイアウトが変わっても強調は要素についていきます。
• プレイヤーが閉じるステップには「次へ」、流れが許せば「スキップ」が付いたヒントの吹き出し。
• 本物の操作を待つステップ：プレイヤーがゲームでその操作をするまでヒントが残ります。
• 流れの最後の報酬と、許可された流れをもう一度見られる「チュートリアル」の一覧。

仕組み

• ステップはアンカーで要素を指します。どのモジュールのどの要素にも付けられる data-tutorial-anchor。
• タイトルが指定すれば、流れは自動で始まります。たとえば初回の訪問時に。
• 表示したステップはすべて記録され、ダッシュボードの分析でオンボーディングのファネルになります。

開発者向け

チュートリアルは @idosgames/core の client.tutorial で動き、オーバーレイはアンカーで要素を見つけます。

// どのモジュールのどの要素もチュートリアルのアンカーにできます
<button data-tutorial-anchor="play:start">Play</button>
// ロビーのタブは tab:{featureID}、プロフィールボタンは lobby:profile、
// ゲームの「プレイ」ボタンは play:{modeID}

• 流れが指す要素に印を付けます。要素のないアンカーは、それが現れるまで待ちます。
• ステップは reportStepShown で記録し、completeStep で完了します。オーバーレイが代わりに行います。

すべてのフィールドは、SDK の MCP サーバーが配るスキル tutorial-system に説明があります。