Skip to main content
Version: bleeding-edge 🩸

User Interface

How to display information on the Screen to the Player.

In nanos world there are 3 official ways of plotting screen data: WebUI, Widget and Canvas.

WebUI​

With WebUI you can load HTML pages which integrate with your Packages in Lua using Events.

This sample code shows how to add a basic page using HTML+JavaScript with the WebUI Class:

my-package/Client/Index.lua
-- Spawns a WebUI with the HTML file you just created
MyUI = WebUI("My UI", "file://UI/index.html")

-- When the HTML is ready, triggers an Event in there
MyUI:Subscribe("Ready", function()
    MyUI:CallEvent("MyAwesomeEvent", "Hello! You are ready!")
end)

MyUI:Subscribe("MyAwesomeAnswer", function(param1)
    Console.Log("Received an answer! Message: " .. param1)
end)
my-package/Client/UI/index.html
<html>
    <head>
        <script>
			// Register for "MyAwesomeEvent" from Lua
			Events.Subscribe("MyAwesomeEvent", function(param1) {
				console.log("Triggered! " + param1);

				// Triggers "MyAwesomeAnswer" on Lua
				Events.Call("MyAwesomeAnswer", "Hey there!");
			})
		</script>
    </head>
    <body>
        Hello World!
    </body>
</html>

It will output on screen:

WebUI results

And also output on the console:

[WebUI]  Triggered! Hello! You are ready!
[Script] Received an answer! Message: Hey there!

See a full example at:

Basic HUD (HTML)getting-started/tutorials-and-examples/basic-hud-html

Widget​

Another very flexible way of creating UIs is using the new Widget Class! With them you can have all access to the powerful Widgets and even create your own through Unreal Engine and import them in-game, providing a seamless User Experience!

For more information refer to our Widget class page:

Widget Classscripting-reference/classes/widget

Canvas​

One last way to plot data on the screen is to use the Canvas Class:

Basic HUD (Canvas)getting-started/tutorials-and-examples/basic-hud-canvas