Skip to main content

The Flow Graph

Managing UI logic in code (e.g., if(buttonClicked) OpenMenu()) quickly becomes a nightmare of references ("Spaghetti Code"). HookUI replaces this with Spaghetti Nodes—which are much easier to understand!

The Flow Graph is a visual representation of:

  • Where the user is (Current Screen).
  • What options they have (Buttons).
  • Where they go next (Connections).

Anatomy of a Node​

1. Screen Node​

Represents a HookView.

  • Header: Shows the Category / ID of the View.
  • Input Port: Where flow enters (usually from another screen).
  • Output Ports: Represent HookButtons found on that View. Ideally, you name your buttons explicitly for clarity.

2. Logic Nodes​

  • Start Node: The green entry point. When HookUIManager.Initialize() is called, the flow jumps here.
  • Quit Node: Connecting a button here will close the Application (or stop Play Mode).

3. Portal Node​

Sometimes you need to jump to a screen (e.g., Main Menu) from code, without a button or a direct wire — think a "return to menu" call from deep in a settings flow, or a timer/network callback firing a transition.

  • A Portal is a named jump target you call by ID from C#: HookUIManager.Trigger("ToMainMenu").
  • Portals are not triggered implicitly by a matching button ID — a button only navigates via a direct wire from its own screen node, or by explicitly calling Trigger(...).
  • See the dedicated Portals page for full details, including the exact invocation code.

How it Execution Works​

  1. State: The HookUIManager holds a pointer to the CurrentNode.
  2. Input: When you click a button, the Manager checks the CurrentNode's connections.
  3. Transition:
    • If a match is found (Button ID == Port Name), it follows the wire.
    • It identifies the TargetNode.
    • It calls Hide() on the old View and Show() on the new View.

Best Practices​

  • Group by Feature: Keep your Main Menu flow separate visually from your Gameplay HUD flow. Use Portals to bridge them.
  • Name Buttons Clearly: Btn_Play is better than Button (1). The Graph uses the ID to label the ports.