跳至正文
版本:最新版 - a1.148.0 ⚖️

用户界面

如何向玩家显示屏幕上的信息。

在 nanos world 中,有 3 种官方的屏幕数据绘制方式:WebUI控件画布

WebUI

使用 WebUI,你可以加载 HTML 页面,这些页面可以通过事件与你的 Lua 包集成。

此示例代码展示了如何使用 HTML+JavaScript 和 WebUI 类添加一个基本页面:

my-package/Client/Index.lua
-- 生成一个 WebUI,并显示你刚刚创建的 HTML 文件
MyUI = WebUI("My UI", "file://UI/index.html")

-- 当 HTML 就绪时,触发其中的一个事件
MyUI:Subscribe("Ready", function()
MyUI:CallEvent("MyAwesomeEvent", "你好!你已准备就绪!")
end)

MyUI:Subscribe("MyAwesomeAnswer", function(param1)
Console.Log("收到回复!消息:" .. param1)
end)
my-package/Client/UI/index.html
<html>
<head>
<script>
// 通过 Lua 注册“MyAwesomeEvent”
Events.Subscribe("MyAwesomeEvent", function(param1) {
console.log("已触发!" + param1);

// 在 Lua 上触发“MyAwesomeAnswer”
Events.Call("MyAwesomeAnswer", "嗨!");
})
</script>
</head>
<body>
你好世界!
</body>
</html>

它会在屏幕上输出:

WebUI 结果

同时,控制台也会输出以下内容:

[WebUI] 已触发!你好!你已准备就绪!
[Script] 收到回复!消息:嗨!

完整示例参见:

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

控件

创建 UI 的另一种非常灵活的方法是使用新的 Widget 类! 借助它们,你可以完全访问强大的控件,甚至可以通过虚幻引擎创建自己的控件并将其导入到游戏中,从而提供无缝的用户体验!

有关更多信息,请参阅我们的控件类页面:

控件类scripting-reference/classes/widget

Canvas

最后一种在屏幕上绘制数据的方法是使用 Canvas 类:

基本 HUD(画布)getting-started/tutorials-and-examples/basic-hud-canvas