Layering Images in bevy_ui

[leo6dev]

Hi sorry if this is the incorrect place for this but I am struggling with layering images but it appears that when overlaying images with code like this

  use bevy::prelude::*;

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

fn setup(mut commands: Commands) {
    commands.spawn_bundle(UiCameraBundle::default());

    commands.spawn()
        .insert_bundle(ImageBundle {
            color: Color::WHITE.into(),
            ..default()
        })
        .insert_bundle(ImageBundle {
            color: Color::NONE.into(),
            ..default()
        });
}

The Color::WHITE image is not displayed even tho the other image has an alfa of 0 and should be total transperant. by removing the second image (NONE) the first (WHITE) is correctly displayed. A real world example of this is when using pngs with alfa, this was my orignal use case witch involved trying to draw 2 pngs on top of one and other.

Issue occurs on 0.7 and git main

[tim-blackbird]

Your second .insert_bundle() is overwriting the first call. You'll need to call commands.spawn() before each bundle to spawn 2 separate entities .

[leo6dev]

Hi is there a way to have the images overlap?
I had already tried that with this result

I was hoping to have the second image overlap the first

Sorry for the fact that its not from the same example code.

Thanks

[tim-blackbird]

No worries.
Haven't played around much with the ui myself, but I think you need to make the axe a child of the frame.
I recommend taking a look at the ui example to see how you can do that.

[Geams]

You have to add the top image as a child to the bottom image, similar to this example.

let bottom = ImageBundle{
        style: Style{
            size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
            ..default()
        },
        color: Color::WHITE.into(),
        ..default()
    };
    let top = ImageBundle{
        style: Style{
            size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
            ..default()
        },
        color: Color::rgba_u8(255,0,0,100).into(),
        ..default()
    };
 commands
    .spawn_bundle(bottom)
        .with_children(|parent|{
            parent.spawn_bundle(top);
        });

[leo6dev]

Thanks