bevyengine / bevy

A refreshingly simple data-driven game engine built in Rust
https://bevyengine.org
Apache License 2.0
36k stars 3.55k forks source link

Text and Images can't be given padding #6879

Open ickshonpe opened 1 year ago

ickshonpe commented 1 year ago

Bevy version

Bevy 0.9

What you did

use bevy::prelude::*;

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

fn setup(
    mut commands: Commands,
    asset_server: Res<AssetServer>,
){
    let font = asset_server.load("fonts/FiraSans-Bold.ttf");
    commands.spawn(Camera2dBundle::default());

    commands
        .spawn(NodeBundle {
            style: Style {
                size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
                align_items: AlignItems::Center,
                justify_content: JustifyContent::Center,
                ..Default::default()
            },
            background_color: BackgroundColor(Color::CYAN),
            ..Default::default()
        })
        .with_children(|builder| {
            builder.spawn((TextBundle::from_section(
                    "Hello World",
                    TextStyle {
                        font,
                        font_size: 32.0,
                        color: Color::WHITE,
                    },
                ).with_style(Style {
                    padding: UiRect::all(Val::Px(10.)),
                    ..Default::default()
                }),
                BackgroundColor(Color::RED),
            ));

            // spawn an image bundle
            builder.spawn(ImageBundle {
                style: Style {
                    padding: UiRect::all(Val::Px(10.)),
                    ..Default::default()
                },
                image: asset_server.load("textures/icon.png").into(),
                ..Default::default()
            });
        });
}

What went wrong

The UI ignores padding when a node contains text or an image.

Additional information

related issues #5502, #6825

tim-blackbird commented 10 months ago

padding does appear have an effect on text and image nodes, but it behaves like min_width and min_height instead. Increasing the padding in the example above to exceed the size of the text or image will show the effect.