bevy/examples/2d/sprite_slice.rs
Félix Lescaudey de Maneville 01139b3472
Sprite slicing and tiling (#10588)
> Replaces #5213

# Objective

Implement sprite tiling and [9 slice
scaling](https://en.wikipedia.org/wiki/9-slice_scaling) for
`bevy_sprite`.
Allowing slice scaling and texture tiling.

Basic scaling vs 9 slice scaling:


![Traditional_scaling_vs_9-slice_scaling](https://user-images.githubusercontent.com/26703856/177335801-27f6fa27-c569-4ce6-b0e6-4f54e8f4e80a.svg)

Slicing example:

<img width="481" alt="Screenshot 2022-07-05 at 15 05 49"
src="https://user-images.githubusercontent.com/26703856/177336112-9e961af0-c0af-4197-aec9-430c1170a79d.png">

Tiling example:

<img width="1329" alt="Screenshot 2023-11-16 at 13 53 32"
src="https://github.com/bevyengine/bevy/assets/26703856/14db39b7-d9e0-4bc3-ba0e-b1f2db39ae8f">

# Solution

- `SpriteBundlue` now has a `scale_mode` component storing a
`SpriteScaleMode` enum with three variants:
  - `Stretched` (default) 
  - `Tiled` to have sprites tile horizontally and/or vertically
- `Sliced` allowing 9 slicing the texture and optionally tile some
sections with a `Textureslicer`.
- `bevy_sprite` has two extra systems to compute a
`ComputedTextureSlices` if necessary,:
- One system react to changes on `Sprite`, `Handle<Image>` or
`SpriteScaleMode`
- The other listens to `AssetEvent<Image>` to compute slices on sprites
when the texture is ready or changed
- I updated the `bevy_sprite` extraction stage to extract potentially
multiple textures instead of one, depending on the presence of
`ComputedTextureSlices`
- I added two examples showcasing the slicing and tiling feature.

The addition of `ComputedTextureSlices` as a cache is to avoid querying
the image data, to retrieve its dimensions, every frame in a extract or
prepare stage. Also it reacts to changes so we can have stuff like this
(tiling example):


https://github.com/bevyengine/bevy/assets/26703856/a349a9f3-33c3-471f-8ef4-a0e5dfce3b01

# Related 

- [ ] Once #5103 or #10099 is merged I can enable tiling and slicing for
texture sheets as ui

# To discuss

There is an other option, to consider slice/tiling as part of the asset,
using the new asset preprocessing but I have no clue on how to do it.

Also, instead of retrieving the Image dimensions, we could use the same
system as the sprite sheet and have the user give the image dimensions
directly (grid). But I think it's less user friendly

---------

Co-authored-by: Alice Cecile <alice.i.cecile@gmail.com>
Co-authored-by: ickshonpe <david.curthoys@googlemail.com>
Co-authored-by: Alice Cecile <alice.i.cecil@gmail.com>
2024-01-15 15:40:06 +00:00

144 lines
4.3 KiB
Rust

//! Showcases sprite 9 slice scaling
use bevy::prelude::*;
fn main() {
App::new()
.add_plugins(DefaultPlugins.set(WindowPlugin {
primary_window: Some(Window {
resolution: (1350.0, 700.0).into(),
..default()
}),
..default()
}))
.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
(
"Original texture",
style.clone(),
Vec2::splat(100.0),
ImageScaleMode::default(),
),
// Scaled regular sprite
(
"Stretched texture",
style.clone(),
Vec2::new(100.0, 200.0),
ImageScaleMode::default(),
),
// Stretched Scaled sliced sprite
(
"Stretched and sliced",
style.clone(),
Vec2::new(100.0, 200.0),
ImageScaleMode::Sliced(TextureSlicer {
border: BorderRect::square(slice_border),
center_scale_mode: SliceScaleMode::Stretch,
..default()
}),
),
// Scaled sliced sprite
(
"Sliced and Tiled",
style.clone(),
Vec2::new(100.0, 200.0),
ImageScaleMode::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
(
"Sliced and Tiled",
style.clone(),
Vec2::new(300.0, 200.0),
ImageScaleMode::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
(
"Sliced and Tiled with corner constraint",
style,
Vec2::new(300.0, 200.0),
ImageScaleMode::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;
commands
.spawn(SpriteBundle {
transform: Transform::from_translation(position),
texture: texture_handle.clone(),
sprite: Sprite {
custom_size: Some(size),
..default()
},
scale_mode,
..default()
})
.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,
..default()
});
});
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(),
font_size: 16.0,
color: Color::WHITE,
};
// 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(),
50.,
);
spawn_sprites(
&mut commands,
handle_2,
Vec3::new(-600.0, -200.0, 0.0),
80.0,
style,
50.,
);
}