State Diagrams: Doors and Beyond

1. The Visual Language of FSMs

State diagrams are the blueprints for FSMs. They have a simple, standardized set of symbols that allow us to visualize a system's logic clearly. Let's watch a video that introduces these symbols and reinforces our understanding of states and events.

To summarize and review the key symbols from the video:

• State: A rounded rectangle containing the name of the state (e.g., Open, Idle). This represents a specific condition or behavior.
• Initial State: A solid black circle with an arrow pointing to the starting state. Every FSM has exactly one initial state.
• Transition: An arrow pointing from one state to another. It represents a change of state.
• Event: Text written along a transition arrow that describes the trigger for that change.
• Final State (Optional): A circle with a dot inside. This marks the end of the FSM's life. Many systems in games (like NPC AI) are designed to run continuously and may not have a final state.

You might also see states represented by circles instead of rounded rectangles. Both are common notations, but we will stick with rounded rectangles for consistency as they are standard in UML (Unified Modeling Language), a widely used modeling language in software engineering.

2. How to Draw a State Diagram: A Walkthrough

Let's apply these concepts by drawing a diagram for a familiar object: a door. We'll follow a simple, structured process.

This process is well-described in the article "How to Create a State Machine Diagram". While you don't need to read it right now, we will be using its step-by-step thinking.

Step 1: Identify the States
First, think about the distinct conditions the door can be in. A simple door can be:

• Closed
• Open
• Locked

These will be our three states.

Step 2: Identify the Events
Next, what actions can a person take that change the door's state?

• open
• close
• lock
• unlock

These actions are our events.

Step 3: Draw the Diagram and Define the Logic

1. Initial State: Let's assume a new door starts off Closed. We draw the initial state symbol (●) with an arrow pointing to a rounded rectangle labeled Closed.

2. Connect the States: Now we draw the transitions based on our events.

   • If the door is Closed, the open event should make it Open. Draw an arrow from Closed to Open and label it open.
   • If the door is Open, the close event should make it Closed. Draw an arrow from Open to Closed and label it close.
   • If the door is Closed, the lock event should make it Locked. Draw an arrow from Closed to Locked and label it lock.
   • If the door is Locked, the unlock event should make it Closed. Draw an arrow from Locked to Closed and label it unlock.

Step 4: Review and Refine
Look at the diagram. Does it cover all intended behavior? Equally important, what does it prevent?

• Can you lock an open door? According to our diagram, no. There is no transition from the Open state triggered by a lock event. If that event occurs while the FSM is in the Open state, it is simply ignored.
• Can you open a locked door? Again, no. There is no transition from the Locked state triggered by an open event.

This is the power of an FSM: the logic is explicit and unambiguous. Here is a professionally drawn version of a very similar door FSM.

This diagram includes an extra piece of syntax on the close transition: [doorWay->isEmpty]. This is called a guard condition. It's an additional check that must be true for the transition to happen. In this case, you can only close the door if the doorway is empty. We'll explore guards in more detail later in the course.

3. Your Turn: Diagram a Traffic Light

Now, it's your turn to practice. Let's model another simple system.

Scenario: A basic traffic light on a road. It cycles continuously from Green to Yellow, then to Red, and finally back to Green.

Grab a piece of paper or open a simple drawing tool. Try to create a state diagram for this traffic light by following the steps we just used:

1. What are the distinct states?
2. What event causes the light to change from one state to the next? (Hint: it's not a button press).
3. Draw the diagram, including the states, transitions, events, and an initial state.

Take about 5-10 minutes to sketch this out.

...

Finished? Let's compare your sketch to a well-defined example.

Your diagram should have three states (Red, Green, Yellow) connected in a loop. The key insight is that the event is the expiration of a timer. This is extremely common in game development, where you might have an NPC patrol for 30 seconds before transitioning back to an idle state.

4. Back to Games: An NPC AI Diagram

Drawing diagrams for doors and traffic lights is great practice, but your goal is to apply this to games. Let's look at a state diagram that directly relates to your interest in NPC AI.

Let's trace the behavior:

1. The AI starts in the IDLE state.
2. When the event FIND TARGET occurs (e.g., the player enters its line of sight), it transitions to the CHASE state.
3. From CHASE, two things can happen:
   • If the event LOST TARGET occurs (player gets too far away), it transitions back to IDLE.
   • If the event TARGET IN ATTACK RADIUS occurs, it transitions to the ATTACK state.
4. From ATTACK, if the TARGET TOO FAR AWAY event happens, it goes back to CHASE.

Even with just three states, this diagram provides a clear and robust plan for an enemy's logic. This is the blueprint you would use before implementing the FSM in Luau.

Conclusion

In this lesson, you took the theoretical concepts of states, transitions, and events and used them to create a visual plan—a state diagram. This is a fundamental skill that bridges the gap between design and implementation.

Key Takeaways:

• A state diagram is a visual representation of a Finite State Machine.
• The core components are states (rounded rectangles), transitions (arrows), and events (labels on arrows).
• Drawing a diagram is a structured process: identify states, identify events, and then draw the connections that represent the system's logic.
• State diagrams are your blueprint for coding complex behaviors in a clean and manageable way.

In our next lesson, we'll flip the script. Instead of drawing diagrams, you will be given existing diagrams and learn to identify the current state, possible transitions, and triggering events. This will further solidify your understanding before we dive into our first Luau implementation.