Separate image and background color values

crates/bevy_ui/src/node_bundles.rs

@@ -61,7 +61,7 @@ impl Default for NodeBundle {
 }
 
 /// A UI node that is an image
-#[derive(Bundle, Clone, Debug, Default)]
+#[derive(Bundle, Clone, Debug)]
 pub struct ImageBundle {
     /// Describes the size of the node
     pub node: Node,
@@ -70,8 +70,6 @@ pub struct ImageBundle {
     /// The calculated size based on the given image
     pub calculated_size: CalculatedSize,
     /// The background color, which serves as a "fill" for this node
-    ///
-    /// Combines with `UiImage` to tint the provided image.
     pub background_color: BackgroundColor,
     /// The image of the node
     pub image: UiImage,
@@ -95,6 +93,25 @@ pub struct ImageBundle {
     pub z_index: ZIndex,
 }
 
+impl Default for ImageBundle {
+    fn default() -> Self {
+        ImageBundle {
+            image: Default::default(),
+            calculated_size: Default::default(),
+            // Transparent background
+            background_color: Color::NONE.into(),
+            node: Default::default(),
+            style: Default::default(),
+            focus_policy: Default::default(),
+            transform: Default::default(),
+            global_transform: Default::default(),
+            visibility: Default::default(),
+            computed_visibility: Default::default(),
+            z_index: Default::default(),
+        }
+    }
+}
+
 /// A UI node that is text
 #[derive(Bundle, Clone, Debug, Default)]
 pub struct TextBundle {

crates/bevy_ui/src/render/mod.rs

@@ -200,38 +200,51 @@ pub fn extract_uinodes(
 ) {
     extracted_uinodes.uinodes.clear();
     for (stack_index, entity) in ui_stack.uinodes.iter().enumerate() {
-        if let Ok((uinode, transform, color, maybe_image, visibility, clip)) =
+        if let Ok((uinode, transform, background_color, maybe_image, visibility, clip)) =
             uinode_query.get(*entity)
         {
-            // Skip invisible and completely transparent nodes
-            if !visibility.is_visible() || color.0.a() == 0.0 {
+            // Skip invisible nodes
+            if !visibility.is_visible() {
                 continue;
             }
 
-            let (image, flip_x, flip_y) = if let Some(image) = maybe_image {
-                // Skip loading images
-                if !images.contains(&image.texture) {
-                    continue;
-                }
-                (image.texture.clone_weak(), image.flip_x, image.flip_y)
-            } else {
-                (DEFAULT_IMAGE_HANDLE.typed().clone_weak(), false, false)
+            let clip = clip.map(|clip| clip.clip);
+            let rect = Rect {
+                min: Vec2::ZERO,
+                max: uinode.calculated_size,
             };
 
-            extracted_uinodes.uinodes.push(ExtractedUiNode {
-                stack_index,
-                transform: transform.compute_matrix(),
-                background_color: color.0,
-                rect: Rect {
-                    min: Vec2::ZERO,
-                    max: uinode.calculated_size,
-                },
-                image,
-                atlas_size: None,
-                clip: clip.map(|clip| clip.clip),
-                flip_x,
-                flip_y,
-            });
+            // Fill the node with the background color if it isn't transparent
+            if background_color.0.a() != 0.0 {
+                extracted_uinodes.uinodes.push(ExtractedUiNode {
+                    stack_index,
+                    transform: transform.compute_matrix(),
+                    background_color: background_color.0,
+                    rect,
+                    image: DEFAULT_IMAGE_HANDLE.typed().clone_weak(),
+                    atlas_size: None,
+                    clip,
+                    flip_x: false,
+                    flip_y: false,
+                });
+            }
+
+            if let Some(image) = maybe_image {
+                // only extract the image if its texture is loaded
+                if images.contains(&image.texture) {
+                    extracted_uinodes.uinodes.push(ExtractedUiNode {
+                        stack_index,
+                        transform: transform.compute_matrix(),
+                        background_color: image.color,
+                        rect,
+                        image: image.texture.clone_weak(),
+                        atlas_size: None,
+                        clip,
+                        flip_x: image.flip_x,
+                        flip_y: image.flip_y,
+                    });
+                }
+            };
         }
     }
 }

crates/bevy_ui/src/ui_node.rs

@@ -601,6 +601,8 @@ impl From<Color> for BackgroundColor {
 pub struct UiImage {
     /// Handle to the texture
     pub texture: Handle<Image>,
+    /// image's color tint
+    pub color: Color,
     /// Whether the image should be flipped along its x-axis
     pub flip_x: bool,
     /// Whether the image should be flipped along its y-axis
@@ -611,6 +613,7 @@ impl Default for UiImage {
     fn default() -> UiImage {
         UiImage {
             texture: DEFAULT_IMAGE_HANDLE.typed(),
+            color: Color::WHITE,
             flip_x: false,
             flip_y: false,
         }