How to make an overlay that covers UI elements, so i can fade the screen to black?

[chrishulbert]

Hi all,
I'm trying to do a fade-to-black transition between screens (states), and i've had easy success doing this with normal sprites, however with UI on the screen, I've tried adding a new UI element with the z in the transform set to 999, however it does not overlay the existing UI. Is this the wrong way to do things, or am i missing something? Thanks.
The code looks like the below: (note the interesting colours, this is simply so i can get a better idea what's going on).

commands.spawn_bundle(NodeBundle{
        style: Style{
            margin: UiRect::all(Val::Auto), // Center contents.
            align_items: AlignItems::Center,
            justify_content: JustifyContent::Center,
            position_type: PositionType::Absolute,
            ..default()
        },
        transform: Transform::from_xyz(0., 0., 999.),
        global_transform: GlobalTransform::from_xyz(0., 0., 999.),
        color: Color::PURPLE.into(),
        ..default()
    })
    .with_children(|parent| {
        parent.spawn_bundle(ImageBundle {
            style: Style {
                size: Size::new(Val::Px(9999.0), Val::Px(9999.0)),
                ..default()
            },
            transform: Transform::from_xyz(0., 0., 999.),
            global_transform: GlobalTransform::from_xyz(0., 0., 999.),
            image: game_textures.black.clone().into(),
            color: Color::RED.into(),
            ..default()
        });
    });```

[wilk10]

I haven't worked on transitions yet, or effects applied to the UI, so this is more of a suggestion.

Here is where the transform of the ExtractedView of the UI is calculated.

However, I don't think that trying to spawn a texture between the UI and the camera is the correct solution, in my opinion.

Depending on how you want your effect to look like, perhaps during the transition you could fade the UiColor of the NodeBundle, either by getting it gradually closer to black, or by making it gradually transparent.

[chrishulbert]

Thanks for replying! :)
I had a read of the link you posted, if i understand correctly, it's suggesting on line 258 that all UI views get the same z: UI_CAMERA_FAR + UI_CAMERA_TRANSFORM_OFFSET
If that's the case, then there's no way to layer UI, unfortunately. However, i'd love to know if i'm understanding that correctly.
Also: If i faded the colour of the existing root NodeBundle, I worry that the effect might look a little out of place, as if it'll darken at a different rate to the non-UI stuff. But i'll give it a try! Thanks.

[wilk10]

No problem!

Yes i don't think it's possible, but others can confirm. At the very least it's very hacky.

I do share the same concern, whether they'd fade at different rates etc, but it should be easy to setup and try out.

Another option that requires a bit more work, would be to render both your world (what's visible) and the UI to a texture, during transitions. With this setup, you can then modify inside a shader that texture and do all the effects you want, applied uniformly.

Keep us posted on your findings.

[chrishulbert]

Thanks again :)

I tried with the example where it also sets the alpha of the UI elements instead of attempting to overlay. It actually looks reasonable, if you discount the problem you can see here where a rectangle in the middle of the screen goes black prematurely.
To be honest, it seems problematic that I don't have full control over the UI elements, so i'm flirting with switching to non-UI elements, but i'm not 100% sure.
Anyway if anyone's interested here's how it looks:

Fade.mp4

[chrishulbert]

It seems this isn't the way that UI works, so i'm happy to convert it all to normal sprites, and recommend others the same in similar situations.

[HackerFoo]

You can layer a camera on top using a lower priority to darken the screen. Note that this doesn't work correctly for the UI yet if using 4x MSAA, unfortunately: #5721

I have a workaround for now: HackerFoo@3709a3e

My use is to draw on top of the UI, but any shader should work.

[chrishulbert]

Thankyou for the suggestion! I think i'd prefer not to push bevy too far outside the bounds of normal usage, I suspect that might bite me in the bum at some point, so i might stick to simply using sprites until bevy UI perhaps matures somewhat. Good idea though!