From 4d0d070059170398d888ba6309c0926ea42abf26 Mon Sep 17 00:00:00 2001
From: IceSentry <IceSentry@users.noreply.github.com>
Date: Wed, 20 Mar 2024 09:11:48 -0400
Subject: [PATCH] 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.
---
 crates/bevy_dev_tools/src/fps_overlay.rs | 39 +++++++++++++++++-----
 examples/dev_tools/fps_overlay.rs        | 41 +++++++++++++-----------
 2 files changed, 53 insertions(+), 27 deletions(-)

diff --git a/crates/bevy_dev_tools/src/fps_overlay.rs b/crates/bevy_dev_tools/src/fps_overlay.rs
index 51b8e7886dcf9..d3f57f998411b 100644
--- a/crates/bevy_dev_tools/src/fps_overlay.rs
+++ b/crates/bevy_dev_tools/src/fps_overlay.rs
@@ -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>>) {
diff --git a/examples/dev_tools/fps_overlay.rs b/examples/dev_tools/fps_overlay.rs
index e7f4cada95462..a2718ecc3c5c0 100644
--- a/examples/dev_tools/fps_overlay.rs
+++ b/examples/dev_tools/fps_overlay.rs
@@ -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",
+
+    // 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()
                 },
-            ),
-        ])
-        .with_style(Style {
-            justify_self: JustifySelf::Center,
-            ..default()
-        }),
-    );
+            ));
+        });
 }
 
 fn customize_config(input: Res<ButtonInput<KeyCode>>, mut overlay: ResMut<FpsOverlayConfig>) {