Fix "game_menu" example buttons not changing color on Interaction (#15153)

# Objective

Fixes #15079 , repairing the `game_menu` example

## Solution

- Changed the target component for the color updates from `UiImage` to
`BackgroundColor`.
- Changed the width of the `button_style` to `300px` to prevent overlap
with the text.

## Testing

Checked that buttons now correctly update their background color on
hover/exit/press.

---

## Showcase



https://github.com/user-attachments/assets/8f7ede9b-c271-4b59-91f9-27d9e3db1429
This commit is contained in:
Klaas-Jan Boon 2024-09-11 02:49:27 +02:00 committed by GitHub
parent 8e7ef64bb1
commit 37316c7706
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -345,16 +345,16 @@ mod menu {
// This system handles changing all buttons color based on mouse interaction
fn button_system(
mut interaction_query: Query<
(&Interaction, &mut UiImage, Option<&SelectedOption>),
(&Interaction, &mut BackgroundColor, Option<&SelectedOption>),
(Changed<Interaction>, With<Button>),
>,
) {
for (interaction, mut image, selected) in &mut interaction_query {
image.color = match (*interaction, selected) {
(Interaction::Pressed, _) | (Interaction::None, Some(_)) => PRESSED_BUTTON,
(Interaction::Hovered, Some(_)) => HOVERED_PRESSED_BUTTON,
(Interaction::Hovered, None) => HOVERED_BUTTON,
(Interaction::None, None) => NORMAL_BUTTON,
for (interaction, mut background_color, selected) in &mut interaction_query {
*background_color = match (*interaction, selected) {
(Interaction::Pressed, _) | (Interaction::None, Some(_)) => PRESSED_BUTTON.into(),
(Interaction::Hovered, Some(_)) => HOVERED_PRESSED_BUTTON.into(),
(Interaction::Hovered, None) => HOVERED_BUTTON.into(),
(Interaction::None, None) => NORMAL_BUTTON.into(),
}
}
}
@ -363,14 +363,14 @@ mod menu {
// the button as the one currently selected
fn setting_button<T: Resource + Component + PartialEq + Copy>(
interaction_query: Query<(&Interaction, &T, Entity), (Changed<Interaction>, With<Button>)>,
mut selected_query: Query<(Entity, &mut UiImage), With<SelectedOption>>,
mut selected_query: Query<(Entity, &mut BackgroundColor), With<SelectedOption>>,
mut commands: Commands,
mut setting: ResMut<T>,
) {
for (interaction, button_setting, entity) in &interaction_query {
if *interaction == Interaction::Pressed && *setting != *button_setting {
let (previous_button, mut previous_image) = selected_query.single_mut();
previous_image.color = NORMAL_BUTTON;
let (previous_button, mut previous_button_color) = selected_query.single_mut();
*previous_button_color = NORMAL_BUTTON.into();
commands.entity(previous_button).remove::<SelectedOption>();
commands.entity(entity).insert(SelectedOption);
*setting = *button_setting;
@ -385,7 +385,7 @@ mod menu {
fn main_menu_setup(mut commands: Commands, asset_server: Res<AssetServer>) {
// Common style for all buttons on the screen
let button_style = Style {
width: Val::Px(250.0),
width: Val::Px(300.0),
height: Val::Px(65.0),
margin: UiRect::all(Val::Px(20.0)),
justify_content: JustifyContent::Center,