UI en espacio del mundo

Usa la UI en espacio del mundo para dibujar texto sobre la cabeza de los jugadores y cualquier otro texto que deba sentirse como parte del propio mundo del juego.

La interfaz de usuario en espacio mundial se dibuja en el mundo 2D en lugar de en la pantalla. Úsala para placas de nombre, barras de salud, señales y cualquier texto que deba sentirse anclado a objetos del juego.

La interfaz de usuario en espacio mundial usa metros para el tamaño. Si usas tamaños de píxeles al estilo de pantalla, tu interfaz será enorme.

Reglas básicas

• Llama siempre a UI.push_world_draw_context() y defer UI.pop_draw_context().

• Usa metros para los tamaños y desplazamientos de los rectángulos.

• Empuja Z para un ordenamiento de profundidad correcto (normalmente usa pos.y).

• Usa subrect solo para rellenos porcentuales (como las barras de salud).

Ejemplos

Mostrando el nivel de un jugador

draw_player_level :: proc(player: Player) {
    UI.push_world_draw_context();
    defer UI.pop_draw_context();

    pos := player.world_position;
    UI.push_z(pos.y);
    defer UI.pop_z();

    ts := UI.default_text_settings();
    ts.size = 0.30; // Tamaño del texto en espacio mundial
    ts.halign = .CENTER;
    ts.valign = .CENTER;

    text_pos := pos + v2{0, 1.7};
    rect := Rect{text_pos, text_pos}->grow(0.05, 0.4, 0.05, 0.4);
    UI.text(rect, ts, "Lvl %", {player.level});
}

Señales en la base del jugador

draw_base_sign :: proc(sign: Entity, label: string) {
    UI.push_world_draw_context();
    defer UI.pop_draw_context();

    pos := sign.world_position;
    UI.push_z(pos.y);
    defer UI.pop_z();

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

    text_pos := pos + v2{0, 2.2};
    rect := Rect{text_pos, text_pos}->grow(0.06, 0.8, 0.06, 0.8);

    // Fondo oscuro opcional para mejorar la legibilidad
    UI.quad(rect, core_globals.white_sprite, {0, 0, 0, 0.6});
    UI.text(rect, ts, label);
}

Barras de salud

// Nota: health/max_health son campos definidos por el usuario en tu propia clase, no campos integrados de Entity.
draw_world_ui :: proc(entity: My_Entity) {
    UI.push_world_draw_context();
    defer UI.pop_draw_context();

    pos := entity.world_position;
    UI.push_z(pos.y);
    defer UI.pop_z();

    bar_pos := pos + v2{0, 1.5};
    bar_rect := Rect{bar_pos, bar_pos}->grow(0.1, 0.5, 0.1, 0.5);

    UI.quad(bar_rect, core_globals.white_sprite, {0, 0, 0, 0.8});

    health_pct := entity.health / entity.max_health;
    fill_rect := bar_rect->inset(0.02)->subrect(0, 0, health_pct, 1);
    fill_color := lerp(v4{1, 0, 0, 1}, {0, 1, 0, 1}, health_pct);
    UI.quad(fill_rect, core_globals.white_sprite, fill_color);
}

Conversión de coordenadas

// Convierte la posición del mundo a posición de pantalla
screen_pos := world_to_screen(entity.world_position);

// Convierte la posición de pantalla a posición del mundo
world_pos := screen_to_world(get_mouse_screen_position());

Consejos

• Mantén la interfaz de usuario del mundo minimalista y legible a distancia. Si tienes una cámara con zoom, asegúrate de ajustar el tamaño del texto cuando alejes el zoom.

• Usa fit_aspect(texture->get_aspect()) si dibujas iconos en espacio mundial.

• Si el texto parpadea o se superpone, revisa tus valores de Z y el espaciado.