UI en Espacio Mundial

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

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

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

Reglas básicas

• Siempre llama 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 orden de profundidad correcto (comúnmente usa pos.y).

• Usa subrect solo para rellenos por porcentaje (como barras de salud).

Ejemplos

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

Letreros de 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 legibilidad
    UI.quad(rect, core_globals.white_sprite, {0, 0, 0, 0.6});
    UI.text(rect, ts, label);
}

Barras de salud

draw_world_ui :: proc(entity: 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

// Convertir posición en el mundo a posición en pantalla
screen_pos := world_to_screen(entity.world_position);

// Convertir posición en pantalla a posición en el mundo
world_pos := screen_to_world(get_mouse_screen_position());

Consejos

• Mantén la UI en el mundo mínima 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() si dibujas iconos en el espacio mundial.

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