# Objective 1. UI texture slicing chops and scales an image to fit the size of a node and isn't meant to place any constraints on the size of the node itself, but because the required components changes required `ImageSize` and `ContentSize` for nodes with `UiImage`, texture sliced nodes are laid out using an `ImageMeasure`. 2. In 0.14 users could spawn a `(UiImage, NodeBundle)` which would display an image stretched to fill the UI node's bounds ignoring the image's instrinsic size. Now that `UiImage` requires `ContentSize`, there's no option to display an image without its size placing constrains on the UI layout (unless you force the `Node` to a fixed size, but that's not a solution). 3. It's desirable that the `Sprite` and `UiImage` share similar APIs. Fixes #16109 ## Solution * Remove the `Component` impl from `ImageScaleMode`. * Add a `Stretch` variant to `ImageScaleMode`. * Add a field `scale_mode: ImageScaleMode` to `Sprite`. * Add a field `mode: UiImageMode` to `UiImage`. * Add an enum `UiImageMode` similar to `ImageScaleMode` but with additional UI specific variants. * Remove the queries for `ImageScaleMode` from Sprite and UI extraction, and refer to the new fields instead. * Change `ui_layout_system` to update measure funcs on any change to `ContentSize`s to enable manual clearing without removing the component. * Don't add a measure unless `UiImageMode::Auto` is set in `update_image_content_size_system`. Mutably deref the `Mut<ContentSize>` if the `UiImage` is changed to force removal of any existing measure func. ## Testing Remove all the constraints from the ui_texture_slice example: ```rust //! This example illustrates how to create buttons with their textures sliced //! and kept in proportion instead of being stretched by the button dimensions use bevy::{ color::palettes::css::{GOLD, ORANGE}, prelude::*, winit::WinitSettings, }; fn main() { App::new() .add_plugins(DefaultPlugins) // 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) .run(); } fn button_system( mut interaction_query: Query< (&Interaction, &Children, &mut UiImage), (Changed<Interaction>, With<Button>), >, mut text_query: Query<&mut Text>, ) { for (interaction, children, mut image) in &mut interaction_query { let mut text = text_query.get_mut(children[0]).unwrap(); match *interaction { Interaction::Pressed => { **text = "Press".to_string(); image.color = GOLD.into(); } Interaction::Hovered => { **text = "Hover".to_string(); image.color = ORANGE.into(); } Interaction::None => { **text = "Button".to_string(); image.color = Color::WHITE; } } } } fn setup(mut commands: Commands, asset_server: Res<AssetServer>) { let image = asset_server.load("textures/fantasy_ui_borders/panel-border-010.png"); let slicer = TextureSlicer { border: BorderRect::square(22.0), center_scale_mode: SliceScaleMode::Stretch, sides_scale_mode: SliceScaleMode::Stretch, max_corner_scale: 1.0, }; // ui camera commands.spawn(Camera2d); commands .spawn(Node { width: Val::Percent(100.0), height: Val::Percent(100.0), align_items: AlignItems::Center, justify_content: JustifyContent::Center, ..default() }) .with_children(|parent| { for [w, h] in [[150.0, 150.0], [300.0, 150.0], [150.0, 300.0]] { parent .spawn(( Button, Node { // width: Val::Px(w), // height: Val::Px(h), // horizontally center child text justify_content: JustifyContent::Center, // vertically center child text align_items: AlignItems::Center, margin: UiRect::all(Val::Px(20.0)), ..default() }, UiImage::new(image.clone()), ImageScaleMode::Sliced(slicer.clone()), )) .with_children(|parent| { // parent.spawn(( // Text::new("Button"), // TextFont { // font: asset_server.load("fonts/FiraSans-Bold.ttf"), // font_size: 33.0, // ..default() // }, // TextColor(Color::srgb(0.9, 0.9, 0.9)), // )); }); } }); } ``` This should result in a blank window, since without any constraints the texture slice image nodes should be zero-sized. But in main the image nodes are given the size of the underlying unsliced source image `textures/fantasy_ui_borders/panel-border-010.png`: <img width="321" alt="slicing" src="https://github.com/user-attachments/assets/cbd74c9c-14cd-4b4d-93c6-7c0152bb05ee"> For this PR need to change the lines: ``` UiImage::new(image.clone()), ImageScaleMode::Sliced(slicer.clone()), ``` to ``` UiImage::new(image.clone()).with_mode(UiImageMode::Sliced(slicer.clone()), ``` and then nothing should be rendered, as desired. --------- Co-authored-by: Carter Anderson <mcanders1@gmail.com>
		
			
				
	
	
		
			138 lines
		
	
	
		
			4.0 KiB
		
	
	
	
		
			Rust
		
	
	
	
	
	
			
		
		
	
	
			138 lines
		
	
	
		
			4.0 KiB
		
	
	
	
		
			Rust
		
	
	
	
	
	
//! Showcases sprite 9 slice scaling and tiling features, enabling usage of
 | 
						|
//! sprites in multiple resolutions while keeping it in proportion
 | 
						|
use bevy::prelude::*;
 | 
						|
 | 
						|
fn main() {
 | 
						|
    App::new()
 | 
						|
        .add_plugins(DefaultPlugins)
 | 
						|
        .add_systems(Startup, setup)
 | 
						|
        .run();
 | 
						|
}
 | 
						|
 | 
						|
fn spawn_sprites(
 | 
						|
    commands: &mut Commands,
 | 
						|
    texture_handle: Handle<Image>,
 | 
						|
    mut position: Vec3,
 | 
						|
    slice_border: f32,
 | 
						|
    style: TextFont,
 | 
						|
    gap: f32,
 | 
						|
) {
 | 
						|
    let cases = [
 | 
						|
        // Reference sprite
 | 
						|
        (
 | 
						|
            "Original",
 | 
						|
            style.clone(),
 | 
						|
            Vec2::splat(100.0),
 | 
						|
            SpriteImageMode::Auto,
 | 
						|
        ),
 | 
						|
        // Scaled regular sprite
 | 
						|
        (
 | 
						|
            "Stretched",
 | 
						|
            style.clone(),
 | 
						|
            Vec2::new(100.0, 200.0),
 | 
						|
            SpriteImageMode::Auto,
 | 
						|
        ),
 | 
						|
        // Stretched Scaled sliced sprite
 | 
						|
        (
 | 
						|
            "With Slicing",
 | 
						|
            style.clone(),
 | 
						|
            Vec2::new(100.0, 200.0),
 | 
						|
            SpriteImageMode::Sliced(TextureSlicer {
 | 
						|
                border: BorderRect::square(slice_border),
 | 
						|
                center_scale_mode: SliceScaleMode::Stretch,
 | 
						|
                ..default()
 | 
						|
            }),
 | 
						|
        ),
 | 
						|
        // Scaled sliced sprite
 | 
						|
        (
 | 
						|
            "With Tiling",
 | 
						|
            style.clone(),
 | 
						|
            Vec2::new(100.0, 200.0),
 | 
						|
            SpriteImageMode::Sliced(TextureSlicer {
 | 
						|
                border: BorderRect::square(slice_border),
 | 
						|
                center_scale_mode: SliceScaleMode::Tile { stretch_value: 0.5 },
 | 
						|
                sides_scale_mode: SliceScaleMode::Tile { stretch_value: 0.2 },
 | 
						|
                ..default()
 | 
						|
            }),
 | 
						|
        ),
 | 
						|
        // Scaled sliced sprite horizontally
 | 
						|
        (
 | 
						|
            "With Tiling",
 | 
						|
            style.clone(),
 | 
						|
            Vec2::new(300.0, 200.0),
 | 
						|
            SpriteImageMode::Sliced(TextureSlicer {
 | 
						|
                border: BorderRect::square(slice_border),
 | 
						|
                center_scale_mode: SliceScaleMode::Tile { stretch_value: 0.2 },
 | 
						|
                sides_scale_mode: SliceScaleMode::Tile { stretch_value: 0.3 },
 | 
						|
                ..default()
 | 
						|
            }),
 | 
						|
        ),
 | 
						|
        // Scaled sliced sprite horizontally with max scale
 | 
						|
        (
 | 
						|
            "With Corners Constrained",
 | 
						|
            style,
 | 
						|
            Vec2::new(300.0, 200.0),
 | 
						|
            SpriteImageMode::Sliced(TextureSlicer {
 | 
						|
                border: BorderRect::square(slice_border),
 | 
						|
                center_scale_mode: SliceScaleMode::Tile { stretch_value: 0.1 },
 | 
						|
                sides_scale_mode: SliceScaleMode::Tile { stretch_value: 0.2 },
 | 
						|
                max_corner_scale: 0.2,
 | 
						|
            }),
 | 
						|
        ),
 | 
						|
    ];
 | 
						|
 | 
						|
    for (label, text_style, size, scale_mode) in cases {
 | 
						|
        position.x += 0.5 * size.x;
 | 
						|
        let mut cmd = commands.spawn((
 | 
						|
            Sprite {
 | 
						|
                image: texture_handle.clone(),
 | 
						|
                custom_size: Some(size),
 | 
						|
                image_mode: scale_mode,
 | 
						|
                ..default()
 | 
						|
            },
 | 
						|
            Transform::from_translation(position),
 | 
						|
        ));
 | 
						|
        cmd.with_children(|builder| {
 | 
						|
            builder.spawn((
 | 
						|
                Text2d::new(label),
 | 
						|
                text_style,
 | 
						|
                TextLayout::new_with_justify(JustifyText::Center),
 | 
						|
                Transform::from_xyz(0., -0.5 * size.y - 10., 0.0),
 | 
						|
                bevy::sprite::Anchor::TopCenter,
 | 
						|
            ));
 | 
						|
        });
 | 
						|
        position.x += 0.5 * size.x + gap;
 | 
						|
    }
 | 
						|
}
 | 
						|
 | 
						|
fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 | 
						|
    commands.spawn(Camera2d);
 | 
						|
    let font = asset_server.load("fonts/FiraSans-Bold.ttf");
 | 
						|
    let style = TextFont {
 | 
						|
        font: font.clone(),
 | 
						|
        ..default()
 | 
						|
    };
 | 
						|
 | 
						|
    // Load textures
 | 
						|
    let handle_1 = asset_server.load("textures/slice_square.png");
 | 
						|
    let handle_2 = asset_server.load("textures/slice_square_2.png");
 | 
						|
 | 
						|
    spawn_sprites(
 | 
						|
        &mut commands,
 | 
						|
        handle_1,
 | 
						|
        Vec3::new(-600.0, 200.0, 0.0),
 | 
						|
        200.0,
 | 
						|
        style.clone(),
 | 
						|
        40.,
 | 
						|
    );
 | 
						|
 | 
						|
    spawn_sprites(
 | 
						|
        &mut commands,
 | 
						|
        handle_2,
 | 
						|
        Vec3::new(-600.0, -200.0, 0.0),
 | 
						|
        80.0,
 | 
						|
        style,
 | 
						|
        40.,
 | 
						|
    );
 | 
						|
}
 |