Table of Contents

Introduction

The tutorial system is designed to help new players familiarise themselves with key game mechanics such as movement, item interaction, and order management (and later cooking). Through a sequence of structured steps, the tutorial ensures that players are ready to transition smoothly into the main game. The system relies on visual and textual instructions, paired with gameplay actions to advance through the tutorial stages.

UML

The UML below details the relations between the different classes created to successfully implement the tutorial system.

Sequence Diagram

The sequence diagram below shows the order in which the tutorial is working and access data from different classes

Usage Summary

The tutorial system progresses through different stages based on user input. It uses a switch-case structure inside the advanceTutorialStep() method to transition between different steps of the tutorial. Each case represents a unique stage of the tutorial, such as learning movement, picking up items, or managing dockets. The tutorial moves to the next step once the player performs the required input action for the current stage.

For example, the first stage of the tutorial teaches movement by checking if any of the movement keys (W/A/S/D) are pressed. This check is handled inside the update() method:

When a valid input is detected, the system calls advanceTutorialStep(), which transitions to the next case in the switch statement, effectively advancing the tutorial.

This process is repeated for each tutorial step, such as:

• Movement tutorial: Waiting for movement keys to be pressed.
• Item pickup tutorial: Checking for the E key press to simulate picking up an item.
• Order management tutorial: Waiting for the creation of an order (triggered by createOrderPressed) and then checking for the [ ] keys to switch between orders.

Each stage only advances once the corresponding action is completed, ensuring players fully understand the mechanic before moving on to the next one.

Description

The TutorialScreenDisplay class is responsible for managing the tutorial flow and rendering UI components. A TutorialTextDisplay component handles text-based instructions, which guide the player through each stage of the tutorial.

The advanceTutorialStep() method controls the transition between different steps. At each step, the tutorial waits for specific inputs from the player (such as movement, item interaction, or order management), and the corresponding text instructions are displayed on the screen using the createTextBox() method, which updates the TutorialTextDisplay.

Once the required actions are completed, the tutorial moves to the next stage. When all steps are completed, the completeTutorial() method informs the player that the tutorial is over and transitions to the main game.

Coding Choices

The Entity Component System (ECS) architecture is used to keep the tutorial system modular and maintainable. The UI components (like the text display) are added to an entity, making it easy to manage and update.

The tutorial uses a switch-case structure to manage the flow between different stages. This approach ensures that each step is completed sequentially and that players are required to perform the necessary actions before moving forward.

Additionally, the TutorialTextDisplay component, based on the TextDisplay component, handles dynamic text rendering. It updates character-by-character for a more immersive experience, but allows skipping by pressing ENTER.

Design

Introduction

The design of the tutorial system focuses on being intuitive and non-intrusive. The system progressively introduces new concepts, ensuring that players can comfortably learn each mechanic before moving on to the next. The UI elements, including text instructions and visual aids, are carefully designed to be clear and easy to understand.

Tutorial Breakdown

1. Tutorial Box: Displays instructions and feedback for each tutorial step.
2. Movement Tutorial: Instructs the player to use W/A/S/D keys to move, supported by an image of the controls.
3. Item Pickup Tutorial: Instructs the player to press E to pick up items, with a visual aid for clarity.
4. Order Management Tutorial: Teaches players to create orders and switch between them using [ ] keys.
5. Chopping tutorial:Explains player how to chop an item by using ket 'Q'. 6.Rage tutorial:Introducing the rage mode and activate it by 'R'. 7.Rotate Tutorial:Teach player how to switch items in hand by rotating through "K".
6. Merge Tutorial: TEach player how to mergw items to make a meal by 'J'. 9.Completion Step: Ends the tutorial and transitions the player to the main game.

Design Justifications

Inspiration and Theory

The tutorial system design was inspired by simple and effective onboarding practices in games like Overcooked, where players are gradually introduced to the game's core mechanics through interactive instructions. The idea was to focus on a step-by-step learning process that keeps players engaged without overwhelming them. Due to time constraints and other feature dependencies, we were unable to implement certain functionality such as full ordering tutorial with NPC customers and cooking tutorial, as well as visual pickup indicators.

Design Advantages

• Simplified Learning: Each step focuses on one specific mechanic, ensuring that players are not bombarded with too much information at once. This improves retention and enhances the player's ability to apply what they’ve learned.
• Visual Cues: Clear visual aids accompany the instructions to reinforce the actions that players need to perform, helping users with varying levels of experience to understand the mechanics easily.
• Step-by-Step Guidance: The tutorial progresses only when the player successfully completes each step, ensuring that no critical information is missed. This structured approach helps reduce confusion and prevents players from skipping over key mechanics.

The design decisions were made with usability heuristics in mind, particularly focusing on recognition rather than recall. Visual elements and familiar control schemes reduce the cognitive load on players, allowing them to focus on learning the mechanics without being overwhelmed.

Video testing

https://github.com/user-attachments/assets/0ad19cb3-4499-404e-bc27-1876460604e4