Ui texture Atlas

crates/bevy_ui/src/render/mod.rs

@@ -24,7 +24,7 @@ use bevy_render::{
     view::{ComputedVisibility, ExtractedView, ViewUniforms},
     Extract, RenderApp, RenderStage,
 };
-use bevy_sprite::{SpriteAssetEvents, TextureAtlasLayout};
+use bevy_sprite::{SpriteAssetEvents, TextureAtlas, TextureAtlasLayout};
 use bevy_text::{Text, TextLayoutInfo};
 use bevy_transform::components::GlobalTransform;
 use bevy_utils::FloatOrd;
@@ -188,6 +188,7 @@ 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>>>,
     windows: Extract<Res<Windows>>,
     uinode_query: Extract<
         Query<(
@@ -196,14 +197,15 @@ pub fn extract_uinodes(
             &BackgroundColor,
             Option<&UiImage>,
             &ComputedVisibility,
+            Option<&TextureAtlas>,
             Option<&CalculatedClip>,
         )>,
     >,
 ) {
     let scale_factor = windows.scale_factor(WindowId::primary()) as f32;
     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)
         {
             if !visibility.is_visible() {
@@ -222,17 +224,25 @@ pub fn extract_uinodes(
             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(),
                 background_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

@@ -10,6 +10,7 @@ fn main() {
         .insert_resource(WinitSettings::desktop_app())
         .add_startup_system(setup)
         .add_system(button_system)
+        .add_system(sheet_button_system)
         .run();
 }
 
@@ -43,7 +44,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 +91,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             ..default()
         })
         .with_children(|parent| {
+            // Classic button
             parent
                 .spawn(ButtonBundle {
                     style: Style {
@@ -65,6 +100,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 +117,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 });
         });
 }