UI 基础

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

---

为你的游戏添加 UI 需要编写代码，但一旦掌握了几种模式，你就能快速构建干净、可扩展的界面。本指南将带你完成一个分步教程，最后得到一个完整的对话框示例。

玩家的所有 UI 都必须绘制在该玩家的 ao_late_update 调用栈中，并用 is_local_or_server()包裹。这可以防止 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 向上增加。

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 进行布局

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

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");
    }
}