UI 基础

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

---

向游戏添加用户界面需要编写代码，但一旦你掌握了几种模式，就能快速构建干净、可扩展的界面。本指南将通过一步步的教程，最终展示一个完整的对话框示例。

所有针对玩家的界面必须在该玩家的 ao_late_update 调用栈内绘制并用 is_local_or_server()包裹。这可以防止界面出现在错误的客户端上。

在任何时候，你都可以跳转到 UI 参考 以了解更多模式和更深入的细节。

步骤 1：创建 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.get_safe_screen_rect() 或 UI.get_screen_rect()。记住：(0, 0) 是左下角，Y 向上增长。

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：使用切割进行布局

在布局多个元素时，应从矩形中切割出空间，而不是从相同的原点定位所有内容。

draw_panel_layout :: proc() {
    panel := UI.get_safe_screen_rect()->center_rect()->grow(140, 220, 140, 220);

    header := panel->cut_top(80);
    footer := panel->cut_bottom(70);
    body := panel;

    UI.quad(header, core_globals.white_sprite, {0.1, 0.1, 0.1, 0.8});
    UI.quad(body, core_globals.white_sprite, {0.05, 0.05, 0.05, 0.8});
    UI.quad(footer, core_globals.white_sprite, {0.1, 0.1, 0.1, 0.8});
}

步骤 4：添加文本

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

draw_header_text :: proc(rect: Rect) {
    ts := UI.default_text_settings();
    ts.size = 52;
    ts.color = {1, 1, 1, 1};
    ts.halign = .CENTER;
    ts.valign = .CENTER;

    UI.text(rect, ts, "New Quest!");
}

步骤 5：添加按钮

按钮将布局与交互结合起来。使用引擎提供资源中的按钮精灵（参见 UI 参考 以获取更多信息）。

draw_button :: proc(rect: Rect) {
    bs := UI.default_button_settings();
    ts := UI.default_text_settings();

    bs.sprite = get_asset(Texture_Asset, "$AO/new/modal/buttons_2/button_2.png");
    bs.press_scaling = 0.35;

    if UI.button(rect, bs, ts, "Accept").clicked {
        log_info("Accepted!");
    }
}

步骤 6：构建对话框

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

draw_dialog :: proc(title: string, body: string) {
    screen := UI.get_safe_screen_rect();
    dialog := screen->center_rect()->grow(200, 300, 200, 300);

    UI.quad(dialog, core_globals.white_sprite, {0, 0, 0, 0.85});

    content := dialog->inset(30);
    header := content->cut_top(80);
    buttons := content->cut_bottom(90);
    body_rect := content;

    ts := UI.default_text_settings();
    ts.halign = .CENTER;
    ts.valign = .CENTER;

    ts.size = 52;
    UI.text(header, ts, title);

    ts.size = 36;
    UI.text(body_rect, ts, body);

    bs := UI.default_button_settings();
    bs.sprite = get_asset(Texture_Asset, "$AO/new/modal/buttons_2/button_2.png");
    bs.press_scaling = 0.35;

    left := buttons->cut_left(210);
    buttons->cut_left(20);
    right := buttons->cut_left(210);

    if UI.button(left, bs, ts, "Cancel").clicked {
        log_info("Cancelled");
    }
    if UI.button(right, bs, ts, "Confirm").clicked {
        log_info("Confirmed");
    }
}