For the complete documentation index, see llms.txt. This page is also available as Markdown.

UI 基础

为你的游戏添加 UI 需要编写代码,但在 AI 的帮助下,制作复杂的交互式 UI 会容易得多。


为你的游戏添加 UI 需要编写代码,但一旦你学会了几种模式,就能快速构建简洁、可扩展的界面。本指南将带你完成一个逐步教程,最终得到一个完整的对话框示例。

玩家的所有 UI 都必须绘制在该玩家的 ao_late_update 调用栈中,并用 is_local_or_server()包裹起来。这可以防止 UI 出现在错误的客户端上。不要从全局或非玩家组件回调中绘制玩家 UI。

你可以随时跳转到 UI 参考 查看更多模式和更深入的细节。

步骤 1:创建一个 UI 入口点

所有交互式 UI 都应该从本地玩家的 ao_late_update:

Player :: class : Player_Base {
    ao_late_update :: method(dt: float) {
        if this.is_local_or_server() {
            draw_ui(this);
        }
    }
}

步骤 2:从屏幕矩形开始

屏幕 UI 应始终基于 UI.get_safe_screen_rect()UI.get_screen_rect()。请记住:(0,0)在左下角,Y 轴向上增长。

传递给常规矩形辅助函数的屏幕空间尺寸是 基于一块高度为 1080 点的参考画布。引擎会将这些点缩放为设备的实际像素,因此相同的布局在不同分辨率下仍能保持一致的相对大小。

draw_ui :: proc(player: Player) {
    screen := UI.get_safe_screen_rect();

    // 一个简单的居中面板
    panel := screen.center_rect().grow(120, 200, 120, 200);
    UI.quad(panel, core_globals.white_sprite, {0, 0, 0, 0.7});
}

步骤 3:使用 Cut 进行布局

在进行多个元素布局时,应从矩形中切出空间,而不是从同一个原点来定位所有元素。

步骤 4:添加文本

使用文本设置来控制大小、颜色和对齐方式。

步骤 5:添加按钮

按钮将布局和交互结合在一起。请使用引擎提供资源中的按钮精灵(参见 UI 参考 了解更多)。

步骤 6:构建一个对话框

现在把所有步骤组合成一个可复用的对话框布局。

最后更新于