Основы UI

Добавление 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 всегда должен выводиться из 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, "Новый квест!");
}

Шаг 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, "Принять").clicked {
        log_info("Принято!");
    }
}

Шаг 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, "Отмена").clicked {
        log_info("Отменено");
    }
    if UI.button(right, bs, ts, "Подтвердить").clicked {
        log_info("Подтверждено");
    }
}