Add UI To Your World

Older/Work In Progress Page

• This page was initially written for an older version of Helix, has not been updated, and may be out of date!
• Contributions are more than welcome (see buttons at the top right of the page).

💡 This page details how to optimally add UIs onto your game with key points, techniques and live examples.

💡 TODO: Divide into sections: Custom UI, UI Core (when “ui-core” package is available)

A UI as mentioned in the Introduction is a 2D visual and interactive interface webpage for the user that can show content or be interacted with, where with JavaScript you can affect your game in real time.

First of all, a WebUI is a webpage, so you must use HTML, CSS and JS to properly utilize your WebUI. To structure one, it is like any other HTML webpage with a HTML file, a CSS file and a JS file. You can expect your average UI file structure to look like this:

JQuery is also compatible with our WebUIs, so we highly recommend using them as well.

---

WebUIs are an Insertable Class that has inherited the Entity Base Class that you can insert into your game Clientside only. To Create one you can simply write:

local my_ui = WebUI("UI Name", "your_path.html",WebUIVisibility.Visible)

(Client/Index.lua)

my_ui:BringToFront() -- Brings the UI to the top so you can see and interact with it
my_ui:SetVisibility(WidgetVisibility) -- Use WidgetVisibility to change the UI state
my_ui:GetName() -- Returns the name you set it to during construction
my_ui:GetVisibility() -- Returns the WidgetVisibility you have set it to

There are many methods you can apply onto your WebUI, the most common ones are these!

---

You can also execute JavaScript code in WebUIs and communicate between the WebUI and your Client Scripts. Once you combine these you can easily have a dynamic UI that can change easily and affect the game in real time. Below is an example:

(Note that at the moment, you cannot receive Keyboard inputs from Javascript code, to bypass this you can use HELIX’s Static Input Class)

local my_ui = WebUI("Awesome UI", "file://UI/index.html")

-- Calls an event to the JavaScript
my_ui:CallEvent("SendToJS", "Hello Test!")

-- Subscribes to receive JS events
my_ui:Subscribe("RecieveJS", function(message)
    print(message)
    -- Will output 'Hey there!' from the JS function below this example
end)

Client/Index.lua

// Register for "SendToJS" from the LUA Client
Events.Subscribe("SendToJS", function(message) {
    console.log("Triggered! " + message);
    // Will output 'Triggered! Hello Test!'

    Events.Call("RecieveJS", message);
        // Triggers "RecieveJS" to the LUA Client
})

script.js
Now you understand the basics, look at this case study for a Music Player - try and replicate it or make your own UI!