f4800c24ba
# Objective The doc comments and function namings for `BorderRect` feel imprecise to me. Particularly the `square` function which is used to define a uniform `BorderRect` with equal widths on each edge. But this is potentially confusing since this "square" border could be around an oblong shape. Using "padding" to refer to the border extents seems undesirable too since "padding" is typically used to refer to the area between border and content, not the border itself. ## Solution * Rename `square` to `all` (this matches the name of the similar method on `UiRect`). * Rename `rectangle` to `axes` (this matches the name of the similar method on `UiRect`). * Update doc comments. ## Migration Guide The `square` and `rectangle` functions belonging to `BorderRect` have been renamed to `all` and `axes`. --------- Co-authored-by: Alice Cecile <alice.i.cecile@gmail.com>
75 lines
2.8 KiB
Rust
75 lines
2.8 KiB
Rust
//! This example illustrates how to how to flip and tile images with 9-slicing in the UI.
|
|
|
|
use bevy::{
|
|
image::{ImageLoaderSettings, ImageSampler},
|
|
prelude::*,
|
|
ui::widget::NodeImageMode,
|
|
winit::WinitSettings,
|
|
};
|
|
|
|
fn main() {
|
|
App::new()
|
|
.add_plugins(DefaultPlugins)
|
|
.insert_resource(UiScale(2.))
|
|
// Only run the app when there is user input. This will significantly reduce CPU/GPU use for UI-only apps.
|
|
.insert_resource(WinitSettings::desktop_app())
|
|
.add_systems(Startup, setup)
|
|
.run();
|
|
}
|
|
|
|
fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|
let image = asset_server.load_with_settings(
|
|
"textures/fantasy_ui_borders/numbered_slices.png",
|
|
|settings: &mut ImageLoaderSettings| {
|
|
// Need to use nearest filtering to avoid bleeding between the slices with tiling
|
|
settings.sampler = ImageSampler::nearest();
|
|
},
|
|
);
|
|
|
|
let slicer = TextureSlicer {
|
|
// `numbered_slices.png` is 48 pixels square. `BorderRect::square(16.)` insets the slicing line from each edge by 16 pixels, resulting in nine slices that are each 16 pixels square.
|
|
border: BorderRect::all(16.),
|
|
// With `SliceScaleMode::Tile` the side and center slices are tiled to fill the side and center sections of the target.
|
|
// And with a `stretch_value` of `1.` the tiles will have the same size as the corresponding slices in the source image.
|
|
center_scale_mode: SliceScaleMode::Tile { stretch_value: 1. },
|
|
sides_scale_mode: SliceScaleMode::Tile { stretch_value: 1. },
|
|
..default()
|
|
};
|
|
|
|
// ui camera
|
|
commands.spawn(Camera2d);
|
|
|
|
commands
|
|
.spawn(Node {
|
|
width: Val::Percent(100.),
|
|
height: Val::Percent(100.),
|
|
justify_content: JustifyContent::Center,
|
|
align_content: AlignContent::Center,
|
|
flex_wrap: FlexWrap::Wrap,
|
|
column_gap: Val::Px(10.),
|
|
row_gap: Val::Px(10.),
|
|
..default()
|
|
})
|
|
.with_children(|parent| {
|
|
for [columns, rows] in [[3., 3.], [4., 4.], [5., 4.], [4., 5.], [5., 5.]] {
|
|
for (flip_x, flip_y) in [(false, false), (false, true), (true, false), (true, true)]
|
|
{
|
|
parent.spawn((
|
|
ImageNode {
|
|
image: image.clone(),
|
|
flip_x,
|
|
flip_y,
|
|
image_mode: NodeImageMode::Sliced(slicer.clone()),
|
|
..default()
|
|
},
|
|
Node {
|
|
width: Val::Px(16. * columns),
|
|
height: Val::Px(16. * rows),
|
|
..default()
|
|
},
|
|
));
|
|
}
|
|
}
|
|
});
|
|
}
|