Always spawn fps_overlay on top of everything (#12586)

# Objective

- Currently the fps_overlay affects any other ui node spawned. This
should not happen

## Solution

- Use position absolute and a ZIndex of `i32::MAX - 32`
- I also modified the example a little bit to center it correctly. It
only worked previously because the overlay was pushing it down. I also
took the opportunity to simplify the text spawning code a little bit.
This commit is contained in:
IceSentry 2024-03-20 09:11:48 -04:00 committed by GitHub
parent 779e4c4901
commit 4d0d070059
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 56 additions and 30 deletions

View file

@ -10,8 +10,18 @@ use bevy_ecs::{
schedule::{common_conditions::resource_changed, IntoSystemConfigs},
system::{Commands, Query, Res, Resource},
};
use bevy_hierarchy::BuildChildren;
use bevy_text::{Font, Text, TextSection, TextStyle};
use bevy_ui::node_bundles::TextBundle;
use bevy_ui::{
node_bundles::{NodeBundle, TextBundle},
PositionType, Style, ZIndex,
};
use bevy_utils::default;
/// Global [`ZIndex`] used to render the fps overlay.
///
/// We use a number slightly under `i32::MAX` so you can render on top of it if you really need to.
pub const FPS_OVERLAY_ZINDEX: i32 = i32::MAX - 32;
/// A plugin that adds an FPS overlay to the Bevy application.
///
@ -67,13 +77,26 @@ impl Default for FpsOverlayConfig {
struct FpsText;
fn setup(mut commands: Commands, overlay_config: Res<FpsOverlayConfig>) {
commands.spawn((
TextBundle::from_sections([
TextSection::new("FPS: ", overlay_config.text_config.clone()),
TextSection::from_style(overlay_config.text_config.clone()),
]),
FpsText,
));
commands
.spawn(NodeBundle {
style: Style {
// We need to make sure the overlay doesn't affect the position of other UI nodes
position_type: PositionType::Absolute,
..default()
},
// Render overlay on top of everything
z_index: ZIndex::Global(FPS_OVERLAY_ZINDEX),
..default()
})
.with_children(|c| {
c.spawn((
TextBundle::from_sections([
TextSection::new("FPS: ", overlay_config.text_config.clone()),
TextSection::from_style(overlay_config.text_config.clone()),
]),
FpsText,
));
});
}
fn update_text(diagnostic: Res<DiagnosticsStore>, mut query: Query<&mut Text, With<FpsText>>) {

View file

@ -28,30 +28,33 @@ fn main() {
}
fn setup(mut commands: Commands) {
// We need to spawn camera to see overlay
// We need to spawn a camera (2d or 3d) to see the overlay
commands.spawn(Camera2dBundle::default());
commands.spawn(
TextBundle::from_sections([
TextSection::new(
"Press 1 to change color of the overlay.",
TextStyle {
font_size: 25.0,
..default()
},
),
TextSection::new(
"\nPress 2 to change size of the overlay",
TextStyle {
font_size: 25.0,
..default()
},
),
])
.with_style(Style {
justify_self: JustifySelf::Center,
// Instruction text
commands
.spawn(NodeBundle {
style: Style {
width: Val::Percent(100.0),
height: Val::Percent(100.0),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()
},
..default()
}),
);
})
.with_children(|c| {
c.spawn(TextBundle::from_section(
concat!(
"Press 1 to change color of the overlay.\n",
"Press 2 to change size of the overlay."
),
TextStyle {
font_size: 25.0,
..default()
},
));
});
}
fn customize_config(input: Res<ButtonInput<KeyCode>>, mut overlay: ResMut<FpsOverlayConfig>) {