Add tinting to the border in ui_texture_slice example (#11901)

# Objective

This is just a cool property of the full-white border texture we added
for this example that I think would be nice to show off.

## Solution

Add a tint to the border on hover / click.


![screenshot-100](https://github.com/bevyengine/bevy/assets/200550/a436c383-2cda-4578-999d-b89d244c993d)
This commit is contained in:
Rob Parrett 2024-02-28 10:21:09 -07:00 committed by GitHub
parent a543536a34
commit 315e637bf5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -14,20 +14,26 @@ fn main() {
}
fn button_system(
interaction_query: Query<(&Interaction, &Children), (Changed<Interaction>, With<Button>)>,
mut interaction_query: Query<
(&Interaction, &Children, &mut BackgroundColor),
(Changed<Interaction>, With<Button>),
>,
mut text_query: Query<&mut Text>,
) {
for (interaction, children) in &interaction_query {
for (interaction, children, mut color) in &mut interaction_query {
let mut text = text_query.get_mut(children[0]).unwrap();
match *interaction {
Interaction::Pressed => {
text.sections[0].value = "Press".to_string();
color.0 = LegacyColor::GOLD;
}
Interaction::Hovered => {
text.sections[0].value = "Hover".to_string();
color.0 = LegacyColor::ORANGE;
}
Interaction::None => {
text.sections[0].value = "Button".to_string();
color.0 = LegacyColor::WHITE;
}
}
}
@ -71,6 +77,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
..default()
},
image: image.clone().into(),
// When combined with an image, this tints the image.
background_color: LegacyColor::WHITE.into(),
..default()
},
ImageScaleMode::Sliced(slicer.clone()),