Add rewind and play icons to rewind and flap buttons

src/bin/flappy/main.rs

@@ -2,6 +2,7 @@
 #![allow(clippy::type_complexity)]
 
 use bevy::audio::PlaybackMode;
+use bevy::image::{ImageLoaderSettings, ImageSampler};
 use bevy::render::view::ColorGrading;
 use games::physics2d::*;
 use games::*;
@@ -417,7 +418,7 @@ struct RewindSfx;
 #[derive(Component)]
 struct RewindButton;
 
-fn init_ui(mut commands: Commands) {
+fn init_ui(mut commands: Commands, mut server: ResMut<AssetServer>) {
     commands
         .spawn((
             Node {
@@ -550,6 +551,14 @@ fn init_ui(mut commands: Commands) {
             ..default()
         })
         .with_children(|parent| {
+            let rewind_image = server.load_with_settings(
+                "flappy/rewind.png",
+                |settings: &mut ImageLoaderSettings| {
+                    // Need to use nearest filtering to avoid bleeding between the slices with tiling
+                    settings.sampler = ImageSampler::nearest();
+                },
+            );
+
             parent
                 .spawn((
                     Node {
@@ -562,13 +571,27 @@ fn init_ui(mut commands: Commands) {
                     BackgroundColor::default(),
                     RewindButton,
                     children![
+                        (
+                            ImageNode { color: BLACK.into(), image: rewind_image, ..default() },
+                            Node { height: Val::Px(50.0), ..default() },
+                        ),
+                        (
                             Text::new("Rewind! (R)"),
+                            TextFont::from_font_size(30.0),
                             TextLayout::new_with_justify(JustifyText::Center)
+                        ),
                     ],
                 ))
                 .observe(start_rewind)
                 .observe(end_rewind);
 
+            let play_image = server.load_with_settings(
+                "flappy/play.png",
+                |settings: &mut ImageLoaderSettings| {
+                    // Need to use nearest filtering to avoid bleeding between the slices with tiling
+                    settings.sampler = ImageSampler::nearest();
+                },
+            );
             parent
                 .spawn((
                     Node {
@@ -580,9 +603,15 @@ fn init_ui(mut commands: Commands) {
                     Button,
                     FlapButton,
                     children![
+                        (
                             Text::new("Flap! (Spacebar)"),
                             TextFont::from_font_size(30.0),
                             TextLayout::new_with_justify(JustifyText::Center)
+                        ),
+                        (
+                            ImageNode { color: BLACK.into(), image: play_image, ..default() },
+                            Node { height: Val::Px(50.0), ..default() },
+                        ),
                     ],
                 ))
                 .observe(flap_button);

src/ui.rs

@@ -133,6 +133,7 @@ fn add_ui_node(
     mut added: Query<(Entity, &mut Node), Added<Node>>,
     style: Res<Style>,
     text: Query<Entity, With<Text>>,
+    images: Query<Entity, With<ImageNode>>,
     mut commands: Commands,
 ) {
     added.iter_mut().for_each(|(e, mut n)| {
@@ -146,6 +147,8 @@ fn add_ui_node(
         if text.contains(e) {
             // Only change text color for text
             this.insert(TextColor(style.secondary));
+        } else if images.contains(e) {
+            // Do nothing
         } else {
             // Add extra stuff for non-text nodes
             this.insert(BackgroundColor(style.primary));