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( 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>, 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(); let mut text = text_query.get_mut(children[0]).unwrap();
match *interaction { match *interaction {
Interaction::Pressed => { Interaction::Pressed => {
text.sections[0].value = "Press".to_string(); text.sections[0].value = "Press".to_string();
color.0 = LegacyColor::GOLD;
} }
Interaction::Hovered => { Interaction::Hovered => {
text.sections[0].value = "Hover".to_string(); text.sections[0].value = "Hover".to_string();
color.0 = LegacyColor::ORANGE;
} }
Interaction::None => { Interaction::None => {
text.sections[0].value = "Button".to_string(); 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() ..default()
}, },
image: image.clone().into(), image: image.clone().into(),
// When combined with an image, this tints the image.
background_color: LegacyColor::WHITE.into(),
..default() ..default()
}, },
ImageScaleMode::Sliced(slicer.clone()), ImageScaleMode::Sliced(slicer.clone()),