Interactivity

Blueprint

Add logic with a visual node graph: events, conditions, and actions — no code.

Blueprint is Easelt Builder's visual node-graph editor — the place where your design stops being a static mockup and starts *doing things*. You open it with the Blueprint button, drop nodes from the NODES palette, and wire them together so a click opens a window, a switch reveals a panel, or a button changes an element's text and colour. When you export, the whole graph compiles into gui.lua and runs live in-game.

Opening Blueprint

Click the Blueprint button to switch from the design canvas into the node-graph editor. Instead of dragging visual elements, you now drag *nodes* — small logic blocks — from the NODES palette onto the graph canvas, then connect their pins to describe behaviour. Everything you wire here becomes real game logic, not just a preview effect.

How the graph works

A Blueprint graph is read from left to right along the wires. An event fires (something the player does), an optional condition decides which branch to take, and one or more actions carry out the result. You build behaviour by dropping these three kinds of node and connecting the out pin of one to the in pin of the next.

Event nodes (green)

The starting point of a chain. Bound to a specific element and fire when the player interacts with it.

Condition / "If" nodes

Branch the flow. They ask a yes/no question and send the graph down a then or else path.

Action nodes

The payload. They open windows, show or hide elements, change text and colour, play animations and sounds, or switch designs.

Event nodes

Event nodes are green and each one is bound to an element — click the node's target field to pick which element it listens to. They are where every chain begins.

Event	What it does
`onClick`	Fires when the player clicks the bound element.
`onHover`	Fires when the pointer moves onto the bound element.
`onLeave`	Fires when the pointer moves off the bound element.
`onChange`	Fires when a checkbox or switch changes state (on/off).
`onOpen`	Fires when a window opens.
`onClose`	Fires when a window closes.

Condition nodes

Condition (or "If") nodes branch your logic. Each one has a then output and an else output — wire the actions you want on each path. Click the node's target field to choose the element or window it tests.

Condition	What it checks
`ifWin`	Whether a window is currently open.
`ifSwitch`	Whether a switch or checkbox is currently on.
`ifVis`	Whether an element is currently visible.

Action nodes

Action nodes do the work. Chain them in sequence to run several in a row, and click each node's target field to pick the element or window it acts on.

Action	What it does
`openWin`	Opens a window.
`closeWin`	Closes a window.
`toggleWin`	Toggles a window open or closed.
`showEl`	Shows an element.
`hideEl`	Hides an element.
`toggleEl`	Toggles an element's visibility.
`setText`	Changes an element's text (supports Arabic).
`setColor`	Changes an element's fill colour.
`playAnim`	Plays the element's animation.
`sound`	Plays a sound.
`switchDesign`	Switches to another design or screen.

💡

setText fully supports Arabic, so you can drive right-to-left labels straight from the graph.

Windows and panels

Any element can behave like a window. This is what lets openWin, closeWin, toggleWin, ifWin, onOpen, and onClose target it.

Open the Blueprint panel
Select the element and open the "Blueprint panel" section in the Inspector.
Act as window / panel
Enable "Act as window / panel" to turn the element into an openable window.
Starts open (optional)
Optionally enable "Starts open" so the window is visible when the GUI first loads.

Elements you draw on top of and inside a panel become its members and open and close with it. For a group, its children act as its members automatically — so opening or closing the group brings its whole contents along.

Wiring nodes together

You connect nodes by dragging between their pins. This is how the event, condition and action nodes form a working chain.

Drag from an event's out pin to an action's in pin to trigger it.
Chain actions in sequence to run several one after another.
From a condition, wire the then and else pins to the actions each branch should run.
Click a node's target field to pick its element or window from a dropdown.

Canvas controls

The graph canvas is fully pannable and zoomable so you can lay out large behaviours comfortably.

Control	Action
Scroll wheel	Zoom toward the cursor.
Drag empty space	Pan the canvas.
NODES palette	Adds nodes to the graph.

Export to gui.lua

When you export, the entire Blueprint graph compiles into gui.lua. Clicks, conditions, window open and close, and text and colour changes all run in-game — not only in Test. Your node graph becomes real, shippable MTA:SA logic.

ℹ️

Because everything compiles to gui.lua, the behaviour you wire in Blueprint runs on real players, not just inside the builder's preview.