User Interface

HELIX uses the WebUI system to render user interfaces. Your HUD, menus, scoreboards, and any other UI elements are built with standard HTML, CSS, and JavaScript, then displayed as an overlay inside the game. If you can build a webpage, you can build a HELIX UI.

Creating a WebUI

A WebUI instance loads an HTML file (or URL) and displays it on the player's screen. The constructor takes a unique name for logging, a path to the HTML file or URL, and an optional input mode.

Blueprint

// Create a HUD from a local HTML file
UWebUI* MyHUD = WebUI::Create("MyHUD", "MyPackage/UI/hud.html");

// Or load from a remote URL
UWebUI* RemoteUI = WebUI::Create("Scoreboard", "https://my-cdn.com/scoreboard.html");

Lua

-- Create a HUD from a local HTML file
local my_hud = WebUI("MyHUD", "MyPackage/UI/hud.html")

-- Or load from a remote URL
local remote_ui = WebUI("Scoreboard", "https://my-cdn.com/scoreboard.html")

JavaScript

// Create a HUD from a local HTML file
const myHUD = new WebUI("MyHUD", "MyPackage/UI/hud.html");

// Or load from a remote URL
const remoteUI = new WebUI("Scoreboard", "https://my-cdn.com/scoreboard.html");

The first parameter is a unique name used for logging. The second is the HTML file path (relative to your package) or a full URL. An optional third parameter sets the input mode: 0 = Game Only, 1 = UI Only, 2 = Game and UI.

Communicating: Game to UI

The real power of WebUI comes from the two-way communication between your game scripts and the HTML interface. Use SendEvent to send data from your game code into the UI's JavaScript.

Blueprint

// Send health data to the UI
MyHUD->SendEvent("UpdateHealth", HealthData);

Lua

-- Send health data to the UI
my_hud:SendEvent("UpdateHealth", {health = 80, max_health = 100})

JavaScript

// Send health data to the UI
myHUD.SendEvent("UpdateHealth", {health: 80, maxHealth: 100});

The UI receives these events through the browser's message event system.

Communicating: UI to Game

Your UI can also send events back to the game -- perfect for menu button clicks, settings changes, or form submissions. Use RegisterEventHandler on the WebUI instance to listen for events sent from the HTML side.

Blueprint

// Register an event handler for UI events
MyHUD->RegisterEventHandler("RequestRespawn", [](FString Arg, auto Callback) {
    // Respawn the player's character
    RespawnPlayer();
});

Lua

-- Register an event handler for UI events
my_hud:RegisterEventHandler("RequestRespawn", function(arg, callback)
    -- Respawn the player's character
    RespawnPlayer()
end)

JavaScript

// Register an event handler for UI events
myHUD.RegisterEventHandler("RequestRespawn", (arg, callback) => {
    // Respawn the player's character
    RespawnPlayer();
});

Input Focus

When a UI element needs keyboard/mouse input (like a text field or a menu), you control the input mode on the WebUI instance. The input modes are: 0 = Game Only (no UI input), 1 = UI Only (full input to UI), 2 = Game and UI (mouse focus shared).

Blueprint

// Send all input to the UI (for menus, text fields, etc.)
MyHUD->SetInputMode(1);

// Return input to the game
MyHUD->SetInputMode(0);

Lua

-- Send all input to the UI (for menus, text fields, etc.)
my_hud:SetInputMode(1)

-- Return input to the game
my_hud:SetInputMode(0)

JavaScript

// Send all input to the UI (for menus, text fields, etc.)
myHUD.SetInputMode(1);

// Return input to the game
myHUD.SetInputMode(0);

tip

Keep your UI lightweight. Since WebUI runs in a browser engine, heavy DOM manipulation or large frameworks can impact frame rate. Vanilla JS or a lightweight library like Preact works great.