Skip to main content

Quick Start Guide ⏱

Let's build a simple Main Menu with a Play button that takes us to a Gameplay screen.

Step 1: Define your IDs 🆔​

Before creating GameObjects, we define the "Vocabulary" of our UI.

  1. Open Tools > HookUI > Dashboard.
  2. Go to the Views tab.
    • Create a Category: General.
    • Add ID: MainMenu.
    • Add ID: Gameplay.
  3. Go to the Buttons tab.
    • Add ID: PlayButton under General Category.

Check: Your database now "knows" these screens and buttons exist.

Step 2: Create the Views in Scene​

  1. In your Canvas, create an empty Panel. Rename it View_MainMenu.

  2. Add the HookView component.

    • Category: General.
    • ID: MainMenu.
    • Start Behavior: Instant Show (since it's the first screen).

  3. Inside this panel, create a UI Button.

  4. Add the HookButton component to the button.

    • Category: General.
    • ID: PlayButton.
    • On Click: (Optional) Connect to your own logic, but HookUI will handle navigation automatically.

  5. Duplicate View_MainMenu, rename to View_Gameplay.

    • ID: Gameplay.
    • Start Behavior: Instant Hide (it starts hidden).
    • Delete the Play button from here (or change it to something else).

Result: You have two functional Views in the scene, registered to the system.

Step 3: Connect the Flow​

  1. Open Tools > HookUI > Flow Editor.
  2. Right-Click > Create Screen Node.
    • Select General / MainMenu.
    • Click "+ Add Output" and select PlayButton.
  3. Right-Click > Create Screen Node.
    • Select General / Gameplay.
  4. Connect the dots: Drag the wire from the PlayButton port on the MainMenu node to the Input port of the Gameplay node.
  5. Set Start Node: Right-click the MainMenu node header and check "Start Node" (or ensure the green "Start" text is visible).
  6. Click Save Graph.

Step 4: Play! ▶​

Hit Play in Unity.

  1. Verify the Console: You should see [HookUI] [Core] Flow Initialized.
  2. Click the Play Button.
  3. The MainMenu should hide, and Gameplay should show.

Congratulations! You've just built decoupled UI navigation without writing a single line of code.