WebUI

The WebUI class creates and manages web-based user interfaces within the game. It allows you to display web content (URLs or HTML files) as interactive widgets with full browser functionality powered by Chromium (CEF). WebUI supports all JS frameworks such as Vue.JS, React.JS, and more.

Authority: Client -- WebUI instances exist only on the client side.

---

Constructor

Blueprint

Blueprint— Create WebUI WidgetScroll to zoom · Drag to pan · Drag nodes to move

Lua

-- Create a WebUI from a local HTML file
local my_ui = WebUI('MyHUD', 'Package/UI/index.html')

JavaScript

// Create a WebUI from a local HTML file
const myUI = new WebUI("MyHUD", "Package/UI/index.html");

Constructor Parameters

Type	Name	Default	Description
string	Name	--	Unique identifier for logs.
string	Path	--	Web URL or HTML file path (e.g., "https://google.com" or "PackageName/Directory/index.html").
number	InputMode	0	Which input mode the UI is assigned (0 = Game Only, 1 = UI Only, 2 = Game and UI).

---

Methods

Method	Parameters	Return Type	Authority	Description
BringToFront	--	void	Client	Brings the interface to the top of the UI stack.
SetStackOrder	order: number	void	Client	Sets the Z-Index for the UI in the stack.
SetInputMode	mode: number	void	Client	Sets what type of input the UI receives. 0 = Game Only (No Input), 1 = UI Only (Full Input), 2 = Game and UI (Mouse Focus).
RegisterEventHandler	eventName: string, callback: function	void	Client	Registers a Lua event handler by name. The callback receives arguments sent from JavaScript and an optional callback function.
SendEvent	eventName: string, payload: any	void	Client	Sends an event by name to the JavaScript layer through message events.
Destroy	--	void	Client	Deactivates and destroys the WebUI instance.

---

Examples

Creating a HUD with Event Communication

Blueprint

Blueprint— HUD with Event CommunicationScroll to zoom · Drag to pan · Drag nodes to move

Lua

-- Client-side: create the HUD
local hud = WebUI('HUD', 'Package/UI/hud.html')

-- Register an event handler for messages from JavaScript
hud:RegisterEventHandler('Test', function(arg1, cb)
    print('Received from JS: ' .. arg1)
    cb(arg1)  -- optional callback back to JS
end)

-- Send data to the JavaScript layer
hud:SendEvent('Test', { test = true })

JavaScript

// Client-side: create the HUD
const hud = new WebUI("HUD", "Package/UI/hud.html");

// Event handlers and sending follow the same pattern.
// Refer to the Lua examples for function signatures.

Interactive Menu with Input Capture

Blueprint

Blueprint— Interactive Menu with Input CaptureScroll to zoom · Drag to pan · Drag nodes to move

Lua

-- Open an interactive menu with full input capture
local menu = WebUI('PauseMenu', 'Package/UI/menu.html')
menu:SetInputMode(1)  -- UI Only: capture mouse and keyboard

-- When closing the menu, return control to the game
menu:SetInputMode(0)  -- Game Only: release input

JavaScript

// Open an interactive menu with full input capture
const menu = new WebUI("PauseMenu", "Package/UI/menu.html");
menu.SetInputMode(1);  // UI Only: capture mouse and keyboard

// When closing the menu, return control to the game
menu.SetInputMode(0);  // Game Only: release input

---

tip

Always call Destroy() on WebUI instances in the global onShutdown function to properly clean up resources.

tip

When using a key to set input mode, the key "released" event will automatically trigger. For example, binding a pressed key to open a WebUI will cause its "released" counterpart to trigger when you use SetInputMode(1).