#UI text centered at the bottom

4 messages · Page 1 of 1 (latest)

odd timber
#

How does one make UI text centered at the bottom of the screen? (I tried mimicking some JS examples, didn't have the same results)
Ideally I would like to see a version without using a parent mode - as that's more complex, but either version is acceptable.

plush torrent
#
use bevy::prelude::*;

fn main() {
    App::new()
    .add_plugins(DefaultPlugins)
    .add_startup_system(setup)
    .run();
}

fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
    commands.spawn(Camera2dBundle::default());
    commands.spawn(NodeBundle {
        style: Style {
            flex_basis: Val::Percent(100.),
            justify_content: JustifyContent::Center,
            align_items: AlignItems::End,
            ..Default::default()
        },
        ..Default::default()
    })
    .with_children(|parent| {
        parent.spawn(TextBundle::from_section(
            "bottom center",
            TextStyle {
                font: asset_server.load("fonts/FiraMono-Medium.ttf"),
                font_size: 40.,
                color: Color::WHITE,
        }));
    });
}
#

in bevy 10.1 there's no way around the need for a parent node to position text horizontally and vertically at once unless you use absolute positioning and calculate the coordinates yourself

#
fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
    commands.spawn(Camera2dBundle::default());
    commands.spawn(TextBundle::from_section(
        "bottom center",
        TextStyle {
            font: asset_server.load("fonts/FiraMono-Medium.ttf"),
            font_size: 40.,
            color: Color::WHITE,
    })
    .with_style(
        Style {
            position_type: PositionType::Absolute,
            position: UiRect { bottom: Val::Px(0.), left: Val::Px(500.), ..Default::default() },
            ..Default::default()
        }
    )
    .with_background_color(Color::RED));
}