From f754cecb491e983fc0a8865ff6cb532490abaea2 Mon Sep 17 00:00:00 2001
From: Carter Anderson <mcanders1@gmail.com>
Date: Thu, 7 Nov 2024 13:52:58 -0800
Subject: [PATCH] UiImage -> ImageNode, UiImageSize -> ImageNodeSize (#16271)

# Objective

Align `UiImage` with the new `XNode` naming convention.

## Solution

- Rename `UiImage` to `ImageNode`
- Rename `UiImageSize` to `ImageNodeSize`

---

## Migration Guide

Before:
```rust
commands.spawn(UiImage::new(image));
````

After:
```rust
commands.spawn(ImageNode::new(image));
```
---
 crates/bevy_ui/src/accessibility.rs           |  7 +++--
 crates/bevy_ui/src/lib.rs                     | 14 +++++-----
 crates/bevy_ui/src/node_bundles.rs            | 14 +++++-----
 crates/bevy_ui/src/render/mod.rs              | 10 +++----
 crates/bevy_ui/src/render/render_pass.rs      |  4 +--
 .../src/render/ui_texture_slice_pipeline.rs   |  4 +--
 crates/bevy_ui/src/widget/image.rs            | 28 +++++++++----------
 examples/3d/auto_exposure.rs                  |  4 +--
 examples/games/game_menu.rs                   |  8 +++---
 examples/stress_tests/many_buttons.rs         |  2 +-
 examples/testbed/ui.rs                        | 16 +++++------
 examples/ui/font_atlas_debug.rs               |  2 +-
 examples/ui/overflow.rs                       |  2 +-
 examples/ui/overflow_clip_margin.rs           |  2 +-
 examples/ui/overflow_debug.rs                 |  2 +-
 examples/ui/ui_scaling.rs                     |  2 +-
 examples/ui/ui_texture_atlas.rs               | 14 +++++++---
 examples/ui/ui_texture_atlas_slice.rs         |  4 +--
 examples/ui/ui_texture_slice.rs               |  9 ++++--
 examples/ui/ui_texture_slice_flip_and_tile.rs |  2 +-
 20 files changed, 81 insertions(+), 69 deletions(-)

diff --git a/crates/bevy_ui/src/accessibility.rs b/crates/bevy_ui/src/accessibility.rs
index f4d331b9ca..51fcc5be81 100644
--- a/crates/bevy_ui/src/accessibility.rs
+++ b/crates/bevy_ui/src/accessibility.rs
@@ -1,7 +1,7 @@
 use crate::{
     experimental::UiChildren,
     prelude::{Button, Label},
-    widget::{TextUiReader, UiImage},
+    widget::{ImageNode, TextUiReader},
     ComputedNode,
 };
 use bevy_a11y::{
@@ -92,7 +92,10 @@ fn button_changed(
 
 fn image_changed(
     mut commands: Commands,
-    mut query: Query<(Entity, Option<&mut AccessibilityNode>), (Changed<UiImage>, Without<Button>)>,
+    mut query: Query<
+        (Entity, Option<&mut AccessibilityNode>),
+        (Changed<ImageNode>, Without<Button>),
+    >,
     ui_children: UiChildren,
     mut text_reader: TextUiReader,
 ) {
diff --git a/crates/bevy_ui/src/lib.rs b/crates/bevy_ui/src/lib.rs
index 6edd497f17..9b8945f7b9 100644
--- a/crates/bevy_ui/src/lib.rs
+++ b/crates/bevy_ui/src/lib.rs
@@ -8,7 +8,7 @@
 
 //! This crate contains Bevy's UI system, which can be used to create UI for both 2D and 3D games
 //! # Basic usage
-//! Spawn UI elements with [`widget::Button`], [`UiImage`], [`Text`](prelude::Text) and [`Node`]
+//! Spawn UI elements with [`widget::Button`], [`ImageNode`], [`Text`](prelude::Text) and [`Node`]
 //! This UI is laid out with the Flexbox and CSS Grid layout models (see <https://cssreference.io/flexbox/>)
 
 pub mod measurement;
@@ -40,7 +40,7 @@ pub use measurement::*;
 pub use render::*;
 pub use ui_material::*;
 pub use ui_node::*;
-use widget::{UiImage, UiImageSize};
+use widget::{ImageNode, ImageNodeSize};
 
 /// The UI prelude.
 ///
@@ -58,7 +58,7 @@ pub mod prelude {
             node_bundles::*,
             ui_material::*,
             ui_node::*,
-            widget::{Button, Label, UiImage},
+            widget::{Button, ImageNode, Label},
             Interaction, MaterialNode, UiMaterialPlugin, UiScale,
         },
         // `bevy_sprite` re-exports for texture slicing
@@ -155,8 +155,8 @@ impl Plugin for UiPlugin {
             .register_type::<RelativeCursorPosition>()
             .register_type::<ScrollPosition>()
             .register_type::<TargetCamera>()
-            .register_type::<UiImage>()
-            .register_type::<UiImageSize>()
+            .register_type::<ImageNode>()
+            .register_type::<ImageNodeSize>()
             .register_type::<UiRect>()
             .register_type::<UiScale>()
             .register_type::<BorderColor>()
@@ -208,7 +208,7 @@ impl Plugin for UiPlugin {
                 update_clipping_system.after(TransformSystem::TransformPropagate),
                 // Potential conflicts: `Assets<Image>`
                 // They run independently since `widget::image_node_system` will only ever observe
-                // its own UiImage, and `widget::text_system` & `bevy_text::update_text2d_layout`
+                // its own ImageNode, and `widget::text_system` & `bevy_text::update_text2d_layout`
                 // will never modify a pre-existing `Image` asset.
                 widget::update_image_content_size_system
                     .in_set(UiSystem::Prepare)
@@ -265,7 +265,7 @@ fn build_text_interop(app: &mut App) {
                 // Since both systems will only ever insert new [`Image`] assets,
                 // they will never observe each other's effects.
                 .ambiguous_with(bevy_text::update_text2d_layout)
-                // We assume Text is on disjoint UI entities to UiImage and UiTextureAtlasImage
+                // We assume Text is on disjoint UI entities to ImageNode and UiTextureAtlasImage
                 // FIXME: Add an archetype invariant for this https://github.com/bevyengine/bevy/issues/1481.
                 .ambiguous_with(widget::update_image_content_size_system),
             widget::text_system
diff --git a/crates/bevy_ui/src/node_bundles.rs b/crates/bevy_ui/src/node_bundles.rs
index 18d1162f28..4d318c78c4 100644
--- a/crates/bevy_ui/src/node_bundles.rs
+++ b/crates/bevy_ui/src/node_bundles.rs
@@ -2,9 +2,9 @@
 #![expect(deprecated)]
 
 use crate::{
-    widget::{Button, UiImageSize},
-    BackgroundColor, BorderColor, BorderRadius, ComputedNode, ContentSize, FocusPolicy,
-    Interaction, MaterialNode, Node, ScrollPosition, UiImage, UiMaterial, ZIndex,
+    widget::{Button, ImageNodeSize},
+    BackgroundColor, BorderColor, BorderRadius, ComputedNode, ContentSize, FocusPolicy, ImageNode,
+    Interaction, MaterialNode, Node, ScrollPosition, UiMaterial, ZIndex,
 };
 use bevy_ecs::bundle::Bundle;
 use bevy_render::view::{InheritedVisibility, ViewVisibility, Visibility};
@@ -60,7 +60,7 @@ pub struct NodeBundle {
 #[derive(Bundle, Debug, Default)]
 #[deprecated(
     since = "0.15.0",
-    note = "Use the `UiImage` component instead. Inserting `UiImage` will also insert the other components required automatically."
+    note = "Use the `ImageNode` component instead. Inserting `ImageNode` will also insert the other components required automatically."
 )]
 pub struct ImageBundle {
     /// Describes the logical size of the node
@@ -73,7 +73,7 @@ pub struct ImageBundle {
     /// The image of the node.
     ///
     /// To tint the image, change the `color` field of this component.
-    pub image: UiImage,
+    pub image: ImageNode,
     /// The color of the background that will fill the containing node.
     pub background_color: BackgroundColor,
     /// The border radius of the node
@@ -81,7 +81,7 @@ pub struct ImageBundle {
     /// The size of the image in pixels
     ///
     /// This component is set automatically
-    pub image_size: UiImageSize,
+    pub image_size: ImageNodeSize,
     /// Whether this node should block interaction with lower nodes
     pub focus_policy: FocusPolicy,
     /// The transform of the node
@@ -126,7 +126,7 @@ pub struct ButtonBundle {
     /// The border radius of the node
     pub border_radius: BorderRadius,
     /// The image of the node
-    pub image: UiImage,
+    pub image: ImageNode,
     /// The background color that will fill the containing node
     pub background_color: BackgroundColor,
     /// The transform of the node
diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs
index c934ed0262..41c176a578 100644
--- a/crates/bevy_ui/src/render/mod.rs
+++ b/crates/bevy_ui/src/render/mod.rs
@@ -4,7 +4,7 @@ mod render_pass;
 mod ui_material_pipeline;
 pub mod ui_texture_slice_pipeline;
 
-use crate::widget::UiImage;
+use crate::widget::ImageNode;
 use crate::{
     experimental::UiChildren, BackgroundColor, BorderColor, CalculatedClip, ComputedNode,
     DefaultUiCamera, Outline, ResolvedBorderRadius, TargetCamera, UiAntiAlias, UiBoxShadowSamples,
@@ -110,7 +110,7 @@ pub fn build_ui_render(app: &mut App) {
 
     render_app
         .init_resource::<SpecializedRenderPipelines<UiPipeline>>()
-        .init_resource::<UiImageBindGroups>()
+        .init_resource::<ImageNodeBindGroups>()
         .init_resource::<UiMeta>()
         .init_resource::<ExtractedUiNodes>()
         .allow_ambiguous_resource::<ExtractedUiNodes>()
@@ -318,7 +318,7 @@ pub fn extract_uinode_images(
             &ViewVisibility,
             Option<&CalculatedClip>,
             Option<&TargetCamera>,
-            &UiImage,
+            &ImageNode,
         )>,
     >,
     mapping: Extract<Query<RenderEntity>>,
@@ -874,7 +874,7 @@ pub fn queue_uinodes(
 }
 
 #[derive(Resource, Default)]
-pub struct UiImageBindGroups {
+pub struct ImageNodeBindGroups {
     pub values: HashMap<AssetId<Image>, BindGroup>,
 }
 
@@ -887,7 +887,7 @@ pub fn prepare_uinodes(
     mut extracted_uinodes: ResMut<ExtractedUiNodes>,
     view_uniforms: Res<ViewUniforms>,
     ui_pipeline: Res<UiPipeline>,
-    mut image_bind_groups: ResMut<UiImageBindGroups>,
+    mut image_bind_groups: ResMut<ImageNodeBindGroups>,
     gpu_images: Res<RenderAssets<GpuImage>>,
     mut phases: ResMut<ViewSortedRenderPhases<TransparentUi>>,
     events: Res<SpriteAssetEvents>,
diff --git a/crates/bevy_ui/src/render/render_pass.rs b/crates/bevy_ui/src/render/render_pass.rs
index 6c035c3838..c673c8229b 100644
--- a/crates/bevy_ui/src/render/render_pass.rs
+++ b/crates/bevy_ui/src/render/render_pass.rs
@@ -1,6 +1,6 @@
 use core::ops::Range;
 
-use super::{UiBatch, UiImageBindGroups, UiMeta};
+use super::{ImageNodeBindGroups, UiBatch, UiMeta};
 use crate::DefaultCameraView;
 use bevy_ecs::{
     prelude::*,
@@ -185,7 +185,7 @@ impl<P: PhaseItem, const I: usize> RenderCommand<P> for SetUiViewBindGroup<I> {
 }
 pub struct SetUiTextureBindGroup<const I: usize>;
 impl<P: PhaseItem, const I: usize> RenderCommand<P> for SetUiTextureBindGroup<I> {
-    type Param = SRes<UiImageBindGroups>;
+    type Param = SRes<ImageNodeBindGroups>;
     type ViewQuery = ();
     type ItemQuery = Read<UiBatch>;
 
diff --git a/crates/bevy_ui/src/render/ui_texture_slice_pipeline.rs b/crates/bevy_ui/src/render/ui_texture_slice_pipeline.rs
index 6df45d0de2..6ef40f53da 100644
--- a/crates/bevy_ui/src/render/ui_texture_slice_pipeline.rs
+++ b/crates/bevy_ui/src/render/ui_texture_slice_pipeline.rs
@@ -30,7 +30,7 @@ use bevy_transform::prelude::GlobalTransform;
 use bevy_utils::HashMap;
 use binding_types::{sampler, texture_2d};
 use bytemuck::{Pod, Zeroable};
-use widget::UiImage;
+use widget::ImageNode;
 
 pub const UI_SLICER_SHADER_HANDLE: Handle<Shader> = Handle::weak_from_u128(11156288772117983964);
 
@@ -256,7 +256,7 @@ pub fn extract_ui_texture_slices(
             &ViewVisibility,
             Option<&CalculatedClip>,
             Option<&TargetCamera>,
-            &UiImage,
+            &ImageNode,
         )>,
     >,
     mapping: Extract<Query<RenderEntity>>,
diff --git a/crates/bevy_ui/src/widget/image.rs b/crates/bevy_ui/src/widget/image.rs
index 729561c319..a45e8c8e7d 100644
--- a/crates/bevy_ui/src/widget/image.rs
+++ b/crates/bevy_ui/src/widget/image.rs
@@ -9,11 +9,11 @@ use bevy_sprite::{TextureAtlas, TextureAtlasLayout, TextureSlicer};
 use bevy_window::{PrimaryWindow, Window};
 use taffy::{MaybeMath, MaybeResolve};
 
-/// The 2D texture displayed for this UI node
+/// A UI Node that renders an image.
 #[derive(Component, Clone, Debug, Reflect)]
 #[reflect(Component, Default, Debug)]
-#[require(Node, UiImageSize, ContentSize)]
-pub struct UiImage {
+#[require(Node, ImageNodeSize, ContentSize)]
+pub struct ImageNode {
     /// The tint color used to draw the image.
     ///
     /// This is multiplied by the color of each pixel in the image.
@@ -39,16 +39,16 @@ pub struct UiImage {
     pub image_mode: NodeImageMode,
 }
 
-impl Default for UiImage {
+impl Default for ImageNode {
     /// A transparent 1x1 image with a solid white tint.
     ///
     /// # Warning
     ///
     /// This will be invisible by default.
     /// To set this to a visible image, you need to set the `texture` field to a valid image handle,
-    /// or use [`Handle<Image>`]'s default 1x1 solid white texture (as is done in [`UiImage::solid_color`]).
+    /// or use [`Handle<Image>`]'s default 1x1 solid white texture (as is done in [`ImageNode::solid_color`]).
     fn default() -> Self {
-        UiImage {
+        ImageNode {
             // This should be white because the tint is multiplied with the image,
             // so if you set an actual image with default tint you'd want its original colors
             color: Color::WHITE,
@@ -63,8 +63,8 @@ impl Default for UiImage {
     }
 }
 
-impl UiImage {
-    /// Create a new [`UiImage`] with the given texture.
+impl ImageNode {
+    /// Create a new [`ImageNode`] with the given texture.
     pub fn new(texture: Handle<Image>) -> Self {
         Self {
             image: texture,
@@ -73,7 +73,7 @@ impl UiImage {
         }
     }
 
-    /// Create a solid color [`UiImage`].
+    /// Create a solid color [`ImageNode`].
     ///
     /// This is primarily useful for debugging / mocking the extents of your image.
     pub fn solid_color(color: Color) -> Self {
@@ -88,7 +88,7 @@ impl UiImage {
         }
     }
 
-    /// Create a [`UiImage`] from an image, with an associated texture atlas
+    /// Create a [`ImageNode`] from an image, with an associated texture atlas
     pub fn from_atlas_image(image: Handle<Image>, atlas: TextureAtlas) -> Self {
         Self {
             image,
@@ -131,7 +131,7 @@ impl UiImage {
     }
 }
 
-impl From<Handle<Image>> for UiImage {
+impl From<Handle<Image>> for ImageNode {
     fn from(texture: Handle<Image>) -> Self {
         Self::new(texture)
     }
@@ -175,14 +175,14 @@ impl NodeImageMode {
 /// This component is updated automatically by [`update_image_content_size_system`]
 #[derive(Component, Debug, Copy, Clone, Default, Reflect)]
 #[reflect(Component, Default, Debug)]
-pub struct UiImageSize {
+pub struct ImageNodeSize {
     /// The size of the image's texture
     ///
     /// This field is updated automatically by [`update_image_content_size_system`]
     size: UVec2,
 }
 
-impl UiImageSize {
+impl ImageNodeSize {
     /// The size of the image's texture
     pub fn size(&self) -> UVec2 {
         self.size
@@ -259,7 +259,7 @@ pub fn update_image_content_size_system(
     textures: Res<Assets<Image>>,
 
     atlases: Res<Assets<TextureAtlasLayout>>,
-    mut query: Query<(&mut ContentSize, Ref<UiImage>, &mut UiImageSize), UpdateImageFilter>,
+    mut query: Query<(&mut ContentSize, Ref<ImageNode>, &mut ImageNodeSize), UpdateImageFilter>,
 ) {
     let combined_scale_factor = windows
         .get_single()
diff --git a/examples/3d/auto_exposure.rs b/examples/3d/auto_exposure.rs
index ee623982db..e18cec24f2 100644
--- a/examples/3d/auto_exposure.rs
+++ b/examples/3d/auto_exposure.rs
@@ -115,7 +115,7 @@ fn setup(
     ));
 
     commands.spawn((
-        UiImage {
+        ImageNode {
             image: metering_mask,
             ..default()
         },
@@ -162,7 +162,7 @@ struct ExampleResources {
 fn example_control_system(
     camera: Single<(&mut Transform, &mut AutoExposure), With<Camera3d>>,
     mut display: Single<&mut Text, With<ExampleDisplay>>,
-    mut mask_image: Single<&mut Node, With<UiImage>>,
+    mut mask_image: Single<&mut Node, With<ImageNode>>,
     time: Res<Time>,
     input: Res<ButtonInput<KeyCode>>,
     resources: Res<ExampleResources>,
diff --git a/examples/games/game_menu.rs b/examples/games/game_menu.rs
index 223b9d049c..ef12bb352c 100644
--- a/examples/games/game_menu.rs
+++ b/examples/games/game_menu.rs
@@ -86,7 +86,7 @@ mod splash {
             ))
             .with_children(|parent| {
                 parent.spawn((
-                    UiImage::new(icon),
+                    ImageNode::new(icon),
                     Node {
                         // This will set the logo to be 200px wide, and auto adjust its height
                         width: Val::Px(200.0),
@@ -444,7 +444,7 @@ mod menu {
                             ))
                             .with_children(|parent| {
                                 let icon = asset_server.load("textures/Game Icons/right.png");
-                                parent.spawn((UiImage::new(icon), button_icon_node.clone()));
+                                parent.spawn((ImageNode::new(icon), button_icon_node.clone()));
                                 parent.spawn((
                                     Text::new("New Game"),
                                     button_text_font.clone(),
@@ -460,7 +460,7 @@ mod menu {
                             ))
                             .with_children(|parent| {
                                 let icon = asset_server.load("textures/Game Icons/wrench.png");
-                                parent.spawn((UiImage::new(icon), button_icon_node.clone()));
+                                parent.spawn((ImageNode::new(icon), button_icon_node.clone()));
                                 parent.spawn((
                                     Text::new("Settings"),
                                     button_text_font.clone(),
@@ -476,7 +476,7 @@ mod menu {
                             ))
                             .with_children(|parent| {
                                 let icon = asset_server.load("textures/Game Icons/exitRight.png");
-                                parent.spawn((UiImage::new(icon), button_icon_node));
+                                parent.spawn((ImageNode::new(icon), button_icon_node));
                                 parent.spawn((
                                     Text::new("Quit"),
                                     button_text_font,
diff --git a/examples/stress_tests/many_buttons.rs b/examples/stress_tests/many_buttons.rs
index b1039c2262..c11f7359f3 100644
--- a/examples/stress_tests/many_buttons.rs
+++ b/examples/stress_tests/many_buttons.rs
@@ -252,7 +252,7 @@ fn spawn_button(
     ));
 
     if let Some(image) = image {
-        builder.insert(UiImage::new(image));
+        builder.insert(ImageNode::new(image));
     }
 
     if spawn_text {
diff --git a/examples/testbed/ui.rs b/examples/testbed/ui.rs
index 62367e20fd..b9ac061412 100644
--- a/examples/testbed/ui.rs
+++ b/examples/testbed/ui.rs
@@ -182,7 +182,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                         ))
                         .with_children(|parent| {
                             parent.spawn((
-                                UiImage::new(asset_server.load("branding/bevy_logo_light.png")),
+                                ImageNode::new(asset_server.load("branding/bevy_logo_light.png")),
                                 // Uses the transform to rotate the logo image by 45 degrees
                                 Transform::from_rotation(Quat::from_rotation_z(0.25 * PI)),
                                 BorderRadius::all(Val::Px(10.)),
@@ -294,7 +294,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                     // bevy logo (image)
                     parent
                         .spawn((
-                            UiImage::new(asset_server.load("branding/bevy_logo_dark_big.png"))
+                            ImageNode::new(asset_server.load("branding/bevy_logo_dark_big.png"))
                                 .with_mode(NodeImageMode::Stretch),
                             Node {
                                 width: Val::Px(500.0),
@@ -334,17 +334,17 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                         [(false, false), (false, true), (true, true), (true, false)]
                     {
                         parent.spawn((
-                            Node {
-                                // The height will be chosen automatically to preserve the image's aspect ratio
-                                width: Val::Px(75.),
-                                ..default()
-                            },
-                            UiImage {
+                            ImageNode {
                                 image: asset_server.load("branding/icon.png"),
                                 flip_x,
                                 flip_y,
                                 ..default()
                             },
+                            Node {
+                                // The height will be chosen automatically to preserve the image's aspect ratio
+                                width: Val::Px(75.),
+                                ..default()
+                            },
                         ));
                     }
                 });
diff --git a/examples/ui/font_atlas_debug.rs b/examples/ui/font_atlas_debug.rs
index f0a315c99f..f117a85aa7 100644
--- a/examples/ui/font_atlas_debug.rs
+++ b/examples/ui/font_atlas_debug.rs
@@ -49,7 +49,7 @@ fn atlas_render_system(
             let font_atlas = &font_atlas[state.atlas_count as usize];
             state.atlas_count += 1;
             commands.spawn((
-                UiImage::new(font_atlas.texture.clone()),
+                ImageNode::new(font_atlas.texture.clone()),
                 Node {
                     position_type: PositionType::Absolute,
                     top: Val::ZERO,
diff --git a/examples/ui/overflow.rs b/examples/ui/overflow.rs
index ad7bd6e026..2bd9aa873e 100644
--- a/examples/ui/overflow.rs
+++ b/examples/ui/overflow.rs
@@ -77,7 +77,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                             ))
                             .with_children(|parent| {
                                 parent.spawn((
-                                    UiImage::new(image.clone()),
+                                    ImageNode::new(image.clone()),
                                     Node {
                                         min_width: Val::Px(100.),
                                         min_height: Val::Px(100.),
diff --git a/examples/ui/overflow_clip_margin.rs b/examples/ui/overflow_clip_margin.rs
index 420027e553..81c7d6a829 100644
--- a/examples/ui/overflow_clip_margin.rs
+++ b/examples/ui/overflow_clip_margin.rs
@@ -80,7 +80,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                         BackgroundColor(LIGHT_CYAN.into()),
                                     ))
                                     .with_child((
-                                        UiImage::new(image.clone()),
+                                        ImageNode::new(image.clone()),
                                         Node {
                                             min_width: Val::Px(100.),
                                             min_height: Val::Px(100.),
diff --git a/examples/ui/overflow_debug.rs b/examples/ui/overflow_debug.rs
index 25391372d4..13f2c362a2 100644
--- a/examples/ui/overflow_debug.rs
+++ b/examples/ui/overflow_debug.rs
@@ -141,7 +141,7 @@ fn spawn_image(
 ) {
     spawn_container(parent, update_transform, |parent| {
         parent.spawn((
-            UiImage::new(asset_server.load("branding/bevy_logo_dark_big.png")),
+            ImageNode::new(asset_server.load("branding/bevy_logo_dark_big.png")),
             Node {
                 height: Val::Px(100.),
                 position_type: PositionType::Absolute,
diff --git a/examples/ui/ui_scaling.rs b/examples/ui/ui_scaling.rs
index 946b3935b7..313b1f845b 100644
--- a/examples/ui/ui_scaling.rs
+++ b/examples/ui/ui_scaling.rs
@@ -64,7 +64,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 BackgroundColor(BLUE.into()),
             ));
             parent.spawn((
-                UiImage::new(asset_server.load("branding/icon.png")),
+                ImageNode::new(asset_server.load("branding/icon.png")),
                 Node {
                     width: Val::Px(30.0),
                     height: Val::Px(30.0),
diff --git a/examples/ui/ui_texture_atlas.rs b/examples/ui/ui_texture_atlas.rs
index b0156e5d71..5f326a6c33 100644
--- a/examples/ui/ui_texture_atlas.rs
+++ b/examples/ui/ui_texture_atlas.rs
@@ -44,7 +44,10 @@ fn setup(
         })
         .with_children(|parent| {
             parent.spawn((
-                UiImage::from_atlas_image(texture_handle, TextureAtlas::from(texture_atlas_handle)),
+                ImageNode::from_atlas_image(
+                    texture_handle,
+                    TextureAtlas::from(texture_atlas_handle),
+                ),
                 Node {
                     width: Val::Px(256.),
                     height: Val::Px(256.),
@@ -64,10 +67,13 @@ fn setup(
         });
 }
 
-fn increment_atlas_index(mut ui_images: Query<&mut UiImage>, keyboard: Res<ButtonInput<KeyCode>>) {
+fn increment_atlas_index(
+    mut image_nodes: Query<&mut ImageNode>,
+    keyboard: Res<ButtonInput<KeyCode>>,
+) {
     if keyboard.just_pressed(KeyCode::Space) {
-        for mut ui_image in &mut ui_images {
-            if let Some(atlas) = &mut ui_image.texture_atlas {
+        for mut image_node in &mut image_nodes {
+            if let Some(atlas) = &mut image_node.texture_atlas {
                 atlas.index = (atlas.index + 1) % 6;
             }
         }
diff --git a/examples/ui/ui_texture_atlas_slice.rs b/examples/ui/ui_texture_atlas_slice.rs
index 35523850c4..733807701c 100644
--- a/examples/ui/ui_texture_atlas_slice.rs
+++ b/examples/ui/ui_texture_atlas_slice.rs
@@ -20,7 +20,7 @@ fn main() {
 
 fn button_system(
     mut interaction_query: Query<
-        (&Interaction, &Children, &mut UiImage),
+        (&Interaction, &Children, &mut ImageNode),
         (Changed<Interaction>, With<Button>),
     >,
     mut text_query: Query<&mut Text>,
@@ -82,7 +82,7 @@ fn setup(
                 parent
                     .spawn((
                         Button,
-                        UiImage::from_atlas_image(
+                        ImageNode::from_atlas_image(
                             texture_handle.clone(),
                             TextureAtlas {
                                 index: idx,
diff --git a/examples/ui/ui_texture_slice.rs b/examples/ui/ui_texture_slice.rs
index 99ddfbc4e7..cc0f496694 100644
--- a/examples/ui/ui_texture_slice.rs
+++ b/examples/ui/ui_texture_slice.rs
@@ -20,7 +20,7 @@ fn main() {
 
 fn button_system(
     mut interaction_query: Query<
-        (&Interaction, &Children, &mut UiImage),
+        (&Interaction, &Children, &mut ImageNode),
         (Changed<Interaction>, With<Button>),
     >,
     mut text_query: Query<&mut Text>,
@@ -68,6 +68,11 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 parent
                     .spawn((
                         Button,
+                        ImageNode {
+                            image: image.clone(),
+                            image_mode: NodeImageMode::Sliced(slicer.clone()),
+                            ..default()
+                        },
                         Node {
                             width: Val::Px(w),
                             height: Val::Px(h),
@@ -78,8 +83,6 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                             margin: UiRect::all(Val::Px(20.0)),
                             ..default()
                         },
-                        UiImage::new(image.clone())
-                            .with_mode(NodeImageMode::Sliced(slicer.clone())),
                     ))
                     .with_child((
                         Text::new("Button"),
diff --git a/examples/ui/ui_texture_slice_flip_and_tile.rs b/examples/ui/ui_texture_slice_flip_and_tile.rs
index 0a827b2d4a..07f81f14ed 100644
--- a/examples/ui/ui_texture_slice_flip_and_tile.rs
+++ b/examples/ui/ui_texture_slice_flip_and_tile.rs
@@ -58,7 +58,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 ([160., 160.], true, true),
             ] {
                 parent.spawn((
-                    UiImage {
+                    ImageNode {
                         image: image.clone(),
                         flip_x,
                         flip_y,