UI Texture 9 slice (#11600)
> Follow up to #10588
> Closes #11749 (Supersedes #11756)
Enable Texture slicing for the following UI nodes:
- `ImageBundle`
- `ButtonBundle`
<img width="739" alt="Screenshot 2024-01-29 at 13 57 43"
src="https://github.com/bevyengine/bevy/assets/26703856/37675681-74eb-4689-ab42-024310cf3134">
I also added a collection of `fantazy-ui-borders` from
[Kenney's](www.kenney.nl) assets, with the appropriate license (CC).
If it's a problem I can use the same textures as the `sprite_slice`
example
# Work done
Added the `ImageScaleMode` component to the targetted bundles, most of
the logic is directly reused from `bevy_sprite`.
The only additional internal component is the UI specific
`ComputedSlices`, which does the same thing as its spritee equivalent
but adapted to UI code.
Again the slicing is not compatible with `TextureAtlas`, it's something
I need to tackle more deeply in the future
# Fixes
* [x] I noticed that `TextureSlicer::compute_slices` could infinitely
loop if the border was larger that the image half extents, now an error
is triggered and the texture will fallback to being stretched
* [x] I noticed that when using small textures with very small *tiling*
options we could generate hundred of thousands of slices. Now I set a
minimum size of 1 pixel per slice, which is already ridiculously small,
and a warning will be sent at runtime when slice count goes above 1000
* [x] Sprite slicing with `flip_x` or `flip_y` would give incorrect
results, correct flipping is now supported to both sprites and ui image
nodes thanks to @odecay observation
# GPU Alternative
I create a separate branch attempting to implementing 9 slicing and
tiling directly through the `ui.wgsl` fragment shader. It works but
requires sending more data to the GPU:
- slice border
- tiling factors
And more importantly, the actual quad *scale* which is hard to put in
the shader with the current code, so that would be for a later iteration
2024-02-07 20:07:53 +00:00
|
|
|
//! Showcases sprite 9 slice scaling and tiling features, enabling usage of
|
|
|
|
//! sprites in multiple resolutions while keeping it in proportion
|
2024-01-15 15:40:06 +00:00
|
|
|
use bevy::prelude::*;
|
|
|
|
|
|
|
|
fn main() {
|
|
|
|
App::new()
|
2024-06-20 19:40:38 +00:00
|
|
|
.add_plugins(DefaultPlugins)
|
2024-01-15 15:40:06 +00:00
|
|
|
.add_systems(Startup, setup)
|
|
|
|
.run();
|
|
|
|
}
|
|
|
|
|
|
|
|
fn spawn_sprites(
|
|
|
|
commands: &mut Commands,
|
|
|
|
texture_handle: Handle<Image>,
|
|
|
|
mut position: Vec3,
|
|
|
|
slice_border: f32,
|
|
|
|
style: TextStyle,
|
|
|
|
gap: f32,
|
|
|
|
) {
|
|
|
|
let cases = [
|
|
|
|
// Reference sprite
|
2024-06-20 19:40:38 +00:00
|
|
|
("Original", style.clone(), Vec2::splat(100.0), None),
|
2024-01-15 15:40:06 +00:00
|
|
|
// Scaled regular sprite
|
2024-06-20 19:40:38 +00:00
|
|
|
("Stretched", style.clone(), Vec2::new(100.0, 200.0), None),
|
2024-01-15 15:40:06 +00:00
|
|
|
// Stretched Scaled sliced sprite
|
|
|
|
(
|
2024-06-20 19:40:38 +00:00
|
|
|
"With Slicing",
|
2024-01-15 15:40:06 +00:00
|
|
|
style.clone(),
|
|
|
|
Vec2::new(100.0, 200.0),
|
2024-02-09 20:36:32 +00:00
|
|
|
Some(ImageScaleMode::Sliced(TextureSlicer {
|
2024-01-15 15:40:06 +00:00
|
|
|
border: BorderRect::square(slice_border),
|
|
|
|
center_scale_mode: SliceScaleMode::Stretch,
|
|
|
|
..default()
|
2024-02-09 20:36:32 +00:00
|
|
|
})),
|
2024-01-15 15:40:06 +00:00
|
|
|
),
|
|
|
|
// Scaled sliced sprite
|
|
|
|
(
|
2024-06-20 19:40:38 +00:00
|
|
|
"With Tiling",
|
2024-01-15 15:40:06 +00:00
|
|
|
style.clone(),
|
|
|
|
Vec2::new(100.0, 200.0),
|
2024-02-09 20:36:32 +00:00
|
|
|
Some(ImageScaleMode::Sliced(TextureSlicer {
|
2024-01-15 15:40:06 +00:00
|
|
|
border: BorderRect::square(slice_border),
|
|
|
|
center_scale_mode: SliceScaleMode::Tile { stretch_value: 0.5 },
|
|
|
|
sides_scale_mode: SliceScaleMode::Tile { stretch_value: 0.2 },
|
|
|
|
..default()
|
2024-02-09 20:36:32 +00:00
|
|
|
})),
|
2024-01-15 15:40:06 +00:00
|
|
|
),
|
|
|
|
// Scaled sliced sprite horizontally
|
|
|
|
(
|
2024-06-20 19:40:38 +00:00
|
|
|
"With Tiling",
|
2024-01-15 15:40:06 +00:00
|
|
|
style.clone(),
|
|
|
|
Vec2::new(300.0, 200.0),
|
2024-02-09 20:36:32 +00:00
|
|
|
Some(ImageScaleMode::Sliced(TextureSlicer {
|
2024-01-15 15:40:06 +00:00
|
|
|
border: BorderRect::square(slice_border),
|
|
|
|
center_scale_mode: SliceScaleMode::Tile { stretch_value: 0.2 },
|
|
|
|
sides_scale_mode: SliceScaleMode::Tile { stretch_value: 0.3 },
|
|
|
|
..default()
|
2024-02-09 20:36:32 +00:00
|
|
|
})),
|
2024-01-15 15:40:06 +00:00
|
|
|
),
|
|
|
|
// Scaled sliced sprite horizontally with max scale
|
|
|
|
(
|
2024-06-20 19:40:38 +00:00
|
|
|
"With Corners Constrained",
|
2024-01-15 15:40:06 +00:00
|
|
|
style,
|
|
|
|
Vec2::new(300.0, 200.0),
|
2024-02-09 20:36:32 +00:00
|
|
|
Some(ImageScaleMode::Sliced(TextureSlicer {
|
2024-01-15 15:40:06 +00:00
|
|
|
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,
|
2024-02-09 20:36:32 +00:00
|
|
|
})),
|
2024-01-15 15:40:06 +00:00
|
|
|
),
|
|
|
|
];
|
|
|
|
|
|
|
|
for (label, text_style, size, scale_mode) in cases {
|
|
|
|
position.x += 0.5 * size.x;
|
2024-02-09 20:36:32 +00:00
|
|
|
let mut cmd = commands.spawn(SpriteBundle {
|
|
|
|
transform: Transform::from_translation(position),
|
|
|
|
texture: texture_handle.clone(),
|
|
|
|
sprite: Sprite {
|
|
|
|
custom_size: Some(size),
|
|
|
|
..default()
|
|
|
|
},
|
|
|
|
..default()
|
|
|
|
});
|
|
|
|
if let Some(scale_mode) = scale_mode {
|
2024-10-02 12:47:26 +00:00
|
|
|
cmd.insert(scale_mode);
|
2024-02-09 20:36:32 +00:00
|
|
|
}
|
|
|
|
cmd.with_children(|builder| {
|
|
|
|
builder.spawn(Text2dBundle {
|
|
|
|
text: Text::from_section(label, text_style).with_justify(JustifyText::Center),
|
|
|
|
transform: Transform::from_xyz(0., -0.5 * size.y - 10., 0.0),
|
|
|
|
text_anchor: bevy::sprite::Anchor::TopCenter,
|
2024-01-15 15:40:06 +00:00
|
|
|
..default()
|
|
|
|
});
|
2024-02-09 20:36:32 +00:00
|
|
|
});
|
2024-01-15 15:40:06 +00:00
|
|
|
position.x += 0.5 * size.x + gap;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|
|
|
commands.spawn(Camera2dBundle::default());
|
|
|
|
let font = asset_server.load("fonts/FiraSans-Bold.ttf");
|
|
|
|
let style = TextStyle {
|
|
|
|
font: font.clone(),
|
2024-05-31 16:41:27 +00:00
|
|
|
..default()
|
2024-01-15 15:40:06 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
// 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(),
|
2024-06-20 19:40:38 +00:00
|
|
|
40.,
|
2024-01-15 15:40:06 +00:00
|
|
|
);
|
|
|
|
|
|
|
|
spawn_sprites(
|
|
|
|
&mut commands,
|
|
|
|
handle_2,
|
|
|
|
Vec3::new(-600.0, -200.0, 0.0),
|
|
|
|
80.0,
|
|
|
|
style,
|
2024-06-20 19:40:38 +00:00
|
|
|
40.,
|
2024-01-15 15:40:06 +00:00
|
|
|
);
|
|
|
|
}
|