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>
99 lines
3.4 KiB
Rust
99 lines
3.4 KiB
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::*,
|
|
ui::widget::NodeImageMode,
|
|
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 ImageNode),
|
|
(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::all(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,
|
|
ImageNode {
|
|
image: image.clone(),
|
|
image_mode: NodeImageMode::Sliced(slicer.clone()),
|
|
..default()
|
|
},
|
|
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()
|
|
},
|
|
))
|
|
.with_child((
|
|
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)),
|
|
));
|
|
}
|
|
});
|
|
}
|