Add debug UI toggle

README.md

@@ -52,7 +52,7 @@ This template comes with a basic project structure that you may find useful:
 | [`src/assets.rs`](./src/assets.rs)       | Definition of assets that will be preloaded before the game starts             |
 | [`src/audio/`](./src/audio)              | Commands for playing SFX and music                                             |
 | [`src/demo/`](./src/demo)                | Example game mechanics & content (replace with your own code)                  |
-| [`src/dev_tools.rs`](./src/dev_tools.rs) | Dev tools for dev builds                                                       |
+| [`src/dev_tools.rs`](./src/dev_tools.rs) | Dev tools for dev builds (press \` aka backtick to toggle)                     |
 | [`src/screens/`](./src/screens)          | Splash screen, title screen, playing screen, etc.                              |
 | [`src/theme/`](./src/theme)              | Reusable UI widgets & theming                                                  |
 

src/dev_tools.rs

@@ -1,10 +1,30 @@
 //! Development tools for the game. This plugin is only enabled in dev builds.
 
-use bevy::{dev_tools::states::log_transitions, prelude::*};
+use bevy::{
+    dev_tools::{
+        states::log_transitions,
+        ui_debug_overlay::{DebugUiPlugin, UiDebugOptions},
+    },
+    input::common_conditions::input_just_pressed,
+    prelude::*,
+};
 
 use crate::screens::Screen;
 
 pub(super) fn plugin(app: &mut App) {
-    // Print state transitions in dev builds
+    // Log `Screen` state transitions.
     app.add_systems(Update, log_transitions::<Screen>);
+
+    // Toggle the debug overlay for UI.
+    app.add_plugins(DebugUiPlugin);
+    app.add_systems(
+        Update,
+        toggle_debug_ui.run_if(input_just_pressed(TOGGLE_KEY)),
+    );
+}
+
+const TOGGLE_KEY: KeyCode = KeyCode::Backquote;
+
+fn toggle_debug_ui(mut options: ResMut<UiDebugOptions>) {
+    options.toggle();
 }