Move speedo to UI layer

daniel-thompson · Jan 20, 2024 · f72f410 · f72f410
1 parent bbadc4b
commit f72f410
Showing 1 changed file with 116 additions and 47 deletions.
diff --git a/src/main.rs b/src/main.rs
@@ -98,6 +98,7 @@ fn main() {
                     .after(handle_keyboard)
                     .after(handle_ai_players),
                 apply_time_penalties,
+                update_speedo,
             ),
         )
         .run();
@@ -109,9 +110,6 @@ struct Player;
 #[derive(Component, Debug)]
 struct Speedometer;
 
-#[derive(Component, Debug)]
-struct SpeedoNeedle;
-
 #[derive(Component, Debug, Default)]
 struct Racer {
     penalty: f32,
@@ -277,35 +275,116 @@ fn spawn_player(
         },
     ));
 
-    let handle = asset_server.load("embedded://tdr2024/assets/speeddial.png");
-    let atlas = TextureAtlas::from_grid(handle, Vec2::new(196., 196.), 1, 1, None, None);
-    commands.spawn((
-        Speedometer,
-        SpriteSheetBundle {
-            texture_atlas: texture_atlas.add(atlas),
-            transform: Transform {
-                translation: Vec3::new(0.0, -200.0, 3.0),
-                scale: Vec3::splat(1.),
+    let dial = asset_server.load("embedded://tdr2024/assets/speeddial.png");
+    let needle = asset_server.load("embedded://tdr2024/assets/speedneedle.png");
+
+    commands
+        .spawn(NodeBundle {
+            style: Style {
+                width: Val::Percent(100.0),
+                height: Val::Percent(100.0),
+                justify_content: JustifyContent::SpaceBetween,
                 ..default()
             },
             ..default()
-        },
-    ));
-
-    let handle = asset_server.load("embedded://tdr2024/assets/speedneedle.png");
-    let atlas = TextureAtlas::from_grid(handle, Vec2::new(196., 196.), 1, 1, None, None);
-    commands.spawn((
-        SpeedoNeedle,
-        SpriteSheetBundle {
-            texture_atlas: texture_atlas.add(atlas),
-            transform: Transform {
-                translation: Vec3::new(0.0, -200.0, 4.0),
-                scale: Vec3::splat(1.),
+        })
+        .with_children(|parent| {
+            parent.spawn((
+                NodeBundle {
+                    style: Style {
+                        width: Val::Px(196.0),
+                        height: Val::Px(196.0),
+                        margin: UiRect::top(Val::VMin(5.)),
+                        ..default()
+                    },
+                    ..default()
+                },
+                UiImage::new(dial),
+            ));
+        })
+        .with_children(|parent| {
+            parent.spawn((
+                NodeBundle {
+                    style: Style {
+                        width: Val::Px(196.0),
+                        height: Val::Px(196.0),
+                        margin: UiRect::top(Val::VMin(5.)),
+                        ..default()
+                    },
+                    ..default()
+                },
+                UiImage::new(needle),
+            ));
+        });
+
+    commands
+        .spawn(NodeBundle {
+            style: Style {
+                width: Val::Percent(100.0),
+                height: Val::Percent(100.0),
+                left: Val::Percent(-40.0),
+                bottom: Val::Percent(-70.0),
                 ..default()
             },
             ..default()
-        },
-    ));
+        })
+        .with_children(|parent| {
+            parent
+                .spawn(NodeBundle {
+                    style: Style {
+                        width: Val::Percent(100.0),
+                        position_type: PositionType::Absolute,
+                        justify_content: JustifyContent::Center,
+                        align_items: AlignItems::FlexStart,
+                        ..default()
+                    },
+                    ..default()
+                })
+                .with_children(|parent| {
+                    parent.spawn((
+                        NodeBundle {
+                            style: Style {
+                                width: Val::VMax(100.0 * 256.0 / 1920.0),
+                                height: Val::VMax(100.0 * 256.0 / 1920.0),
+                                ..default()
+                            },
+                            background_color: Color::WHITE.into(),
+                            ..default()
+                        },
+                        UiImage::new(asset_server.load("embedded://tdr2024/assets/speeddial.png")),
+                    ));
+                });
+        })
+        .with_children(|parent| {
+            parent
+                .spawn(NodeBundle {
+                    style: Style {
+                        width: Val::Percent(100.0),
+                        position_type: PositionType::Absolute,
+                        justify_content: JustifyContent::Center,
+                        align_items: AlignItems::FlexStart,
+                        ..default()
+                    },
+                    ..default()
+                })
+                .with_children(|parent| {
+                    parent.spawn((
+                        Speedometer,
+                        NodeBundle {
+                            style: Style {
+                                width: Val::VMax(100.0 * 256.0 / 1920.0),
+                                height: Val::VMax(100.0 * 256.0 / 1920.0),
+                                ..default()
+                            },
+                            background_color: Color::WHITE.into(),
+                            ..default()
+                        },
+                        UiImage::new(
+                            asset_server.load("embedded://tdr2024/assets/speedneedle.png"),
+                        ),
+                    ));
+                });
+        });
 }
 
 fn spawn_ai_players(
@@ -663,31 +742,21 @@ fn handle_ai_players(
     }
 }
 
+fn update_speedo(
+    player: Query<(&Velocity, With<Player>)>,
+    mut speedo: Query<(&mut Transform, With<Speedometer>)>,
+) {
+    let (vp, _) = player.single();
+    let (mut needle, _) = speedo.single_mut();
+
+    needle.rotation = Quat::from_rotation_z(vp.0.length() / 100.0);
+}
+
 fn track_player(
     player: Query<(&Transform, &Velocity, With<Player>)>,
-    mut speedo: Query<(
-        &mut Transform,
-        With<Speedometer>,
-        Without<SpeedoNeedle>,
-        Without<Camera>,
-        Without<Player>,
-    )>,
-    mut needle: Query<(
-        &mut Transform,
-        With<SpeedoNeedle>,
-        Without<Speedometer>,
-        Without<Camera>,
-        Without<Player>,
-    )>,
     mut camera: Query<(&mut Transform, With<Camera>, Without<Player>)>,
 ) {
-    let (txp, v, _) = player.single();
-    let (mut speedo, _, _, _, _) = speedo.single_mut();
-    let (mut needle, _, _, _, _) = needle.single_mut();
-
-    speedo.translation = txp.translation + vec3(-800.0, -400.0, 3.0);
-    needle.translation = txp.translation + vec3(-800.0, -400.0, 4.0);
-    needle.rotation = Quat::from_rotation_z(v.0.length() / -100.0);
+    let (txp, _, _) = player.single();
 
     for (mut txc, _, _) in camera.iter_mut() {
         txc.translation.x = txp.translation.x;