From 04071886e07ea18bfe2be668d7ca2ce2702989f4 Mon Sep 17 00:00:00 2001
From: GitGhillie <jillisnoordhoek@gmail.com>
Date: Fri, 16 May 2025 14:16:21 +0200
Subject: [PATCH 01/22] wip

---
 Cargo.toml               |  11 +++
 examples/3d/healthbar.rs | 142 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 153 insertions(+)
 create mode 100644 examples/3d/healthbar.rs

diff --git a/Cargo.toml b/Cargo.toml
index a3d3a2ab63e51..9bcff9f908206 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -969,6 +969,17 @@ description = "A scene showcasing pbr atmospheric scattering"
 category = "3D Rendering"
 wasm = true
 
+[[example]]
+name = "healthbar"
+path = "examples/3d/healthbar.rs"
+doc-scrape-examples = true
+
+[package.metadata.example.healthbar]
+name = "Healthbar"
+description = "A scene showcasing world-to-viewport UI"
+category = "3D Rendering"
+wasm = true
+
 [[example]]
 name = "fog"
 path = "examples/3d/fog.rs"
diff --git a/examples/3d/healthbar.rs b/examples/3d/healthbar.rs
new file mode 100644
index 0000000000000..d71ce2147fed4
--- /dev/null
+++ b/examples/3d/healthbar.rs
@@ -0,0 +1,142 @@
+//! A simple 3D scene with light shining over a cube sitting on a plane. (todo)
+
+use bevy::input::common_conditions::input_just_pressed;
+use bevy::prelude::*;
+
+/// Marker for the health bar root UI node
+#[derive(Component)]
+struct HealthBarMarker;
+
+/// Health bar should be moved above this entity (todo: use relations)
+#[derive(Component)]
+struct HealthBarTarget;
+
+// Define a struct to keep some information about our entity.
+// Here it's an arbitrary movement speed, the spawn location, and a maximum distance from it.
+#[derive(Component)]
+struct Movable {
+    spawn: Vec3,
+    max_distance: f32,
+    speed: f32,
+}
+
+// Implement a utility function for easier Movable struct creation.
+impl Movable {
+    fn new(spawn: Vec3) -> Self {
+        Movable {
+            spawn,
+            max_distance: 5.0,
+            speed: 2.0,
+        }
+    }
+}
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        .add_plugins(RemotePlugin::default())
+        .add_plugins(RemoteHttpPlugin::default())
+        .add_systems(Startup, (setup, setup_ui))
+        .add_systems(Update, update_ui.run_if(input_just_pressed(KeyCode::Space)))
+        .add_systems(Update, move_cube)
+        .run();
+}
+
+/// set up a simple 3D scene
+fn setup(
+    mut commands: Commands,
+    mut meshes: ResMut<Assets<Mesh>>,
+    mut materials: ResMut<Assets<StandardMaterial>>,
+) {
+    // circular base
+    commands.spawn((
+        Mesh3d(meshes.add(Circle::new(4.0))),
+        MeshMaterial3d(materials.add(Color::WHITE)),
+        Transform::from_rotation(Quat::from_rotation_x(-std::f32::consts::FRAC_PI_2)),
+    ));
+    // cube
+    let entity_spawn = Vec3::new(0.0, 0.5, 0.0);
+    commands.spawn((
+        Mesh3d(meshes.add(Cuboid::new(1.0, 1.0, 1.0))),
+        MeshMaterial3d(materials.add(Color::srgb_u8(124, 144, 255))),
+        Transform::from_translation(entity_spawn),
+        HealthBarTarget,
+        Movable::new(entity_spawn)
+    ));
+    // light
+    commands.spawn((
+        PointLight {
+            shadows_enabled: true,
+            ..default()
+        },
+        Transform::from_xyz(4.0, 8.0, 4.0),
+    ));
+    // camera
+    commands.spawn((
+        Camera3d::default(),
+        Transform::from_xyz(-4.5, 4.5, 9.0).looking_at(Vec3::ZERO, Vec3::Y),
+    ));
+}
+
+/// todo comment
+fn setup_ui(mut commands: Commands, asset_server: Res<AssetServer>) {
+    let font_handle = asset_server.load("fonts/FiraSans-Bold.ttf");
+
+    commands.spawn((
+        Node {
+            position_type: PositionType::Absolute,
+            left: Val::Vw(30.0),
+            top: Val::Vw(50.0),
+            width: Val::Px(150.0),
+            height: Val::Px(65.0),
+            justify_content: JustifyContent::Center,
+            align_items: AlignItems::Center,
+            ..default()
+        },
+        BackgroundColor(Color::srgba(0.1, 0.5, 0.1, 0.3)),
+        HealthBarMarker,
+        children![(
+            Text::new("42"),
+            TextFont {
+                font: font_handle.clone(),
+                font_size: 33.0,
+                ..default()
+            },
+            TextColor(Color::srgb(1.0, 1.0, 1.0)),
+        )],
+    ));
+}
+
+fn update_ui(
+    mut health_bar_query: Query<&mut Node, With<HealthBarMarker>>,
+    target_query: Single<&GlobalTransform, With<HealthBarTarget>>,
+    camera_query: Single<(&Camera, &GlobalTransform)>,
+) {
+    let camera = camera_query.0;
+    let cam_transform = camera_query.1;
+
+    let world_position = target_query.translation();
+
+    for mut health_bar_node in health_bar_query.iter_mut() {
+        let viewport_position = camera.world_to_viewport(cam_transform, world_position).unwrap();
+        health_bar_node.left = Val::Px(viewport_position.x);
+        health_bar_node.top = Val::Px(viewport_position.y);
+
+        println!("{}", camera.world_to_viewport(cam_transform, Vec3::ZERO).unwrap());
+        println!("{:?}", health_bar_node.left);
+        println!("{:?}", health_bar_node.top);
+    }
+}
+
+// This system will move all Movable entities with a Transform
+fn move_cube(mut cubes: Query<(&mut Transform, &mut Movable)>, timer: Res<Time>) {
+    for (mut transform, mut cube) in &mut cubes {
+        // Check if the entity moved too far from its spawn, if so invert the moving direction.
+        if (cube.spawn - transform.translation).length() > cube.max_distance {
+            cube.speed *= -1.0;
+        }
+        let direction = transform.local_x();
+        transform.translation += direction * cube.speed * timer.delta_secs();
+    }
+}
+

From 19b03758c751ec4cdaac90253938e6675e2ee11f Mon Sep 17 00:00:00 2001
From: GitGhillie <jillisnoordhoek@gmail.com>
Date: Fri, 16 May 2025 16:20:10 +0200
Subject: [PATCH 02/22] Tracking object

---
 Cargo.toml               |  1 +
 examples/3d/healthbar.rs | 72 ++++++++++++++++++++++++++--------------
 2 files changed, 49 insertions(+), 24 deletions(-)

diff --git a/Cargo.toml b/Cargo.toml
index 9bcff9f908206..4236fc450a2d2 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -561,6 +561,7 @@ bevy_asset = { path = "crates/bevy_asset", version = "0.16.0-dev", default-featu
 bevy_reflect = { path = "crates/bevy_reflect", version = "0.16.0-dev", default-features = false }
 bevy_image = { path = "crates/bevy_image", version = "0.16.0-dev", default-features = false }
 bevy_gizmos = { path = "crates/bevy_gizmos", version = "0.16.0-dev", default-features = false }
+bevy_remote = { path = "crates/bevy_remote", version = "0.16.0-dev" } # todo remove this
 # Needed to poll Task examples
 futures-lite = "2.0.1"
 async-std = "1.13"
diff --git a/examples/3d/healthbar.rs b/examples/3d/healthbar.rs
index d71ce2147fed4..4a7d985fd3f66 100644
--- a/examples/3d/healthbar.rs
+++ b/examples/3d/healthbar.rs
@@ -1,13 +1,19 @@
 //! A simple 3D scene with light shining over a cube sitting on a plane. (todo)
 
+use bevy::color::palettes::css::YELLOW;
 use bevy::input::common_conditions::input_just_pressed;
 use bevy::prelude::*;
+use bevy_remote::http::RemoteHttpPlugin;
+use bevy_remote::RemotePlugin;
 
 /// Marker for the health bar root UI node
 #[derive(Component)]
-struct HealthBarMarker;
+struct HealthBarRoot;
 
-/// Health bar should be moved above this entity (todo: use relations)
+#[derive(Component)]
+struct HealthBar;
+
+/// Health bar should be moved above this entity (todo: use relations?)
 #[derive(Component)]
 struct HealthBarTarget;
 
@@ -37,7 +43,8 @@ fn main() {
         .add_plugins(RemotePlugin::default())
         .add_plugins(RemoteHttpPlugin::default())
         .add_systems(Startup, (setup, setup_ui))
-        .add_systems(Update, update_ui.run_if(input_just_pressed(KeyCode::Space)))
+        // .add_systems(Update, update_ui.run_if(input_just_pressed(MouseButton::Left)))
+        .add_systems(Update, update_ui)
         .add_systems(Update, move_cube)
         .run();
 }
@@ -61,7 +68,7 @@ fn setup(
         MeshMaterial3d(materials.add(Color::srgb_u8(124, 144, 255))),
         Transform::from_translation(entity_spawn),
         HealthBarTarget,
-        Movable::new(entity_spawn)
+        Movable::new(entity_spawn),
     ));
     // light
     commands.spawn((
@@ -74,41 +81,59 @@ fn setup(
     // camera
     commands.spawn((
         Camera3d::default(),
-        Transform::from_xyz(-4.5, 4.5, 9.0).looking_at(Vec3::ZERO, Vec3::Y),
+        Transform::from_xyz(-6.5, 2.5, 3.0).looking_at(Vec3::ZERO, Vec3::Y),
     ));
 }
 
 /// todo comment
 fn setup_ui(mut commands: Commands, asset_server: Res<AssetServer>) {
-    let font_handle = asset_server.load("fonts/FiraSans-Bold.ttf");
+    // let font_handle = asset_server.load("fonts/FiraSans-Bold.ttf");
 
     commands.spawn((
+        Name::from("Root Healthbar"),
         Node {
             position_type: PositionType::Absolute,
-            left: Val::Vw(30.0),
-            top: Val::Vw(50.0),
             width: Val::Px(150.0),
             height: Val::Px(65.0),
-            justify_content: JustifyContent::Center,
-            align_items: AlignItems::Center,
+            //flex_basis: Val::Percent(100.0),
+            align_self: AlignSelf::Stretch,
+            //justify_content: JustifyContent::Center,
+            //align_items: AlignItems::Center,
+            padding: UiRect::all(Val::Px(10.)),
             ..default()
         },
-        BackgroundColor(Color::srgba(0.1, 0.5, 0.1, 0.3)),
-        HealthBarMarker,
+        BackgroundColor(Color::srgba(0.1, 0.1, 0.1, 0.7)),
+        HealthBarRoot,
         children![(
-            Text::new("42"),
-            TextFont {
-                font: font_handle.clone(),
-                font_size: 33.0,
+            Node {
+                align_items: AlignItems::Stretch,
+                width: Val::Percent(100.),
+                //height: Val::Px(100.),
                 ..default()
             },
-            TextColor(Color::srgb(1.0, 1.0, 1.0)),
+            BackgroundColor(Color::srgba(0.9, 0.9, 0.9, 0.5)),
+            children![(
+                Node::default(),
+                BackgroundColor(Color::WHITE),
+                HealthBar
+            )],
         )],
+        // children![(
+        //     Text::new("42"),
+        //     TextFont {
+        //         font: font_handle.clone(),
+        //         font_size: 33.0,
+        //         ..default()
+        //     },
+        //     TextColor(Color::srgb(1.0, 1.0, 1.0)),
+        //     BackgroundColor(Color::srgba(0.9, 0.1, 0.1, 0.5)),
+        // )],
     ));
 }
 
 fn update_ui(
-    mut health_bar_query: Query<&mut Node, With<HealthBarMarker>>,
+    mut health_bar_query: Query<&mut Node, (With<HealthBarRoot>, Without<HealthBar>)>,
+    mut health_bar_child_query: Single<&mut Node, (With<HealthBar>, Without<HealthBarRoot>)>,
     target_query: Single<&GlobalTransform, With<HealthBarTarget>>,
     camera_query: Single<(&Camera, &GlobalTransform)>,
 ) {
@@ -118,17 +143,17 @@ fn update_ui(
     let world_position = target_query.translation();
 
     for mut health_bar_node in health_bar_query.iter_mut() {
-        let viewport_position = camera.world_to_viewport(cam_transform, world_position).unwrap();
+        let viewport_position = camera
+            .world_to_viewport(cam_transform, world_position)
+            .unwrap();
         health_bar_node.left = Val::Px(viewport_position.x);
         health_bar_node.top = Val::Px(viewport_position.y);
 
-        println!("{}", camera.world_to_viewport(cam_transform, Vec3::ZERO).unwrap());
-        println!("{:?}", health_bar_node.left);
-        println!("{:?}", health_bar_node.top);
+        health_bar_child_query.width = Val::Percent(33.3);
     }
 }
 
-// This system will move all Movable entities with a Transform
+/// This system will move all Movable entities with a Transform
 fn move_cube(mut cubes: Query<(&mut Transform, &mut Movable)>, timer: Res<Time>) {
     for (mut transform, mut cube) in &mut cubes {
         // Check if the entity moved too far from its spawn, if so invert the moving direction.
@@ -139,4 +164,3 @@ fn move_cube(mut cubes: Query<(&mut Transform, &mut Movable)>, timer: Res<Time>)
         transform.translation += direction * cube.speed * timer.delta_secs();
     }
 }
-

From cdd2e935c6a3c8b6c5ea64fb1ec2109dd4292ce1 Mon Sep 17 00:00:00 2001
From: GitGhillie <jillisnoordhoek@gmail.com>
Date: Fri, 16 May 2025 16:37:44 +0200
Subject: [PATCH 03/22] Red/green

---
 examples/3d/healthbar.rs | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/examples/3d/healthbar.rs b/examples/3d/healthbar.rs
index 4a7d985fd3f66..d66c504626220 100644
--- a/examples/3d/healthbar.rs
+++ b/examples/3d/healthbar.rs
@@ -1,6 +1,6 @@
 //! A simple 3D scene with light shining over a cube sitting on a plane. (todo)
 
-use bevy::color::palettes::css::YELLOW;
+use bevy::color::palettes::css::{GREEN, RED, YELLOW};
 use bevy::input::common_conditions::input_just_pressed;
 use bevy::prelude::*;
 use bevy_remote::http::RemoteHttpPlugin;
@@ -102,7 +102,7 @@ fn setup_ui(mut commands: Commands, asset_server: Res<AssetServer>) {
             padding: UiRect::all(Val::Px(10.)),
             ..default()
         },
-        BackgroundColor(Color::srgba(0.1, 0.1, 0.1, 0.7)),
+        BackgroundColor(Color::srgb(0.1, 0.1, 0.1)),
         HealthBarRoot,
         children![(
             Node {
@@ -111,10 +111,10 @@ fn setup_ui(mut commands: Commands, asset_server: Res<AssetServer>) {
                 //height: Val::Px(100.),
                 ..default()
             },
-            BackgroundColor(Color::srgba(0.9, 0.9, 0.9, 0.5)),
+            BackgroundColor(Color::from(RED)),
             children![(
                 Node::default(),
-                BackgroundColor(Color::WHITE),
+                BackgroundColor(Color::from(GREEN)),
                 HealthBar
             )],
         )],
@@ -136,6 +136,7 @@ fn update_ui(
     mut health_bar_child_query: Single<&mut Node, (With<HealthBar>, Without<HealthBarRoot>)>,
     target_query: Single<&GlobalTransform, With<HealthBarTarget>>,
     camera_query: Single<(&Camera, &GlobalTransform)>,
+    time: Res<Time>,
 ) {
     let camera = camera_query.0;
     let cam_transform = camera_query.1;
@@ -149,7 +150,8 @@ fn update_ui(
         health_bar_node.left = Val::Px(viewport_position.x);
         health_bar_node.top = Val::Px(viewport_position.y);
 
-        health_bar_child_query.width = Val::Percent(33.3);
+        let hp = (time.elapsed().as_secs_f32().sin() + 0.5) * 100.0;
+        health_bar_child_query.width = Val::Percent(hp);
     }
 }
 

From 8a692e91f00cb4d212725df6add9d74b4d9e12de Mon Sep 17 00:00:00 2001
From: GitGhillie <jillisnoordhoek@gmail.com>
Date: Sat, 17 May 2025 11:04:33 +0200
Subject: [PATCH 04/22] wip try to center it

---
 examples/3d/healthbar.rs | 59 ++++++++++++++++++++++------------------
 1 file changed, 33 insertions(+), 26 deletions(-)

diff --git a/examples/3d/healthbar.rs b/examples/3d/healthbar.rs
index d66c504626220..ba540a307400c 100644
--- a/examples/3d/healthbar.rs
+++ b/examples/3d/healthbar.rs
@@ -93,41 +93,48 @@ fn setup_ui(mut commands: Commands, asset_server: Res<AssetServer>) {
         Name::from("Root Healthbar"),
         Node {
             position_type: PositionType::Absolute,
-            width: Val::Px(150.0),
-            height: Val::Px(65.0),
-            //flex_basis: Val::Percent(100.0),
-            align_self: AlignSelf::Stretch,
-            //justify_content: JustifyContent::Center,
-            //align_items: AlignItems::Center,
-            padding: UiRect::all(Val::Px(10.)),
+            justify_content: JustifyContent::Center,
+            align_items: AlignItems::Center,
+            justify_items: JustifyItems::Center,
             ..default()
         },
-        BackgroundColor(Color::srgb(0.1, 0.1, 0.1)),
         HealthBarRoot,
         children![(
             Node {
-                align_items: AlignItems::Stretch,
-                width: Val::Percent(100.),
-                //height: Val::Px(100.),
+                width: Val::Px(150.0),
+                height: Val::Px(65.0),
+                //flex_basis: Val::Percent(100.0),
+                //align_self: AlignSelf::Stretch,
+                padding: UiRect::all(Val::Px(10.)),
+                justify_self: JustifySelf::Center,
+                align_self: AlignSelf::Center,
                 ..default()
             },
-            BackgroundColor(Color::from(RED)),
+            BackgroundColor(Color::srgb(0.1, 0.1, 0.1)),
             children![(
-                Node::default(),
-                BackgroundColor(Color::from(GREEN)),
-                HealthBar
+                Node {
+                    align_items: AlignItems::Stretch,
+                    width: Val::Percent(100.),
+                    //height: Val::Px(100.),
+                    ..default()
+                },
+                BackgroundColor(Color::from(RED)),
+                children![(
+                    Node::default(),
+                    BackgroundColor(Color::from(GREEN)),
+                    HealthBar
+                )],
             )],
-        )],
-        // children![(
-        //     Text::new("42"),
-        //     TextFont {
-        //         font: font_handle.clone(),
-        //         font_size: 33.0,
-        //         ..default()
-        //     },
-        //     TextColor(Color::srgb(1.0, 1.0, 1.0)),
-        //     BackgroundColor(Color::srgba(0.9, 0.1, 0.1, 0.5)),
-        // )],
+        )], // children![(
+            //     Text::new("42"),
+            //     TextFont {
+            //         font: font_handle.clone(),
+            //         font_size: 33.0,
+            //         ..default()
+            //     },
+            //     TextColor(Color::srgb(1.0, 1.0, 1.0)),
+            //     BackgroundColor(Color::srgba(0.9, 0.1, 0.1, 0.5)),
+            // )],
     ));
 }
 

From 9a5cefb90327f5ccb24362e392ba8a654e8faef8 Mon Sep 17 00:00:00 2001
From: GitGhillie <jillisnoordhoek@gmail.com>
Date: Sat, 17 May 2025 12:36:22 +0200
Subject: [PATCH 05/22] Center and simplify

---
 Cargo.toml               |  1 -
 examples/3d/healthbar.rs | 54 +++++++++++-----------------------------
 2 files changed, 15 insertions(+), 40 deletions(-)

diff --git a/Cargo.toml b/Cargo.toml
index 4236fc450a2d2..9bcff9f908206 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -561,7 +561,6 @@ bevy_asset = { path = "crates/bevy_asset", version = "0.16.0-dev", default-featu
 bevy_reflect = { path = "crates/bevy_reflect", version = "0.16.0-dev", default-features = false }
 bevy_image = { path = "crates/bevy_image", version = "0.16.0-dev", default-features = false }
 bevy_gizmos = { path = "crates/bevy_gizmos", version = "0.16.0-dev", default-features = false }
-bevy_remote = { path = "crates/bevy_remote", version = "0.16.0-dev" } # todo remove this
 # Needed to poll Task examples
 futures-lite = "2.0.1"
 async-std = "1.13"
diff --git a/examples/3d/healthbar.rs b/examples/3d/healthbar.rs
index ba540a307400c..50f2485c5b00b 100644
--- a/examples/3d/healthbar.rs
+++ b/examples/3d/healthbar.rs
@@ -1,10 +1,12 @@
 //! A simple 3D scene with light shining over a cube sitting on a plane. (todo)
 
-use bevy::color::palettes::css::{GREEN, RED, YELLOW};
-use bevy::input::common_conditions::input_just_pressed;
+use bevy::color::palettes::css::{GREEN, RED};
 use bevy::prelude::*;
-use bevy_remote::http::RemoteHttpPlugin;
-use bevy_remote::RemotePlugin;
+
+const BAR_HEIGHT: f32 = 15.0;
+const BAR_WIDTH: f32 = 150.0;
+const HALF_BAR_HEIGHT: f32 = BAR_HEIGHT / 2.0;
+const HALF_BAR_WIDTH: f32 = BAR_WIDTH / 2.0;
 
 /// Marker for the health bar root UI node
 #[derive(Component)]
@@ -40,10 +42,7 @@ impl Movable {
 fn main() {
     App::new()
         .add_plugins(DefaultPlugins)
-        .add_plugins(RemotePlugin::default())
-        .add_plugins(RemoteHttpPlugin::default())
         .add_systems(Startup, (setup, setup_ui))
-        // .add_systems(Update, update_ui.run_if(input_just_pressed(MouseButton::Left)))
         .add_systems(Update, update_ui)
         .add_systems(Update, move_cube)
         .run();
@@ -86,32 +85,18 @@ fn setup(
 }
 
 /// todo comment
-fn setup_ui(mut commands: Commands, asset_server: Res<AssetServer>) {
-    // let font_handle = asset_server.load("fonts/FiraSans-Bold.ttf");
-
+fn setup_ui(mut commands: Commands) {
     commands.spawn((
         Name::from("Root Healthbar"),
         Node {
-            position_type: PositionType::Absolute,
-            justify_content: JustifyContent::Center,
-            align_items: AlignItems::Center,
-            justify_items: JustifyItems::Center,
+            width: Val::Px(BAR_WIDTH),
+            height: Val::Px(BAR_HEIGHT),
+            padding: UiRect::all(Val::Px(4.)),
+            display: Display::Flex,
             ..default()
         },
-        HealthBarRoot,
+        BackgroundColor(Color::srgb(0.1, 0.1, 0.1)),
         children![(
-            Node {
-                width: Val::Px(150.0),
-                height: Val::Px(65.0),
-                //flex_basis: Val::Percent(100.0),
-                //align_self: AlignSelf::Stretch,
-                padding: UiRect::all(Val::Px(10.)),
-                justify_self: JustifySelf::Center,
-                align_self: AlignSelf::Center,
-                ..default()
-            },
-            BackgroundColor(Color::srgb(0.1, 0.1, 0.1)),
-            children![(
                 Node {
                     align_items: AlignItems::Stretch,
                     width: Val::Percent(100.),
@@ -125,16 +110,7 @@ fn setup_ui(mut commands: Commands, asset_server: Res<AssetServer>) {
                     HealthBar
                 )],
             )],
-        )], // children![(
-            //     Text::new("42"),
-            //     TextFont {
-            //         font: font_handle.clone(),
-            //         font_size: 33.0,
-            //         ..default()
-            //     },
-            //     TextColor(Color::srgb(1.0, 1.0, 1.0)),
-            //     BackgroundColor(Color::srgba(0.9, 0.1, 0.1, 0.5)),
-            // )],
+        HealthBarRoot,
     ));
 }
 
@@ -154,8 +130,8 @@ fn update_ui(
         let viewport_position = camera
             .world_to_viewport(cam_transform, world_position)
             .unwrap();
-        health_bar_node.left = Val::Px(viewport_position.x);
-        health_bar_node.top = Val::Px(viewport_position.y);
+        health_bar_node.left = Val::Px(viewport_position.x - HALF_BAR_WIDTH);
+        health_bar_node.top = Val::Px(viewport_position.y - HALF_BAR_HEIGHT);
 
         let hp = (time.elapsed().as_secs_f32().sin() + 0.5) * 100.0;
         health_bar_child_query.width = Val::Percent(hp);

From ab19c0b872fa77b50104e5e0f26059835b7b701f Mon Sep 17 00:00:00 2001
From: GitGhillie <jillisnoordhoek@gmail.com>
Date: Sat, 17 May 2025 13:03:24 +0200
Subject: [PATCH 06/22] Use a single hp bar component

---
 examples/3d/healthbar.rs | 114 +++++++++++++++++++++------------------
 1 file changed, 61 insertions(+), 53 deletions(-)

diff --git a/examples/3d/healthbar.rs b/examples/3d/healthbar.rs
index 50f2485c5b00b..642acf02ca907 100644
--- a/examples/3d/healthbar.rs
+++ b/examples/3d/healthbar.rs
@@ -8,16 +8,13 @@ const BAR_WIDTH: f32 = 150.0;
 const HALF_BAR_HEIGHT: f32 = BAR_HEIGHT / 2.0;
 const HALF_BAR_WIDTH: f32 = BAR_WIDTH / 2.0;
 
-/// Marker for the health bar root UI node
 #[derive(Component)]
-struct HealthBarRoot;
-
-#[derive(Component)]
-struct HealthBar;
-
-/// Health bar should be moved above this entity (todo: use relations?)
-#[derive(Component)]
-struct HealthBarTarget;
+struct HealthBar {
+    /// The target entity that the health bar should follow
+    target: Entity,
+    /// The root UI node used to position the health bar
+    root_node: Entity,
+}
 
 // Define a struct to keep some information about our entity.
 // Here it's an arbitrary movement speed, the spawn location, and a maximum distance from it.
@@ -42,7 +39,7 @@ impl Movable {
 fn main() {
     App::new()
         .add_plugins(DefaultPlugins)
-        .add_systems(Startup, (setup, setup_ui))
+        .add_systems(Startup, setup)
         .add_systems(Update, update_ui)
         .add_systems(Update, move_cube)
         .run();
@@ -62,13 +59,14 @@ fn setup(
     ));
     // cube
     let entity_spawn = Vec3::new(0.0, 0.5, 0.0);
-    commands.spawn((
-        Mesh3d(meshes.add(Cuboid::new(1.0, 1.0, 1.0))),
-        MeshMaterial3d(materials.add(Color::srgb_u8(124, 144, 255))),
-        Transform::from_translation(entity_spawn),
-        HealthBarTarget,
-        Movable::new(entity_spawn),
-    ));
+    let cube_id = commands
+        .spawn((
+            Mesh3d(meshes.add(Cuboid::new(1.0, 1.0, 1.0))),
+            MeshMaterial3d(materials.add(Color::srgb_u8(124, 144, 255))),
+            Transform::from_translation(entity_spawn),
+            Movable::new(entity_spawn),
+        ))
+        .id();
     // light
     commands.spawn((
         PointLight {
@@ -82,59 +80,69 @@ fn setup(
         Camera3d::default(),
         Transform::from_xyz(-6.5, 2.5, 3.0).looking_at(Vec3::ZERO, Vec3::Y),
     ));
-}
 
-/// todo comment
-fn setup_ui(mut commands: Commands) {
-    commands.spawn((
-        Name::from("Root Healthbar"),
-        Node {
-            width: Val::Px(BAR_WIDTH),
-            height: Val::Px(BAR_HEIGHT),
-            padding: UiRect::all(Val::Px(4.)),
-            display: Display::Flex,
-            ..default()
-        },
-        BackgroundColor(Color::srgb(0.1, 0.1, 0.1)),
-        children![(
-                Node {
-                    align_items: AlignItems::Stretch,
-                    width: Val::Percent(100.),
-                    //height: Val::Px(100.),
-                    ..default()
-                },
-                BackgroundColor(Color::from(RED)),
-                children![(
-                    Node::default(),
-                    BackgroundColor(Color::from(GREEN)),
-                    HealthBar
-                )],
+    let health_bar_root = commands
+        .spawn((
+            Name::from("Root Healthbar"),
+            Node {
+                width: Val::Px(BAR_WIDTH),
+                height: Val::Px(BAR_HEIGHT),
+                padding: UiRect::all(Val::Px(4.)),
+                display: Display::Flex,
+                ..default()
+            },
+            BackgroundColor(Color::srgb(0.1, 0.1, 0.1)),
+            children![()],
+        ))
+        .id();
+
+    let health_bar_nodes = commands
+        .spawn((
+            Node {
+                align_items: AlignItems::Stretch,
+                width: Val::Percent(100.),
+                ..default()
+            },
+            BackgroundColor(Color::from(RED)),
+            children![(
+                Node::default(),
+                BackgroundColor(Color::from(GREEN)),
+                HealthBar {
+                    target: cube_id,
+                    root_node: health_bar_root,
+                }
             )],
-        HealthBarRoot,
-    ));
+        ))
+        .id();
+
+    commands.entity(health_bar_root).add_child(health_bar_nodes);
 }
 
 fn update_ui(
-    mut health_bar_query: Query<&mut Node, (With<HealthBarRoot>, Without<HealthBar>)>,
-    mut health_bar_child_query: Single<&mut Node, (With<HealthBar>, Without<HealthBarRoot>)>,
-    target_query: Single<&GlobalTransform, With<HealthBarTarget>>,
+    mut health_bar_query: Query<(&mut Node, &HealthBar)>,
+    mut health_bar_root_query: Query<&mut Node, Without<HealthBar>>,
+    target_query: Query<&GlobalTransform>,
     camera_query: Single<(&Camera, &GlobalTransform)>,
     time: Res<Time>,
 ) {
     let camera = camera_query.0;
     let cam_transform = camera_query.1;
 
-    let world_position = target_query.translation();
+    for (mut health_bar_node, health_bar_component) in health_bar_query.iter_mut() {
+        let mut root = health_bar_root_query
+            .get_mut(health_bar_component.root_node)
+            .unwrap();
+        let target = target_query.get(health_bar_component.target).unwrap();
+        let world_position = target.translation();
 
-    for mut health_bar_node in health_bar_query.iter_mut() {
         let viewport_position = camera
             .world_to_viewport(cam_transform, world_position)
             .unwrap();
-        health_bar_node.left = Val::Px(viewport_position.x - HALF_BAR_WIDTH);
-        health_bar_node.top = Val::Px(viewport_position.y - HALF_BAR_HEIGHT);
+        root.left = Val::Px(viewport_position.x - HALF_BAR_WIDTH);
+        root.top = Val::Px(viewport_position.y - HALF_BAR_HEIGHT);
 
         let hp = (time.elapsed().as_secs_f32().sin() + 0.5) * 100.0;
-        health_bar_child_query.width = Val::Percent(hp);
+        health_bar_node.width = Val::Percent(hp);
     }
 }
 

From 40eb025012380a090481385712195b37bb127daf Mon Sep 17 00:00:00 2001
From: GitGhillie <jillisnoordhoek@gmail.com>
Date: Sat, 17 May 2025 13:17:10 +0200
Subject: [PATCH 07/22] simplify

---
 examples/3d/healthbar.rs | 32 ++++++--------------------------
 1 file changed, 6 insertions(+), 26 deletions(-)

diff --git a/examples/3d/healthbar.rs b/examples/3d/healthbar.rs
index 642acf02ca907..35782cd610508 100644
--- a/examples/3d/healthbar.rs
+++ b/examples/3d/healthbar.rs
@@ -19,22 +19,7 @@ struct HealthBar {
 // Define a struct to keep some information about our entity.
 // Here it's an arbitrary movement speed, the spawn location, and a maximum distance from it.
 #[derive(Component)]
-struct Movable {
-    spawn: Vec3,
-    max_distance: f32,
-    speed: f32,
-}
-
-// Implement a utility function for easier Movable struct creation.
-impl Movable {
-    fn new(spawn: Vec3) -> Self {
-        Movable {
-            spawn,
-            max_distance: 5.0,
-            speed: 2.0,
-        }
-    }
-}
+struct Movable;
 
 fn main() {
     App::new()
@@ -64,7 +49,7 @@ fn setup(
             Mesh3d(meshes.add(Cuboid::new(1.0, 1.0, 1.0))),
             MeshMaterial3d(materials.add(Color::srgb_u8(124, 144, 255))),
             Transform::from_translation(entity_spawn),
-            Movable::new(entity_spawn),
+            Movable,
         ))
         .id();
     // light
@@ -146,14 +131,9 @@ fn update_ui(
     }
 }
 
-/// This system will move all Movable entities with a Transform
-fn move_cube(mut cubes: Query<(&mut Transform, &mut Movable)>, timer: Res<Time>) {
-    for (mut transform, mut cube) in &mut cubes {
-        // Check if the entity moved too far from its spawn, if so invert the moving direction.
-        if (cube.spawn - transform.translation).length() > cube.max_distance {
-            cube.speed *= -1.0;
-        }
-        let direction = transform.local_x();
-        transform.translation += direction * cube.speed * timer.delta_secs();
+fn move_cube(time: Res<Time>, mut movables: Query<&mut Transform, With<Movable>>) {
+    for mut transform in movables.iter_mut() {
+        transform.translation.x = time.elapsed_secs().sin() * 2.0;
+        transform.translation.z = time.elapsed_secs().cos() * 2.0;
     }
 }

From 36bae45f47c75723b454e5940ad098d8317ed8ac Mon Sep 17 00:00:00 2001
From: GitGhillie <jillisnoordhoek@gmail.com>
Date: Sat, 17 May 2025 14:36:37 +0200
Subject: [PATCH 08/22] Add a Health component

---
 examples/3d/healthbar.rs | 29 +++++++++++++++++++----------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/examples/3d/healthbar.rs b/examples/3d/healthbar.rs
index 35782cd610508..489a2a6e0b430 100644
--- a/examples/3d/healthbar.rs
+++ b/examples/3d/healthbar.rs
@@ -1,4 +1,4 @@
-//! A simple 3D scene with light shining over a cube sitting on a plane. (todo)
+//! A simple UI health bar which
 
 use bevy::color::palettes::css::{GREEN, RED};
 use bevy::prelude::*;
@@ -8,6 +8,9 @@ const BAR_WIDTH: f32 = 150.0;
 const HALF_BAR_HEIGHT: f32 = BAR_HEIGHT / 2.0;
 const HALF_BAR_WIDTH: f32 = BAR_WIDTH / 2.0;
 
+#[derive(Component)]
+struct Health(f32);
+
 #[derive(Component)]
 struct HealthBar {
     /// The target entity that the health bar should follow
@@ -25,7 +28,7 @@ fn main() {
     App::new()
         .add_plugins(DefaultPlugins)
         .add_systems(Startup, setup)
-        .add_systems(Update, update_ui)
+        .add_systems(Update, (update_health_bar, update_health))
         .add_systems(Update, move_cube)
         .run();
 }
@@ -50,6 +53,7 @@ fn setup(
             MeshMaterial3d(materials.add(Color::srgb_u8(124, 144, 255))),
             Transform::from_translation(entity_spawn),
             Movable,
+            Health(42.0),
         ))
         .id();
     // light
@@ -68,7 +72,6 @@ fn setup(
 
     let health_bar_root = commands
         .spawn((
-            Name::from("Root Healthbar"),
             Node {
                 width: Val::Px(BAR_WIDTH),
                 height: Val::Px(BAR_HEIGHT),
@@ -76,7 +79,7 @@ fn setup(
                 display: Display::Flex,
                 ..default()
             },
-            BackgroundColor(Color::srgb(0.1, 0.1, 0.1)),
+            BackgroundColor(Color::BLACK),
             children![()],
         ))
         .id();
@@ -103,12 +106,17 @@ fn setup(
     commands.entity(health_bar_root).add_child(health_bar_nodes);
 }
 
-fn update_ui(
+fn update_health(time: Res<Time>, mut health_query: Query<&mut Health>) {
+    for mut health in health_query.iter_mut() {
+        health.0 = (time.elapsed().as_secs_f32().sin() + 1.0) * 50.0;
+    }
+}
+
+fn update_health_bar(
     mut health_bar_query: Query<(&mut Node, &HealthBar)>,
     mut health_bar_root_query: Query<&mut Node, Without<HealthBar>>,
-    target_query: Query<&GlobalTransform>,
+    target_query: Query<(&GlobalTransform, &Health)>,
     camera_query: Single<(&Camera, &GlobalTransform)>,
-    time: Res<Time>,
 ) {
     let camera = camera_query.0;
     let cam_transform = camera_query.1;
@@ -117,7 +125,7 @@ fn update_ui(
         let mut root = health_bar_root_query
             .get_mut(health_bar_component.root_node)
             .unwrap();
-        let target = target_query.get(health_bar_component.target).unwrap();
+        let (target, target_health) = target_query.get(health_bar_component.target).unwrap();
         let world_position = target.translation();
 
         let viewport_position = camera
@@ -126,11 +134,12 @@ fn update_ui(
         root.left = Val::Px(viewport_position.x - HALF_BAR_WIDTH);
         root.top = Val::Px(viewport_position.y - HALF_BAR_HEIGHT);
 
-        let hp = (time.elapsed().as_secs_f32().sin() + 0.5) * 100.0;
-        health_bar_node.width = Val::Percent(hp);
+        health_bar_node.width = Val::Percent(target_health.0);
     }
 }
 
+// Some placeholder movement so that we can see that the
+// health bar is correctly following the cube around
 fn move_cube(time: Res<Time>, mut movables: Query<&mut Transform, With<Movable>>) {
     for mut transform in movables.iter_mut() {
         transform.translation.x = time.elapsed_secs().sin() * 2.0;

From caf7cb6761f7b7c0a112556f6fd76b9c641b86f8 Mon Sep 17 00:00:00 2001
From: GitGhillie <jillisnoordhoek@gmail.com>
Date: Sat, 17 May 2025 14:53:50 +0200
Subject: [PATCH 09/22] Simplify

---
 examples/3d/healthbar.rs | 43 ++++++++++++++++------------------------
 1 file changed, 17 insertions(+), 26 deletions(-)

diff --git a/examples/3d/healthbar.rs b/examples/3d/healthbar.rs
index 489a2a6e0b430..d9e714b17d36c 100644
--- a/examples/3d/healthbar.rs
+++ b/examples/3d/healthbar.rs
@@ -1,4 +1,6 @@
-//! A simple UI health bar which
+//! A simple UI health bar which follows an object around in 3D space.
+//! Using UI nodes is just one way to do this. Alternatively, you can use
+//! a mesh facing the camera to set up your health bar.
 
 use bevy::color::palettes::css::{GREEN, RED};
 use bevy::prelude::*;
@@ -19,17 +21,11 @@ struct HealthBar {
     root_node: Entity,
 }
 
-// Define a struct to keep some information about our entity.
-// Here it's an arbitrary movement speed, the spawn location, and a maximum distance from it.
-#[derive(Component)]
-struct Movable;
-
 fn main() {
     App::new()
         .add_plugins(DefaultPlugins)
         .add_systems(Startup, setup)
-        .add_systems(Update, (update_health_bar, update_health))
-        .add_systems(Update, move_cube)
+        .add_systems(Update, (update_health, update_health_bar, move_cube))
         .run();
 }
 
@@ -52,7 +48,6 @@ fn setup(
             Mesh3d(meshes.add(Cuboid::new(1.0, 1.0, 1.0))),
             MeshMaterial3d(materials.add(Color::srgb_u8(124, 144, 255))),
             Transform::from_translation(entity_spawn),
-            Movable,
             Health(42.0),
         ))
         .id();
@@ -69,7 +64,7 @@ fn setup(
         Camera3d::default(),
         Transform::from_xyz(-6.5, 2.5, 3.0).looking_at(Vec3::ZERO, Vec3::Y),
     ));
-
+    // Root component for the health bar, this one will be moved to follow the cube
     let health_bar_root = commands
         .spawn((
             Node {
@@ -80,7 +75,6 @@ fn setup(
                 ..default()
             },
             BackgroundColor(Color::BLACK),
-            children![()],
         ))
         .id();
 
@@ -91,15 +85,11 @@ fn setup(
                 width: Val::Percent(100.),
                 ..default()
             },
-            BackgroundColor(Color::from(RED)),
-            children![(
-                Node::default(),
-                BackgroundColor(Color::from(GREEN)),
-                HealthBar {
-                    target: cube_id,
-                    root_node: health_bar_root,
-                }
-            )],
+            HealthBar {
+                target: cube_id,
+                root_node: health_bar_root,
+            },
+            BackgroundColor(Color::from(GREEN)),
         ))
         .id();
 
@@ -126,13 +116,14 @@ fn update_health_bar(
             .get_mut(health_bar_component.root_node)
             .unwrap();
         let (target, target_health) = target_query.get(health_bar_component.target).unwrap();
-        let world_position = target.translation();
 
-        let viewport_position = camera
-            .world_to_viewport(cam_transform, world_position)
+        let target_world_position = target.translation();
+        let target_viewport_position = camera
+            .world_to_viewport(cam_transform, target_world_position)
             .unwrap();
-        root.left = Val::Px(viewport_position.x - HALF_BAR_WIDTH);
-        root.top = Val::Px(viewport_position.y - HALF_BAR_HEIGHT);
+
+        root.left = Val::Px(target_viewport_position.x - HALF_BAR_WIDTH);
+        root.top = Val::Px(target_viewport_position.y - HALF_BAR_HEIGHT);
 
         health_bar_node.width = Val::Percent(target_health.0);
     }
@@ -140,7 +131,7 @@ fn update_health_bar(
 
 // Some placeholder movement so that we can see that the
 // health bar is correctly following the cube around
-fn move_cube(time: Res<Time>, mut movables: Query<&mut Transform, With<Movable>>) {
+fn move_cube(time: Res<Time>, mut movables: Query<&mut Transform, With<Health>>) {
     for mut transform in movables.iter_mut() {
         transform.translation.x = time.elapsed_secs().sin() * 2.0;
         transform.translation.z = time.elapsed_secs().cos() * 2.0;

From e7a6987313283357512b15c3ad8088d65b20e0d3 Mon Sep 17 00:00:00 2001
From: GitGhillie <jillisnoordhoek@gmail.com>
Date: Sat, 17 May 2025 15:36:31 +0200
Subject: [PATCH 10/22] Add hp text

---
 examples/3d/healthbar.rs | 30 +++++++++++++++++++++---------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/examples/3d/healthbar.rs b/examples/3d/healthbar.rs
index d9e714b17d36c..f0ca9c3598782 100644
--- a/examples/3d/healthbar.rs
+++ b/examples/3d/healthbar.rs
@@ -5,7 +5,7 @@
 use bevy::color::palettes::css::{GREEN, RED};
 use bevy::prelude::*;
 
-const BAR_HEIGHT: f32 = 15.0;
+const BAR_HEIGHT: f32 = 25.0;
 const BAR_WIDTH: f32 = 150.0;
 const HALF_BAR_HEIGHT: f32 = BAR_HEIGHT / 2.0;
 const HALF_BAR_WIDTH: f32 = BAR_WIDTH / 2.0;
@@ -17,8 +17,7 @@ struct Health(f32);
 struct HealthBar {
     /// The target entity that the health bar should follow
     target: Entity,
-    /// The root UI node used to position the health bar
-    root_node: Entity,
+    health_text_entity: Entity,
 }
 
 fn main() {
@@ -34,6 +33,7 @@ fn setup(
     mut commands: Commands,
     mut meshes: ResMut<Assets<Mesh>>,
     mut materials: ResMut<Assets<StandardMaterial>>,
+    asset_server: Res<AssetServer>,
 ) {
     // circular base
     commands.spawn((
@@ -77,7 +77,16 @@ fn setup(
             BackgroundColor(Color::BLACK),
         ))
         .id();
-
+    
+    let health_text = commands
+        .spawn((
+            Text::new("42"),
+            TextFont {
+                font_size: 14.0,
+                ..default()
+            },
+        )).id();
+    
     let health_bar_nodes = commands
         .spawn((
             Node {
@@ -87,13 +96,13 @@ fn setup(
             },
             HealthBar {
                 target: cube_id,
-                root_node: health_bar_root,
+                health_text_entity: health_text,
             },
             BackgroundColor(Color::from(GREEN)),
         ))
         .id();
 
-    commands.entity(health_bar_root).add_child(health_bar_nodes);
+    commands.entity(health_bar_root).add_children(&[health_text, health_bar_nodes]);
 }
 
 fn update_health(time: Res<Time>, mut health_query: Query<&mut Health>) {
@@ -103,18 +112,20 @@ fn update_health(time: Res<Time>, mut health_query: Query<&mut Health>) {
 }
 
 fn update_health_bar(
-    mut health_bar_query: Query<(&mut Node, &HealthBar)>,
+    mut health_bar_query: Query<(&mut Node, &HealthBar, &ChildOf)>,
     mut health_bar_root_query: Query<&mut Node, Without<HealthBar>>,
+    mut health_bar_text_query: Query<&mut Text, Without<HealthBar>>,
     target_query: Query<(&GlobalTransform, &Health)>,
     camera_query: Single<(&Camera, &GlobalTransform)>,
 ) {
     let camera = camera_query.0;
     let cam_transform = camera_query.1;
 
-    for (mut health_bar_node, health_bar_component) in health_bar_query.iter_mut() {
+    for (mut health_bar_node, health_bar_component, child_of) in health_bar_query.iter_mut() {
         let mut root = health_bar_root_query
-            .get_mut(health_bar_component.root_node)
+            .get_mut(child_of.0)
             .unwrap();
+        let mut health_text = health_bar_text_query.get_mut(health_bar_component.health_text_entity).unwrap();
         let (target, target_health) = target_query.get(health_bar_component.target).unwrap();
 
         let target_world_position = target.translation();
@@ -126,6 +137,7 @@ fn update_health_bar(
         root.top = Val::Px(target_viewport_position.y - HALF_BAR_HEIGHT);
 
         health_bar_node.width = Val::Percent(target_health.0);
+        health_text.0 = format!("{:.0}", target_health.0);
     }
 }
 

From cd2f6fd60babb4e23499828e7331e1ed6f02e981 Mon Sep 17 00:00:00 2001
From: GitGhillie <jillisnoordhoek@gmail.com>
Date: Sat, 17 May 2025 16:33:07 +0200
Subject: [PATCH 11/22] Add color curve

---
 examples/3d/healthbar.rs | 57 ++++++++++++++++++++++++++++++----------
 1 file changed, 43 insertions(+), 14 deletions(-)

diff --git a/examples/3d/healthbar.rs b/examples/3d/healthbar.rs
index f0ca9c3598782..1f3a118b64d9f 100644
--- a/examples/3d/healthbar.rs
+++ b/examples/3d/healthbar.rs
@@ -3,6 +3,7 @@
 //! a mesh facing the camera to set up your health bar.
 
 use bevy::color::palettes::css::{GREEN, RED};
+use bevy::color::ColorCurve;
 use bevy::prelude::*;
 
 const BAR_HEIGHT: f32 = 25.0;
@@ -18,13 +19,14 @@ struct HealthBar {
     /// The target entity that the health bar should follow
     target: Entity,
     health_text_entity: Entity,
+    color_curve: ColorCurve<LinearRgba>,
 }
 
 fn main() {
     App::new()
         .add_plugins(DefaultPlugins)
         .add_systems(Startup, setup)
-        .add_systems(Update, (update_health, update_health_bar, move_cube))
+        .add_systems(Update, (update_health, update_health_bar))
         .run();
 }
 
@@ -33,7 +35,6 @@ fn setup(
     mut commands: Commands,
     mut meshes: ResMut<Assets<Mesh>>,
     mut materials: ResMut<Assets<StandardMaterial>>,
-    asset_server: Res<AssetServer>,
 ) {
     // circular base
     commands.spawn((
@@ -62,7 +63,7 @@ fn setup(
     // camera
     commands.spawn((
         Camera3d::default(),
-        Transform::from_xyz(-6.5, 2.5, 3.0).looking_at(Vec3::ZERO, Vec3::Y),
+        Transform::from_xyz(6.5, 2.5, 3.0).looking_at(Vec3::ZERO, Vec3::Y),
     ));
     // Root component for the health bar, this one will be moved to follow the cube
     let health_bar_root = commands
@@ -77,16 +78,33 @@ fn setup(
             BackgroundColor(Color::BLACK),
         ))
         .id();
-    
+
     let health_text = commands
         .spawn((
+            Node {
+                min_width: Val::Px(30.0),
+                margin: UiRect::left(Val::Px(2.0)),
+                ..default()
+            },
             Text::new("42"),
             TextFont {
                 font_size: 14.0,
                 ..default()
             },
-        )).id();
-    
+        ))
+        .id();
+
+    // Define the control points for the color curve.
+    // For more information, please see the cubic curve example.
+    let colors = [
+        LinearRgba::RED, // todo reconsider this
+        LinearRgba::RED,
+        LinearRgba::rgb(1., 1., 0.), // Yellow
+        LinearRgba::GREEN,
+    ];
+
+    let curve = ColorCurve::new(colors).unwrap();
+
     let health_bar_nodes = commands
         .spawn((
             Node {
@@ -97,12 +115,15 @@ fn setup(
             HealthBar {
                 target: cube_id,
                 health_text_entity: health_text,
+                color_curve: curve,
             },
             BackgroundColor(Color::from(GREEN)),
         ))
         .id();
 
-    commands.entity(health_bar_root).add_children(&[health_text, health_bar_nodes]);
+    commands
+        .entity(health_bar_root)
+        .add_children(&[health_text, health_bar_nodes]);
 }
 
 fn update_health(time: Res<Time>, mut health_query: Query<&mut Health>) {
@@ -112,7 +133,7 @@ fn update_health(time: Res<Time>, mut health_query: Query<&mut Health>) {
 }
 
 fn update_health_bar(
-    mut health_bar_query: Query<(&mut Node, &HealthBar, &ChildOf)>,
+    mut health_bar_query: Query<(&mut Node, &HealthBar, &ChildOf, &mut BackgroundColor)>,
     mut health_bar_root_query: Query<&mut Node, Without<HealthBar>>,
     mut health_bar_text_query: Query<&mut Text, Without<HealthBar>>,
     target_query: Query<(&GlobalTransform, &Health)>,
@@ -121,11 +142,13 @@ fn update_health_bar(
     let camera = camera_query.0;
     let cam_transform = camera_query.1;
 
-    for (mut health_bar_node, health_bar_component, child_of) in health_bar_query.iter_mut() {
-        let mut root = health_bar_root_query
-            .get_mut(child_of.0)
+    for (mut health_bar_node, health_bar_component, child_of, mut bg_color) in
+        health_bar_query.iter_mut()
+    {
+        let mut root = health_bar_root_query.get_mut(child_of.0).unwrap();
+        let mut health_text = health_bar_text_query
+            .get_mut(health_bar_component.health_text_entity)
             .unwrap();
-        let mut health_text = health_bar_text_query.get_mut(health_bar_component.health_text_entity).unwrap();
         let (target, target_health) = target_query.get(health_bar_component.target).unwrap();
 
         let target_world_position = target.translation();
@@ -136,8 +159,14 @@ fn update_health_bar(
         root.left = Val::Px(target_viewport_position.x - HALF_BAR_WIDTH);
         root.top = Val::Px(target_viewport_position.y - HALF_BAR_HEIGHT);
 
-        health_bar_node.width = Val::Percent(target_health.0);
-        health_text.0 = format!("{:.0}", target_health.0);
+        let hp = target_health.0;
+
+        // todo: the width exceeds the current width, so it doesn't seem to be doing much close to 100 hp.
+        health_bar_node.width = Val::Percent(hp);
+        health_text.0 = format!("{:.0}", hp);
+
+        let color_curve = &health_bar_component.color_curve;
+        bg_color.0 = color_curve.sample_clamped(hp / (25.0)).into();
     }
 }
 

From ee713b13a998e1afc64439642ba86888ec4f9c2f Mon Sep 17 00:00:00 2001
From: GitGhillie <jillisnoordhoek@gmail.com>
Date: Sun, 1 Jun 2025 13:02:16 +0200
Subject: [PATCH 12/22] Fix comments

---
 examples/3d/healthbar.rs | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/3d/healthbar.rs b/examples/3d/healthbar.rs
index 1f3a118b64d9f..f1427057abf89 100644
--- a/examples/3d/healthbar.rs
+++ b/examples/3d/healthbar.rs
@@ -26,7 +26,7 @@ fn main() {
     App::new()
         .add_plugins(DefaultPlugins)
         .add_systems(Startup, setup)
-        .add_systems(Update, (update_health, update_health_bar))
+        .add_systems(Update, (update_health, update_health_bar, move_cube))
         .run();
 }
 
@@ -97,7 +97,7 @@ fn setup(
     // Define the control points for the color curve.
     // For more information, please see the cubic curve example.
     let colors = [
-        LinearRgba::RED, // todo reconsider this
+        LinearRgba::RED,
         LinearRgba::RED,
         LinearRgba::rgb(1., 1., 0.), // Yellow
         LinearRgba::GREEN,
@@ -161,7 +161,7 @@ fn update_health_bar(
 
         let hp = target_health.0;
 
-        // todo: the width exceeds the current width, so it doesn't seem to be doing much close to 100 hp.
+        // todo: A width beyond roughly 90% doesn't seem to make a difference
         health_bar_node.width = Val::Percent(hp);
         health_text.0 = format!("{:.0}", hp);
 

From 532accd1e6e07a1c9b9307b58c5801c6fd33b69b Mon Sep 17 00:00:00 2001
From: GitGhillie <jillisnoordhoek@gmail.com>
Date: Sun, 1 Jun 2025 13:08:21 +0200
Subject: [PATCH 13/22] move to usage folder

---
 examples/{3d => usage}/healthbar.rs | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename examples/{3d => usage}/healthbar.rs (100%)

diff --git a/examples/3d/healthbar.rs b/examples/usage/healthbar.rs
similarity index 100%
rename from examples/3d/healthbar.rs
rename to examples/usage/healthbar.rs

From 0e65c9062da490b131d355874902618acee89b43 Mon Sep 17 00:00:00 2001
From: GitGhillie <jillisnoordhoek@gmail.com>
Date: Sun, 1 Jun 2025 14:12:06 +0200
Subject: [PATCH 14/22] Better comments

---
 Cargo.toml                  |  2 +-
 examples/usage/healthbar.rs | 31 +++++++++++++++----------------
 2 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/Cargo.toml b/Cargo.toml
index 49f4edd9d1cb4..c35a3dcbff023 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -979,7 +979,7 @@ wasm = true
 
 [[example]]
 name = "healthbar"
-path = "examples/3d/healthbar.rs"
+path = "examples/usage/healthbar.rs"
 doc-scrape-examples = true
 
 [package.metadata.example.healthbar]
diff --git a/examples/usage/healthbar.rs b/examples/usage/healthbar.rs
index f1427057abf89..efcae3f77ffcf 100644
--- a/examples/usage/healthbar.rs
+++ b/examples/usage/healthbar.rs
@@ -30,7 +30,7 @@ fn main() {
         .run();
 }
 
-/// set up a simple 3D scene
+/// set up a 3D scene where the cube will have a health bar
 fn setup(
     mut commands: Commands,
     mut meshes: ResMut<Assets<Mesh>>,
@@ -42,16 +42,6 @@ fn setup(
         MeshMaterial3d(materials.add(Color::WHITE)),
         Transform::from_rotation(Quat::from_rotation_x(-std::f32::consts::FRAC_PI_2)),
     ));
-    // cube
-    let entity_spawn = Vec3::new(0.0, 0.5, 0.0);
-    let cube_id = commands
-        .spawn((
-            Mesh3d(meshes.add(Cuboid::new(1.0, 1.0, 1.0))),
-            MeshMaterial3d(materials.add(Color::srgb_u8(124, 144, 255))),
-            Transform::from_translation(entity_spawn),
-            Health(42.0),
-        ))
-        .id();
     // light
     commands.spawn((
         PointLight {
@@ -65,6 +55,15 @@ fn setup(
         Camera3d::default(),
         Transform::from_xyz(6.5, 2.5, 3.0).looking_at(Vec3::ZERO, Vec3::Y),
     ));
+    // cube with a health component
+    let cube_id = commands
+        .spawn((
+            Mesh3d(meshes.add(Cuboid::new(1.0, 1.0, 1.0))),
+            MeshMaterial3d(materials.add(Color::srgb_u8(124, 144, 255))),
+            Transform::from_xyz(0.0, 0.5, 0.0),
+            Health(42.0),
+        ))
+        .id();
     // Root component for the health bar, this one will be moved to follow the cube
     let health_bar_root = commands
         .spawn((
@@ -103,8 +102,6 @@ fn setup(
         LinearRgba::GREEN,
     ];
 
-    let curve = ColorCurve::new(colors).unwrap();
-
     let health_bar_nodes = commands
         .spawn((
             Node {
@@ -115,7 +112,7 @@ fn setup(
             HealthBar {
                 target: cube_id,
                 health_text_entity: health_text,
-                color_curve: curve,
+                color_curve: ColorCurve::new(colors).unwrap(),
             },
             BackgroundColor(Color::from(GREEN)),
         ))
@@ -126,6 +123,7 @@ fn setup(
         .add_children(&[health_text, health_bar_nodes]);
 }
 
+// Some placeholder system to affect the health in this example.
 fn update_health(time: Res<Time>, mut health_query: Query<&mut Health>) {
     for mut health in health_query.iter_mut() {
         health.0 = (time.elapsed().as_secs_f32().sin() + 1.0) * 50.0;
@@ -163,10 +161,11 @@ fn update_health_bar(
 
         // todo: A width beyond roughly 90% doesn't seem to make a difference
         health_bar_node.width = Val::Percent(hp);
-        health_text.0 = format!("{:.0}", hp);
+        health_text.0 = format!("{:.0}", hp); // Only show rounded numbers
 
         let color_curve = &health_bar_component.color_curve;
-        bg_color.0 = color_curve.sample_clamped(hp / (25.0)).into();
+        let t = hp * 4.0 / (100.0); // 4 is the number of colors, 100 is the max health
+        bg_color.0 = color_curve.sample_clamped(t).into();
     }
 }
 

From 93d145a83a30ecb0e7883f4705090ddd5430fb63 Mon Sep 17 00:00:00 2001
From: GitGhillie <jillisnoordhoek@gmail.com>
Date: Sun, 1 Jun 2025 14:20:39 +0200
Subject: [PATCH 15/22] Remove unused import

---
 examples/usage/healthbar.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/usage/healthbar.rs b/examples/usage/healthbar.rs
index efcae3f77ffcf..d678f65784146 100644
--- a/examples/usage/healthbar.rs
+++ b/examples/usage/healthbar.rs
@@ -2,7 +2,7 @@
 //! Using UI nodes is just one way to do this. Alternatively, you can use
 //! a mesh facing the camera to set up your health bar.
 
-use bevy::color::palettes::css::{GREEN, RED};
+use bevy::color::palettes::css::GREEN;
 use bevy::color::ColorCurve;
 use bevy::prelude::*;
 

From c8c5389a5edaeb0c41a82cab483717ca20c90db1 Mon Sep 17 00:00:00 2001
From: GitGhillie <jillisnoordhoek@gmail.com>
Date: Sun, 1 Jun 2025 14:33:11 +0200
Subject: [PATCH 16/22] Move together with other usage example

---
 Cargo.toml | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/Cargo.toml b/Cargo.toml
index c35a3dcbff023..6931f796966ce 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -977,17 +977,6 @@ description = "A scene showcasing pbr atmospheric scattering"
 category = "3D Rendering"
 wasm = true
 
-[[example]]
-name = "healthbar"
-path = "examples/usage/healthbar.rs"
-doc-scrape-examples = true
-
-[package.metadata.example.healthbar]
-name = "Healthbar"
-description = "A scene showcasing world-to-viewport UI"
-category = "3D Rendering"
-wasm = true
-
 [[example]]
 name = "fog"
 path = "examples/3d/fog.rs"
@@ -4412,3 +4401,14 @@ name = "Cooldown"
 description = "Example for cooldown on button clicks"
 category = "Usage"
 wasm = true
+
+[[example]]
+name = "healthbar"
+path = "examples/usage/healthbar.rs"
+doc-scrape-examples = true
+
+[package.metadata.example.healthbar]
+name = "Healthbar"
+description = "A scene showcasing world-to-viewport UI"
+category = "Usage"
+wasm = true

From de14c084298bc2079862eca1011b888bda679764 Mon Sep 17 00:00:00 2001
From: GitGhillie <jillisnoordhoek@gmail.com>
Date: Sun, 1 Jun 2025 14:39:23 +0200
Subject: [PATCH 17/22] per ci

---
 examples/README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/examples/README.md b/examples/README.md
index 4f5030563aa7d..265c1c5e827fa 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -580,6 +580,7 @@ Example | Description
 --- | ---
 [Context Menu](../examples/usages/context_menu.rs) | Example of a context menu
 [Cooldown](../examples/usage/cooldown.rs) | Example for cooldown on button clicks
+[Healthbar](../examples/usage/healthbar.rs) | A scene showcasing world-to-viewport UI
 
 ## Window
 

From 3a1bb567a399add648019632ba5cbd3c54c3ae52 Mon Sep 17 00:00:00 2001
From: GitGhillie <jillisnoordhoek@gmail.com>
Date: Sun, 1 Jun 2025 19:21:12 +0200
Subject: [PATCH 18/22] Use bevy_math sin/cos

---
 examples/usage/healthbar.rs | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/examples/usage/healthbar.rs b/examples/usage/healthbar.rs
index d678f65784146..2af9ed431671b 100644
--- a/examples/usage/healthbar.rs
+++ b/examples/usage/healthbar.rs
@@ -5,6 +5,7 @@
 use bevy::color::palettes::css::GREEN;
 use bevy::color::ColorCurve;
 use bevy::prelude::*;
+use bevy::math::ops::{sin, cos};
 
 const BAR_HEIGHT: f32 = 25.0;
 const BAR_WIDTH: f32 = 150.0;
@@ -126,7 +127,7 @@ fn setup(
 // Some placeholder system to affect the health in this example.
 fn update_health(time: Res<Time>, mut health_query: Query<&mut Health>) {
     for mut health in health_query.iter_mut() {
-        health.0 = (time.elapsed().as_secs_f32().sin() + 1.0) * 50.0;
+        health.0 = (sin(time.elapsed().as_secs_f32()) + 1.0) * 50.0;
     }
 }
 
@@ -173,7 +174,7 @@ fn update_health_bar(
 // health bar is correctly following the cube around
 fn move_cube(time: Res<Time>, mut movables: Query<&mut Transform, With<Health>>) {
     for mut transform in movables.iter_mut() {
-        transform.translation.x = time.elapsed_secs().sin() * 2.0;
-        transform.translation.z = time.elapsed_secs().cos() * 2.0;
+        transform.translation.x = sin(time.elapsed_secs()) * 2.0;
+        transform.translation.z = cos(time.elapsed_secs()) * 2.0;
     }
 }

From 670732955d4ab586d2b175645b8b9690251e86df Mon Sep 17 00:00:00 2001
From: GitGhillie <jillisnoordhoek@gmail.com>
Date: Sun, 1 Jun 2025 20:52:30 +0200
Subject: [PATCH 19/22] Text above bar but inside box

---
 examples/usage/healthbar.rs | 23 ++++++++++-------------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/examples/usage/healthbar.rs b/examples/usage/healthbar.rs
index 2af9ed431671b..f4349489e7db0 100644
--- a/examples/usage/healthbar.rs
+++ b/examples/usage/healthbar.rs
@@ -2,7 +2,7 @@
 //! Using UI nodes is just one way to do this. Alternatively, you can use
 //! a mesh facing the camera to set up your health bar.
 
-use bevy::color::palettes::css::GREEN;
+use bevy::color::palettes::css::{GREEN, RED};
 use bevy::color::ColorCurve;
 use bevy::prelude::*;
 use bevy::math::ops::{sin, cos};
@@ -70,9 +70,9 @@ fn setup(
         .spawn((
             Node {
                 width: Val::Px(BAR_WIDTH),
-                height: Val::Px(BAR_HEIGHT),
+                height: Val::Px(2.0 * BAR_HEIGHT),
                 padding: UiRect::all(Val::Px(4.)),
-                display: Display::Flex,
+                flex_direction: FlexDirection::Column,
                 ..default()
             },
             BackgroundColor(Color::BLACK),
@@ -81,16 +81,13 @@ fn setup(
 
     let health_text = commands
         .spawn((
-            Node {
-                min_width: Val::Px(30.0),
-                margin: UiRect::left(Val::Px(2.0)),
-                ..default()
-            },
+            Node::default(),
             Text::new("42"),
             TextFont {
                 font_size: 14.0,
                 ..default()
             },
+            //BackgroundColor(RED.into()),
         ))
         .id();
 
@@ -103,11 +100,12 @@ fn setup(
         LinearRgba::GREEN,
     ];
 
-    let health_bar_nodes = commands
+    let health_bar_node = commands
         .spawn((
             Node {
                 align_items: AlignItems::Stretch,
                 width: Val::Percent(100.),
+                height: Val::Px(BAR_HEIGHT),
                 ..default()
             },
             HealthBar {
@@ -121,7 +119,7 @@ fn setup(
 
     commands
         .entity(health_bar_root)
-        .add_children(&[health_text, health_bar_nodes]);
+        .add_children(&[health_text,health_bar_node]);
 }
 
 // Some placeholder system to affect the health in this example.
@@ -159,10 +157,9 @@ fn update_health_bar(
         root.top = Val::Px(target_viewport_position.y - HALF_BAR_HEIGHT);
 
         let hp = target_health.0;
-
-        // todo: A width beyond roughly 90% doesn't seem to make a difference
+        
         health_bar_node.width = Val::Percent(hp);
-        health_text.0 = format!("{:.0}", hp); // Only show rounded numbers
+        health_text.0 = format!("Health: {:.0}/100", hp); // Only show rounded numbers
 
         let color_curve = &health_bar_component.color_curve;
         let t = hp * 4.0 / (100.0); // 4 is the number of colors, 100 is the max health

From 078983403f8429dbefced008805ea6d92ffd3816 Mon Sep 17 00:00:00 2001
From: GitGhillie <jillisnoordhoek@gmail.com>
Date: Sun, 1 Jun 2025 21:33:36 +0200
Subject: [PATCH 20/22] Health text above the bar

---
 examples/usage/healthbar.rs | 58 ++++++++++++++++++++++---------------
 1 file changed, 34 insertions(+), 24 deletions(-)

diff --git a/examples/usage/healthbar.rs b/examples/usage/healthbar.rs
index f4349489e7db0..e9926fe248b9d 100644
--- a/examples/usage/healthbar.rs
+++ b/examples/usage/healthbar.rs
@@ -2,13 +2,13 @@
 //! Using UI nodes is just one way to do this. Alternatively, you can use
 //! a mesh facing the camera to set up your health bar.
 
-use bevy::color::palettes::css::{GREEN, RED};
+use bevy::color::palettes::basic::{BLACK, GREEN};
 use bevy::color::ColorCurve;
+use bevy::math::ops::{cos, sin};
 use bevy::prelude::*;
-use bevy::math::ops::{sin, cos};
 
 const BAR_HEIGHT: f32 = 25.0;
-const BAR_WIDTH: f32 = 150.0;
+const BAR_WIDTH: f32 = 160.0;
 const HALF_BAR_HEIGHT: f32 = BAR_HEIGHT / 2.0;
 const HALF_BAR_WIDTH: f32 = BAR_WIDTH / 2.0;
 
@@ -20,6 +20,7 @@ struct HealthBar {
     /// The target entity that the health bar should follow
     target: Entity,
     health_text_entity: Entity,
+    root_ui_entity: Entity,
     color_curve: ColorCurve<LinearRgba>,
 }
 
@@ -67,16 +68,10 @@ fn setup(
         .id();
     // Root component for the health bar, this one will be moved to follow the cube
     let health_bar_root = commands
-        .spawn((
-            Node {
-                width: Val::Px(BAR_WIDTH),
-                height: Val::Px(2.0 * BAR_HEIGHT),
-                padding: UiRect::all(Val::Px(4.)),
-                flex_direction: FlexDirection::Column,
-                ..default()
-            },
-            BackgroundColor(Color::BLACK),
-        ))
+        .spawn((Node {
+            flex_direction: FlexDirection::Column,
+            ..default()
+        },))
         .id();
 
     let health_text = commands
@@ -87,7 +82,17 @@ fn setup(
                 font_size: 14.0,
                 ..default()
             },
-            //BackgroundColor(RED.into()),
+        ))
+        .id();
+
+    let health_bar_background = commands
+        .spawn((
+            Node {
+                width: Val::Px(BAR_WIDTH),
+                height: Val::Px(BAR_HEIGHT),
+                ..default()
+            },
+            BackgroundColor(BLACK.into()),
         ))
         .id();
 
@@ -106,11 +111,13 @@ fn setup(
                 align_items: AlignItems::Stretch,
                 width: Val::Percent(100.),
                 height: Val::Px(BAR_HEIGHT),
+                border: UiRect::all(Val::Px(4.)),
                 ..default()
             },
             HealthBar {
                 target: cube_id,
                 health_text_entity: health_text,
+                root_ui_entity: health_bar_root,
                 color_curve: ColorCurve::new(colors).unwrap(),
             },
             BackgroundColor(Color::from(GREEN)),
@@ -119,7 +126,11 @@ fn setup(
 
     commands
         .entity(health_bar_root)
-        .add_children(&[health_text,health_bar_node]);
+        .add_children(&[health_text, health_bar_background]);
+
+    commands
+        .entity(health_bar_background)
+        .add_child(health_bar_node);
 }
 
 // Some placeholder system to affect the health in this example.
@@ -130,7 +141,7 @@ fn update_health(time: Res<Time>, mut health_query: Query<&mut Health>) {
 }
 
 fn update_health_bar(
-    mut health_bar_query: Query<(&mut Node, &HealthBar, &ChildOf, &mut BackgroundColor)>,
+    mut health_bar_query: Query<(&mut Node, &HealthBar, &mut BackgroundColor)>,
     mut health_bar_root_query: Query<&mut Node, Without<HealthBar>>,
     mut health_bar_text_query: Query<&mut Text, Without<HealthBar>>,
     target_query: Query<(&GlobalTransform, &Health)>,
@@ -139,10 +150,9 @@ fn update_health_bar(
     let camera = camera_query.0;
     let cam_transform = camera_query.1;
 
-    for (mut health_bar_node, health_bar_component, child_of, mut bg_color) in
-        health_bar_query.iter_mut()
-    {
-        let mut root = health_bar_root_query.get_mut(child_of.0).unwrap();
+    for (mut health_bar_node, health_bar_component, mut bg_color) in health_bar_query.iter_mut() {
+        let root_entity = health_bar_component.root_ui_entity;
+        let mut root_node = health_bar_root_query.get_mut(root_entity).unwrap();
         let mut health_text = health_bar_text_query
             .get_mut(health_bar_component.health_text_entity)
             .unwrap();
@@ -153,13 +163,13 @@ fn update_health_bar(
             .world_to_viewport(cam_transform, target_world_position)
             .unwrap();
 
-        root.left = Val::Px(target_viewport_position.x - HALF_BAR_WIDTH);
-        root.top = Val::Px(target_viewport_position.y - HALF_BAR_HEIGHT);
+        root_node.left = Val::Px(target_viewport_position.x - HALF_BAR_WIDTH);
+        root_node.top = Val::Px(target_viewport_position.y - HALF_BAR_HEIGHT);
 
         let hp = target_health.0;
-        
+
         health_bar_node.width = Val::Percent(hp);
-        health_text.0 = format!("Health: {:.0}/100", hp); // Only show rounded numbers
+        health_text.0 = format!("Health: {:.0} / 100", hp); // Only show rounded numbers
 
         let color_curve = &health_bar_component.color_curve;
         let t = hp * 4.0 / (100.0); // 4 is the number of colors, 100 is the max health

From b35a5620f0027ff5462834a4f9d3e551a14b7d7a Mon Sep 17 00:00:00 2001
From: GitGhillie <jillisnoordhoek@gmail.com>
Date: Sat, 7 Jun 2025 13:21:15 +0200
Subject: [PATCH 21/22] Fix system ordering

---
 examples/usage/healthbar.rs | 38 ++++++++++++++++++++++++++++++-------
 1 file changed, 31 insertions(+), 7 deletions(-)

diff --git a/examples/usage/healthbar.rs b/examples/usage/healthbar.rs
index e9926fe248b9d..ac645d42989ce 100644
--- a/examples/usage/healthbar.rs
+++ b/examples/usage/healthbar.rs
@@ -6,6 +6,8 @@ use bevy::color::palettes::basic::{BLACK, GREEN};
 use bevy::color::ColorCurve;
 use bevy::math::ops::{cos, sin};
 use bevy::prelude::*;
+use bevy::transform::plugins::TransformSystems;
+use bevy::ui::UiSystems;
 
 const BAR_HEIGHT: f32 = 25.0;
 const BAR_WIDTH: f32 = 160.0;
@@ -28,7 +30,16 @@ fn main() {
     App::new()
         .add_plugins(DefaultPlugins)
         .add_systems(Startup, setup)
-        .add_systems(Update, (update_health, update_health_bar, move_cube))
+        .add_systems(Update, (move_cube, update_health).chain())
+        .add_systems(
+            // Bevy's UI Layout happens before transform propagation,
+            // so we will have to run update_health_bar before both
+            // and do the transform propagation manually.
+            PostUpdate,
+            update_health_bar
+                .before(TransformSystems::Propagate)
+                .before(UiSystems::Layout),
+        )
         .run();
 }
 
@@ -144,11 +155,19 @@ fn update_health_bar(
     mut health_bar_query: Query<(&mut Node, &HealthBar, &mut BackgroundColor)>,
     mut health_bar_root_query: Query<&mut Node, Without<HealthBar>>,
     mut health_bar_text_query: Query<&mut Text, Without<HealthBar>>,
-    target_query: Query<(&GlobalTransform, &Health)>,
-    camera_query: Single<(&Camera, &GlobalTransform)>,
+    target_query: Query<(Entity, &Health)>,
+    camera_query: Single<(Entity, &Camera)>,
+    transform_helper: TransformHelper,
 ) {
-    let camera = camera_query.0;
-    let cam_transform = camera_query.1;
+    let camera_entity = camera_query.0;
+    let camera = camera_query.1;
+
+    // Since the global transform is not propagated at this point (see system ordering comment),
+    // we will calculate the global transform manually:
+    let Ok(camera_transform) = transform_helper.compute_global_transform(camera_entity) else {
+        warn!("Failed computing global transform for camera Entity");
+        return;
+    };
 
     for (mut health_bar_node, health_bar_component, mut bg_color) in health_bar_query.iter_mut() {
         let root_entity = health_bar_component.root_ui_entity;
@@ -158,9 +177,14 @@ fn update_health_bar(
             .unwrap();
         let (target, target_health) = target_query.get(health_bar_component.target).unwrap();
 
-        let target_world_position = target.translation();
+        let Ok(target_world_transform) = transform_helper.compute_global_transform(target) else {
+            warn!("Failed computing global transform for target Entity");
+            return;
+        };
+        let target_world_position = target_world_transform.translation();
+
         let target_viewport_position = camera
-            .world_to_viewport(cam_transform, target_world_position)
+            .world_to_viewport(&camera_transform, target_world_position)
             .unwrap();
 
         root_node.left = Val::Px(target_viewport_position.x - HALF_BAR_WIDTH);

From 42b71625bfbcb72f252fb612165ee9416cbed54f Mon Sep 17 00:00:00 2001
From: GitGhillie <jillisnoordhoek@gmail.com>
Date: Sat, 7 Jun 2025 13:30:14 +0200
Subject: [PATCH 22/22] Add text shadow

---
 examples/usage/healthbar.rs | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/examples/usage/healthbar.rs b/examples/usage/healthbar.rs
index ac645d42989ce..043a1acfc9e1c 100644
--- a/examples/usage/healthbar.rs
+++ b/examples/usage/healthbar.rs
@@ -93,6 +93,10 @@ fn setup(
                 font_size: 14.0,
                 ..default()
             },
+            TextShadow {
+                offset: Vec2::splat(2.0),
+                color: BLACK.into(),
+            },
         ))
         .id();