Tutorial Popup Window

1. Summary

Modal instructional popup window that appears during gameplay to explain new mechanics, abilities, or systems. Features a decorative title, illustrative in-game screenshot, descriptive text, and navigation buttons to browse multiple pages or close the tutorial.

Overview

The Tutorial Popup Window is a non-diegetic modal instructional interface that appears over active gameplay when the player first encounters a new mechanic, ability, or system. It pauses normal interaction and presents a framed, multi-page explanation with a title, illustrative gameplay image, instructional copy, and explicit navigation buttons.

Visual Structure

The popup is centered over a dimmed gameplay scene and occupies roughly 60% of the screen width and two thirds of the screen height in 16:9 footage. The persistent HUD remains faintly visible behind the dark overlay, but the modal visually and functionally takes focus.

Example: Throwing Stones Tutorial

The Throwing Stones tutorial demonstrates the standard first-page layout: a centered title, a wide illustrative gameplay screenshot, a single-line mechanic explanation, and a bottom-right Next button.

Example: Sword Wind Tutorial

The Sword Wind tutorial uses the same structure for Mugen’s ability, confirming that the popup template is reused across character-specific mechanics.

Example: Shadow Mode Final Page

The Shadow Mode tutorial shows the final-page navigation state. Earlier pages advance with Next; the final page exposes Previous and Close, with the active Close button highlighted.

Navigation Flow

• Popups may contain multiple pages of instructional content.
• Next advances from an earlier page to the next explanation.
• Previous appears on later pages and returns to the prior page.
• Close appears on the final page and dismisses the tutorial.
• Once closed, gameplay resumes from the paused point behind the modal.

Distinction from Loading-Screen Tips

The Tutorial Popup Window is distinct from passive loading-screen tips. Loading-screen tips are non-interactive text shown during transitions, while this popup is an interactive, centered modal displayed over live gameplay and requires explicit player input before play continues.

Job Story

When I encounter a new game mechanic or character ability for the first time, I want to read a clear explanation with a visual example, so that I understand how to use it effectively before resuming gameplay.

Classification

• diegesis: Non-diegetic
• functional_type: Feedback notification

Wireframe

+--------------------------------------------------+
|  [Decorative border / dark panel]                |
|                                                  |
|       Title (e.g. "Throwing Stones")             |
|                                                  |
|  +--------------------------------------------+  |
|  |                                            |  |
|  |     Illustrative screenshot / image        |  |
|  |     (shows mechanic in action)             |  |
|  |                                            |  |
|  +--------------------------------------------+  |
|                                                  |
|  Descriptive text explaining the mechanic.       |
|  May include highlighted input prompts.          |
|                                                  |
|  [ Previous ]    [ Next ]    or    [ Close ]     |
+--------------------------------------------------+

Components

• Title bar — Stylized centered text header at the top of the modal, e.g. "Throwing Stones", "Sword Wind", or "Shadow Mode".
• Illustrative image — In-game screenshot panel showing the explained mechanic or command sequence in action.
• Description text block — Explanatory paragraph below the image; may include highlighted input prompts such as ENTER.
• Navigation buttons — Bottom-row buttons for paging and dismissal:
• "Next" — Advance to the next tutorial page.
• "Previous" — Return to the previous tutorial page on multi-page tutorials.
• "Close" — Dismiss the final page and return to gameplay.
• Background overlay — Dark, semi-transparent full-screen layer over the active playfield, visually separating the modal from gameplay and indicating that gameplay input is blocked.
• Decorative border frame — Ornate black panel and thin decorative linework matching the game's feudal Japanese UI aesthetic.

Parameters & Audio

Navigation

• Trigger: Automatically appears when the player reaches a tutorial trigger zone or first uses/encounters a new mechanic.
• Input while open: Gameplay input is blocked; only popup navigation buttons respond.
• Multi-page navigation: Player can move forward with Next and return to earlier pages with Previous.
• Dismissal: Final page shows Close; pressing it removes the popup and resumes gameplay.
• Keyboard prompt: Some pages include explicit keyboard instructions inside the instructional text, e.g. ENTER for Shadow Mode execution.
• Return path: After closing, player returns directly to active gameplay at the point where the trigger occurred.

Dependencies & Logic

• Tutorial trigger system: Game must detect when player first encounters a new mechanic or enters a tutorial zone
• Game pause state: Time and gameplay must freeze while popup is open
• Mechanic unlock state: Popup typically appears only the first time a mechanic is encountered; must track via save/progression data
• Localization system: All text and button labels must support translated strings
• Ability availability: The explained mechanic must be unlocked or available to the player after dismissal

BDD Scenarios

Edge Cases

• Multiple simultaneous triggers: If two new mechanics are triggered at the exact same moment, the game should queue tutorials or show them sequentially rather than overlapping
• Player rapid-skip: If player mashes the Close/Next button, ensure the popup responds correctly and does not leave a frozen overlay
• Save/reload during tutorial: If player quicksaves while popup is open and reloads, the tutorial state should persist (not shown again) and gameplay should resume normally
• Resolution scaling: Popup must remain centered and readable at all supported screen resolutions and aspect ratios
• Localization overflow: Long translated text in languages like German or Russian must not overflow the description text box or clip the image
• Tutorial in combat: If a tutorial trigger occurs during an active combat/alert state, the popup should either delay until combat ends or not trigger (to avoid breaking tension)

QA Notes

Mechanic Links

• Character Ability System - Tutorial popups explain newly introduced character abilities such as Hayato's Throwing Stones and Mugen's Sword Wind before the player resumes using those abilities in gameplay.
• Shadow Mode Coordination System - The Shadow Mode tutorial popup teaches execution of saved actions, directly onboarding the coordination mechanic represented by Shadow Mode.
• Straw Hat Guards - The tutorial popup explicitly introduces Straw Hats and explains that they do not react to lures like Mugen's sake and are less affected by noise.
• Area-of-Effect Crowd Control Attack - The Tutorial Popup Window introduces Sword Wind with text and visuals explaining the red circle, dash-to-center behavior, kill radius, and long cooldown.

References

1. 1.

   Osaka Castle Mission 1 - Shadow Tactics-Blades of The Shogun (Hardcore) (6:47-6:50) Throwing Stones tutorial popup showing centered modal layout, illustrative screenshot, instructional text, and Next button.

2. 2.

   Osaka Castle Mission 1 - Shadow Tactics-Blades of The Shogun (Hardcore) (11:31-11:34) Sword Wind tutorial popup confirming the same reusable tutorial modal template for a character ability.

3. 3.

   Osaka Castle Mission 1 - Shadow Tactics-Blades of The Shogun (Hardcore) (19:30-19:32) Shadow Mode tutorial final page showing Previous and highlighted Close navigation state.