You can now build your game's whole interface in StoryFlow, not just restyle its dialogue box: the User Interface editor gained a Designer canvas, a palette of layout, display and input elements, anchoring that holds a layout together at any resolution and per-state styling with image brushes and 9-slice. Every interface also has its own node canvas, where elements fire events and nearly every property has a Set and Get node, backed by the same global variables, arrays, maps and enums as the rest of the editor. A keyframe timeline animates almost any property, with eight easing curves to shape the motion. Any User Interface file can be placed inside another as a reusable element, spawned at runtime or repeated over an array. The dialogue box itself was taken apart and rebuilt out of these elements, so every part of it can be moved, restyled or replaced. Dialogue tags let a line of dialogue cue the interface, and reroute nodes tidy up crowded wires on both canvases. The example project comes with a whole new set of art, and a long round of correctness work on copy/paste, exports and project-wide node ids rounds it out.
What's New
New Features
The UI Editor: Menus, HUDs, inventories and anything else your game needs on screen
A Designer canvas with rulers, a zoom-aware grid, live cursor readout and a dimmed letterbox outside the screen area
An Elements palette, a Hierarchy tree and an Element Settings panel, each with its own search
Elements: Text, Image, Button, Box, Vertical Box, Horizontal Box, Overlay, Scroll Box, Grid Box, Switcher, Spacer, Text Input, Checkbox, Dropdown, Slider, Progress and Options
Drag an element from the palette onto the canvas or straight into the hierarchy, with a live ghost preview at the cursor and a landing indicator that only appears where the drop is valid
Wrap With, Replace With and Replace With Child restructure a tree in place instead of making you rebuild it
Rename, duplicate, lock, hide and multi-select elements, with copy/paste and a single undo step per action
Canvas ergonomics throughout: right-click menus, arrow-key nudging, Shift-drag axis lock, Escape to select the parent and F to zoom to the selection
Anchors & Layout: Every element is pinned to its parent, so a layout holds together at any resolution
A draggable anchor medallion with a live percentage readout, plus a 4x4 grid of presets for the common corners, edges and centers
Anchor to a point or stretch across an axis, with offsets, alignment and size-to-content per axis
Ctrl or Cmd while dragging moves an element together with its anchors, and Shift-click a preset to set alignment too
Paired X and Y rows for Position, Size, Anchors and Alignment, with per-side values on stretched edges
Clip Content on containers, a Max Width cap on boxes and unified padding and margin everywhere
Element Styling: The editor and the game share one styling engine, so what you see on the canvas is what renders in play
Separate colors for the hover, pressed, disabled and focused states of interactive elements
Image brushes per state, with Stretch, Tile at native size and seamless 9-slice
Per-side padding, margin, border width and border radius, expandable from a single value
Text outline and drop shadow, plus line height, alignment and scrollbar styling
Slider, checkbox and progress bar parts are styled individually: track, fill, thumb, box and checkmark
Dropdown lists get their own surface, rows, arrow and scrollbar, with a preview toggle so you can style the open state
Every row has a reset-to-default button and a tooltip explaining what it does
UI Scripting: A second node canvas behind every User Interface file, switchable with Ctrl+E and rebindable like any other shortcut
Element events: On Click, On Double Click, On Right Click, On Pressed, On Released, On Hover, On Unhover and On Value Changed
Set and Get nodes for nearly every property in Element Settings, from colors and brushes to visibility, text and slider ranges
The full operator set from the script editor: boolean logic, integer and float math, string ops and type conversions
Global variables plus per-file local variables, with arrays, maps and enums all reusing the nodes you already know
For Each, For Each Child, Delay, Open URL, Quit Game, Is Desktop App, Reset Game, Play Audio and Comment nodes
Tick Is Variable on an element to reach it from the graph, with a warning before you untick one that is still in use
Graph-level events: On Construct, On Options Updated, On Text Revealed, On Dialogue Updated, On Variable Changed and On Dialogue Tag Reached
UI Animations: A keyframe timeline docked under the preview
Animate almost any property an element has, including position and size on point-anchored elements, plus static rotation and scale
Eight easing curves split into basics and character, with constant, linear and eased keyframe shapes drawn on the timeline
Auto-key diamonds sit next to every animatable row in Element Settings, so editing a value at the playhead sets a key
Live sampled values read back into the settings rows, with click-to-type and press-drag scrubbing
Scrub, play, loop, zoom, pan, marquee-select, snap and copy/paste keyframes, with per-track locking
Play Animation, Stop Animation and On Animation Finished nodes on the script canvas, with a Get Animation reference node
Restore State on Play and Stop captures a baseline so an animation can put an element back the way it was
Reusable Interfaces: Any User Interface file is an element in its own right
Every one in the project shows up in the palette under User Interfaces, and dropping one in places a copy already pointing at that file
Drag one from the Content Browser onto the canvas, the hierarchy or the script graph
Create Instance spawns one at runtime with width and height in pixels or percent, and Clear Children removes them
For Each loops build a list of instances from an array, so a save slot row or an inventory grid is one element repeated
Reach into a placed instance from the graph: Get Element, Get Var and Set Var on its members, resolved across files
Instances play their own animations, so two copies of the same file never fight over playback
Drag & Drop: A full drag and drop system in the finished game, for inventories, card hands and anything else a player moves around
Is Draggable, Drag Tags, Drag Visual, Ghost Opacity and Ghost Anchor on any element
Allowed and Disallowed Drag Tags on drop targets, with silent fall-through to whatever is underneath
On Drag Detected, On Drag Enter, On Drag Leave, On Dropped and On Drag Cancelled events
A Move behavior that drags the element itself, with Keep on Screen, dedicated drag handles and an On Moved event
Grab and grabbing cursors, long-press support on touch and a universal Is Enabled that makes disabled elements reject drops
Tooltips: Hover text on any element, or a whole User Interface file rendered as the tooltip, with a 12-cell placement grid, offset and auto-flip
The Dialogue Is Elements Now: The dialogue box was taken apart and rebuilt out of ordinary elements
Character name, character image, the text block, the advance hint, the options list and the background are all normal elements you can select
Move them anywhere in the tree, restyle them, wrap them in containers or delete the ones you do not want
Bind any text or image element to dialogue data, and the same value can feed several elements at once
The Options element arranges buttons vertically, horizontally or in a grid, and reveals them immediately or after the text finishes
Add fresh dialogue parts from the palette’s Dialogue category at any time
Variable Binding: Text Input, Checkbox, Dropdown and Slider read and write a variable both ways, with an inline bind button on the value row. Progress displays one. Bind an image element to an image variable to swap it at runtime
Dialogue Tags: Tag a dialogue line and let the interface react to it
Add tags to any dialogue node from the Dialogue Editor, backed by a project-wide registry with a searchable picker
On Dialogue Tag Reached fires in the UI script when a tagged line is entered
Renaming a tag cascades everywhere, tags are indexed in Global Search, and deleting one shows what still uses it first
Reroute Nodes: Double-click a wire on either canvas to drop in a reroute point, then drag it wherever the graph reads best
Reroutes adopt the type of the wire they sit on and carry its color, including two-color map wires
Clean Up Reroutes in the canvas menu removes them all at once
They are collapsed away at export, Play and engine sync, so the runtime never sees them
Refreshed Example Project: Tafadzwa Tarumbwa (Totally2d) offered to redraw the example project, so it ships with an entirely new set of artwork covering every character, background and menu screen
Day and night variants of the key backgrounds, so the Menu and Intro keep their original mood while the daytime versions are there to use
New projects open with the promo key art as their hero background, and hero images now stay sharp at every window size
The project ships with a README crediting the artist
Undo & Redo in the Main Menu: Buttons sit left of Save and follow whichever tab is active
UI Designer Settings: A settings category of its own, with a default preview ratio and a custom preview size stored in the file, so you can design against the resolution you actually ship
Improvements
Faster Canvases: A broad performance pass on both node canvases. Large graphs skip drawing what is offscreen, nodes stop redrawing every time the view shifts, and panning, zooming and dragging nodes stay smooth on big scripts
Smooth Canvas Movement: A new toggle in Settings > General, on by default. It trades a little sharpness while the canvas is moving for a smoother pan and zoom, so turn it off if you would rather nodes stay crisp mid-gesture
Search & References Cover Interfaces: Global Search indexes User Interface files and their value bindings, and the References view counts image, brush, instance and variable usages, with Go to Node and Go to Element navigation
Reference-Safe Renames: Renaming or deleting a variable, asset, font or file now sweeps open undo histories and clipboards too, so an old reference cannot come back through undo or paste
Per-Canvas Keybindings: Node-spawn shortcuts are scoped per canvas, and the UI Editor keybindings are split into Designer and Script groups
Already-Open Files: Choosing a file that is already open focuses its tab instead of reloading it
Cleaner File Opening: A User Interface file shows a spinner until it, its nested interfaces and their fonts have all settled, instead of flashing a half-built layout
Structural Validation: User Interface files are checked on load, and a save guard refuses to overwrite a real file with an empty one
Bug Fixes
Unique Node IDs Across A Project: Duplicating a script used to copy its node ids exactly, and every runtime tracks state by node id. Clicking a once-only option in one copy could hide it in the other, and in some engine plugins that damage is permanent because the ids are written into the save game. Colliding ids are now regenerated on open, duplicate, export, Play and engine sync
Random Branch Copy/Paste: Copying a Random Branch cloned its option ids, so several nodes ended up sharing one set. Ids are regenerated on paste and repaired at every boundary
Play Audio On Linux: Audio dragged in from the Content Browser could stay silent on Linux, where file paths are case-sensitive. Paths now keep the exact casing they were dragged with, the loaders recover from a mismatch and exports normalize what they write
Exports: Fonts, character images, audio values, global variables and UI images referenced only from a script node or an animation keyframe are all bundled now, and UI images are embedded directly so 9-slice brushes survive in an exported HTML file opened from disk
Comments: Dragging a comment moves its contents again, and it no longer drags nodes belonging to another tab
Keyboard Layouts: Undo and redo labels and shortcuts are correct on QWERTZ and AZERTY layouts
Go To Node: Jumping to a node or element is reliable on both canvases, including from the preview
Content Browser: Importing through the context menu at the project root no longer fails with an invalid destination path
Runtime: Standalone exports no longer flash dark before the first scene, disabled controls no longer show a stray focus outline, and projects with no startup UI still render their background
Breaking Changes
Dialogue Input Elements Removed: The input elements that lived inside dialogue nodes are gone. The UI editor’s Text Input, Checkbox, Dropdown, Slider and Progress elements replace them, and they bind to variables directly, which is what those inputs were doing by hand. Opening an older project clears out the leftover elements and their wires in one pass, so no dead connections are left behind