Skip to main content
Version: bleeding-edge 🩸

User Interface

Wie man Informationen im Bildschirm für den Spieler anzeigt.

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

caution

We highly recommend using WebUI instead of Canvas to create your UIs 😉.

WebUI

Mit WebUI können Sie HTML-Seiten laden, die mit Ihren Paketen in Lua mit Events integriert werden.

Grundlegendes WebUI-Setup

Dieser Beispielcode zeigt, wie man eine grundlegende Seite mit HTML+JavaScript in die WebUI-Klasse einfügt.

info

Hinweis: Der gesamte WebUI-Code läuft auf der Client-Seite!

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! Du bist bereit!")
end)

MyUI:Subscribe("MyAwesomeAnswer", function(param1)
Package.Log("Antwort erhalten! Nachricht: " .. param1)
Ende)
Client/UI/index.html
<html>
<head>
<script src="index.js"></script>
</head>
<body>
Hallo Welt!
</body>
</html>
Client/UI/index.js
// Registrieren für "MyAwesomeEvent" von Lua
Events.Subscribe("MyAwesomeEvent", function(param1) {
console.log("Triggered! " + param1);

// Trigger "MyAwesomeAnswer" auf Lua
Events.Call("MyAwesomeAnswer", "Hallo!");
})

WebUI-Ergebnisse

Dies wird ausgegeben:

[WebUI]  Ausgelöst! Hallo! Du bist bereit!
[Script] Antwort erhalten! Nachricht: Hey da!
Basic HUD (HTML)getting-started/tutorials-and-examples/basic-hud-html

Leinwand

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