Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 22

UI Flow as a State Diagram

Recommended resources

Hello! Welcome back to the course.

In the previous module, you did an excellent job building a sophisticated AI for an NPC, culminating in a Flee state that used advanced pathfinding. You've seen firsthand how a Finite State Machine can manage complex, dynamic behavior.

Now, we're moving into a new module: Applying FSMs to UI Flow. You'll discover that the same principles that govern an NPC's actions can also bring order and clarity to user interfaces.

This lesson focuses on the very first step of that process, which aligns with your preference for a theory-first approach. Before we write a single line of Luau code, we will focus on design. Today's learning outcome is to: Map out a UI flow as a state diagram (e.g., MainMenu, Settings, Gameplay, PauseMenu).

By the end of this lesson, you'll be able to look at any game's UI, break it down into its core components, and sketch a clear, logical diagram that will serve as the blueprint for your implementation.

1. From NPC Behavior to UI Flow

Think back to your NPC. It could be Idle, Patrolling, Chasing, or Fleeing, but it could only ever be in one of those states at a time. A UI system works the exact same way. A player might be viewing the MainMenu, the Settings screen, or the PauseMenu, but they can't be in all of them at once.

Each screen or distinct UI context is a state. The actions that move the player between these screens—like clicking a button—are events that trigger transitions. The visual map we use to plan this is called a state diagram.

To refresh your memory on how states and transitions are visualized, let's watch a short segment from a video you've seen before. While the example is about a player character, the principle of drawing states and the arrows that connect them is universal.

State Machine in Godot Will Save You Hours of Code Debugging

This video by IcyEngine provides a great visual demonstration of breaking a system down into states and transitions. Notice how each state is a distinct mode of being, and each arrow represents a specific condition for changing states.

Watch from 02:19 to 04:03. The video discusses states like FLOOR, JUMP, and FALL. As you watch, think about how you could replace these with UI states like MainMenu, Settings, and Gameplay.

2. The Language of State Diagrams

State diagrams have a simple, standardized set of symbols, much like a flowchart. Knowing them will help you create clear and readable plans for your UI.

For our purposes, we only need to focus on a few core components. The following article provides a good reference for the standard notations used in what are formally known as UML (Unified Modeling Language) State Machine Diagrams.

State Machine Diagrams | Unified Modeling Language (UML)

This GeeksforGeeks article, "State Machine Diagrams," introduces the formal components of a state diagram. We'll use this to learn the basic 'grammar' for drawing our UI flows.

Read the section titled Basic Components and Notations of a State Machine Diagram. Focus on understanding these four key components: Initial state: The black filled circle. This is where your system starts. State: The rounded rectangle. This is a specific screen in our UI. Transition: The solid arrow. This represents the switch from one state to another. Final State: The filled circle within a circle. This represents the end of the flow (e.g., quitting the game).

3. A Practical Example: UI Flow for a Quiz Game

Now let's see these concepts applied to a real game's UI. It's helpful to see a complete, worked-out example of a UI flow mapped as a state machine. The states are the different screens the player can see, and the transitions are the buttons they click.

The following resource breaks down the UI for a quiz game into a set of states and then shows the corresponding state diagram. This is exactly what we are aiming to do.

QuizU: State pattern for game flow (Post 3)

This Unity blog post, "QuizU: State pattern for game flow," is a perfect case study. It shows how a seemingly complex UI can be broken down into simple, manageable states.

Read the section Game states. First, review the list of states (like SplashScreenState, MainMenuState, PauseState, etc.) to see how a game's flow is broken down. Then, carefully study the diagram at the end of the section, titled Visualizing the game states as a graph. Try to trace the path a player would take from starting the game to winning or losing.

Let's look at another excellent example. This diagram clearly shows the states and the specific user actions that trigger the transitions.

Game UI Flow State Diagram
A state diagram for a game's UI. Notice how states are distinct screens (e.g., 'Main Menu', 'Options') and transitions are labeled with the user action that triggers them (e.g., 'Clicks Play Game').

Let's analyze this diagram together:

  • Initial State: The flow starts at the Splash Screen.
  • States: We can see distinct states like Main Menu, Options, Game play, and Pause Menu.
  • Transitions & Events: To get from Main Menu to Options, the event is Clicks Options. To get from Pause Menu back to Game play, the event is Clicks Resume.
  • Branching Logic: From the Pause Menu, the player can go to Options or Resume, demonstrating how one state can have multiple possible outbound transitions.

4. Your Turn: Design a UI State Diagram

Now it's time for you to apply what you've learned. Let's design a state diagram for a common UI flow in a Roblox round-based game.

Scenario:
Imagine a game with a main menu, a settings screen, a lobby where players wait, the core gameplay, a pause menu, and a screen that shows the results after a round.

Your Task:
Using a pen and paper or any simple drawing tool, create a state diagram that includes the following states. Use the notations you learned earlier (rounded rectangles for states, arrows for transitions, etc.).

  1. Initial State: Where does the player start?
  2. States:
    • MainMenu: Has "Play" and "Settings" buttons.
    • Settings: Accessible from MainMenu and PauseMenu. Has a "Back" button.
    • Lobby: The screen after a player clicks "Play". Players wait for the round to start. A timer will eventually transition them to the next state.
    • Gameplay: The main game screen where the round is active.
    • PauseMenu: Accessible from Gameplay. Has "Resume" and "Quit to Main Menu" buttons.
    • RoundOver: Shown when the round ends. Displays results and has a "Return to Lobby" button.
  3. Transitions: Draw arrows between the states and label them with the event that causes the transition (e.g., "Clicks Play", "Timer ends", "Player presses Esc").

Take about 15-20 minutes to sketch this out. There's no single "correct" answer, but focus on creating a logical flow. Once you're done, compare your drawing to the solution described below.

Click here to see a possible solution

Here is a description of a valid state diagram for the scenario:

  • The Initial State (a filled circle) points to the MainMenu state.
  • MainMenu state:
    • An arrow labeled "Clicks Play" goes from MainMenu to Lobby.
    • An arrow labeled "Clicks Settings" goes from MainMenu to Settings.
  • Settings state:
    • An arrow labeled "Clicks Back" goes from Settings back to MainMenu.
    • (You might also have a transition from PauseMenu to Settings. If so, the "Back" button there should return to PauseMenu. This hints at a complexity we'll address later!)
  • Lobby state:
    • An arrow labeled "Round timer ends" goes from Lobby to Gameplay.
  • Gameplay state:
    • An arrow labeled "Player presses Esc" goes from Gameplay to PauseMenu.
    • An arrow labeled "Game logic determines round over" goes from Gameplay to RoundOver.
  • PauseMenu state:
    • An arrow labeled "Clicks Resume" goes from PauseMenu back to Gameplay.
    • An arrow labeled "Clicks Quit" goes from PauseMenu back to MainMenu.
  • RoundOver state:
    • An arrow labeled "Clicks Return to Lobby" goes from RoundOver back to Lobby.

Conclusion

Great work today! You've taken the core concepts of Finite State Machines and applied them to a new domain: UI design. This planning stage is crucial for building UIs that are robust, easy to debug, and simple to expand upon.

Key Takeaways:

  • A game's UI flow can be modeled as a Finite State Machine, where each screen or menu is a state.
  • A state diagram is a visual blueprint that maps out these states and the transitions (usually user actions) that connect them.
  • By designing this diagram before coding, you can identify potential logic problems and ensure a smooth user experience.

In our next lesson, we will bring this theory into practice. You'll learn how to implement a UI FSM that shows and hides different ScreenGuis in Roblox, turning the diagram you just designed into a functional system.