Ui texture Atlas

Author: ManevilleF

crates/bevy_ui/src/render/mod.rs

@@ -29,7 +29,7 @@ use bevy_render::{
 };
 use bevy_sprite::SpriteAssetEvents;
 #[cfg(feature = "bevy_text")]
-use bevy_sprite::TextureAtlasLayout;
+use bevy_sprite::{TextureAtlas, TextureAtlasLayout};
 #[cfg(feature = "bevy_text")]
 use bevy_text::{PositionedGlyph, Text, TextLayoutInfo};
 use bevy_transform::components::GlobalTransform;
@@ -166,20 +166,22 @@ pub fn extract_uinodes(
     mut extracted_uinodes: ResMut<ExtractedUiNodes>,
     images: Extract<Res<Assets<Image>>>,
     ui_stack: Extract<Res<UiStack>>,
+    atlas_layouts: Extract<Res<Assets<TextureAtlasLayout>>>,
     uinode_query: Extract<
         Query<(
             &Node,
             &GlobalTransform,
             &BackgroundColor,
             Option<&UiImage>,
             &ComputedVisibility,
+            Option<&TextureAtlas>,
             Option<&CalculatedClip>,
         )>,
     >,
 ) {
     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, color, maybe_image, visibility, atlas, clip)) =
             uinode_query.get(*entity)
         {
             // Skip invisible and completely transparent nodes
@@ -196,17 +198,33 @@ pub fn extract_uinodes(
             } else {
                 (DEFAULT_IMAGE_HANDLE.typed().clone_weak(), false, false)
             };
-
+            // Skip loading images
+            if !images.contains(&image) {
+                continue;
+            }
+            // Skip completely transparent nodes
+            if color.0.a() == 0.0 {
+                continue;
+            }
+            let (atlas_size, rect_min) = atlas
+                .and_then(|a| atlas_layouts.get(&a.layout).map(|l| (l, a.index)))
+                .and_then(|(atlas, index)| {
+                    atlas
+                        .textures
+                        .get(index)
+                        .map(|rect| (Some(atlas.size), rect.min))
+                })
+                .unwrap_or((None, Vec2::ZERO));
             extracted_uinodes.uinodes.push(ExtractedUiNode {
                 stack_index,
                 transform: transform.compute_matrix(),
                 color: color.0,
                 rect: Rect {
-                    min: Vec2::ZERO,
-                    max: uinode.calculated_size,
+                    min: rect_min,
+                    max: rect_min + uinode.calculated_size,
                 },
                 image,
-                atlas_size: None,
+                atlas_size,
                 clip: clip.map(|clip| clip.clip),
                 flip_x,
                 flip_y,

examples/ui/button.rs

@@ -9,7 +9,7 @@ fn main() {
         // Only run the app when there is user input. This will significantly reduce CPU/GPU use.
         .insert_resource(WinitSettings::desktop_app())
         .add_systems(Startup, setup)
-        .add_systems(Update, button_system)
+        .add_systems(Update, (button_system, sheet_button_system))
         .run();
 }
 
@@ -43,7 +43,40 @@ fn button_system(
     }
 }
 
-fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+fn sheet_button_system(
+    mut interaction_query: Query<
+        (&Interaction, &mut TextureAtlas),
+        (Changed<Interaction>, With<Button>),
+    >,
+) {
+    for (interaction, mut atlas) in interaction_query.iter_mut() {
+        match *interaction {
+            Interaction::Clicked => {
+                atlas.index = 2;
+            }
+            Interaction::Hovered => {
+                atlas.index = 1;
+            }
+            Interaction::None => {
+                atlas.index = 0;
+            }
+        }
+    }
+}
+
+fn setup(
+    mut commands: Commands,
+    asset_server: Res<AssetServer>,
+    mut texture_atlas_layouts: ResMut<Assets<TextureAtlasLayout>>,
+) {
+    let handle = asset_server.load("textures/array_texture.png");
+    let layout = texture_atlas_layouts.add(TextureAtlasLayout::from_grid(
+        Vec2::splat(250.0),
+        1,
+        4,
+        None,
+        None,
+    ));
     // ui camera
     commands.spawn(Camera2dBundle::default());
     commands
@@ -57,6 +90,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             ..default()
         })
         .with_children(|parent| {
+            // Classic button
             parent
                 .spawn(ButtonBundle {
                     style: Style {
@@ -65,6 +99,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                         justify_content: JustifyContent::Center,
                         // vertically center child text
                         align_items: AlignItems::Center,
+                        // center button
+                        margin: UiRect::all(Val::Auto),
                         ..default()
                     },
                     background_color: NORMAL_BUTTON.into(),
@@ -80,5 +116,18 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                         },
                     ));
                 });
+            // Texture sheet button
+            parent
+                .spawn(ButtonBundle {
+                    style: Style {
+                        size: Size::new(Val::Px(150.0), Val::Px(65.0)),
+                        // center button
+                        margin: UiRect::all(Val::Auto),
+                        ..default()
+                    },
+                    image: handle.into(),
+                    ..default()
+                })
+                .insert(TextureAtlas { layout, index: 0 });
         });
 }