#Attempting to layer an image on top of a button, image does not appear

3 messages · Page 1 of 1 (latest)

pseudo pelican
#

do I instead have to chain the commands.spawn with a setparent? Or should this be working

#

I had to use the Icon Component bc otherwise the TabBundle component would have two style bundles at the same level and the compiler doesn't like that

proud cape
#

Three main ways to draw an image on a button node:

use bevy::prelude::*;
use bevy::ui::ContentSize;
use bevy::ui::widget::UiImageSize;


fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_systems(Startup, startup)
        .run();
}

fn startup(mut commands: Commands, asset_server: Res<AssetServer>) {
    commands.spawn(Camera2dBundle::default());
    
    // size of button determined from layout's `Style` constraints
    commands.spawn((
        ButtonBundle {
            style: Style {
                width: Val::Px(200.),
                height: Val::Px(200.),
                ..Default::default()
            },
            image: UiImage::new(asset_server.load("icon.png")),
            ..Default::default()
        },
        
    ));

    // size of button calculated automatically using `update_image_content_size_system`
    commands.spawn((
        ButtonBundle {
            image: UiImage::new(asset_server.load("icon.png")),
            ..Default::default()
        },
        UiImageSize::default(),
        ContentSize::default(),
    ));

    // diplay the icon on a child node, which allows us to display a border around the button's icon.
    // If the icon was on the button itself, the icon would be drawn under the border
    // but added as a child the icon is drawn inside the border
    commands.spawn((
        ButtonBundle {
            style: Style {
                border: UiRect::all(Val::VMax(5.)),
                ..Default::default()
            },
            border_color: Color::RED.into(),
            ..Default::default()
        },
    )).with_children(|builder| {
        builder.spawn(ImageBundle {
            image: UiImage::new(asset_server.load("icon.png")),
            ..Default::default()
        });
    });    
}