fix remaining issues with background color in examples (#14115)
# Objective - Fixes #14097 ## Solution - Switching the uses of `UiImage` in examples to `BackgroundColor` when needed
This commit is contained in:
		
							parent
							
								
									a47b91cccc
								
							
						
					
					
						commit
						160bcc787c
					
				@ -224,20 +224,19 @@ fn menu(
 | 
			
		||||
    tutorial_state: Res<State<TutorialState>>,
 | 
			
		||||
    mut next_tutorial: ResMut<NextState<TutorialState>>,
 | 
			
		||||
    mut interaction_query: Query<
 | 
			
		||||
        (&Interaction, &mut UiImage, &MenuButton),
 | 
			
		||||
        (&Interaction, &mut BackgroundColor, &MenuButton),
 | 
			
		||||
        (Changed<Interaction>, With<Button>),
 | 
			
		||||
    >,
 | 
			
		||||
) {
 | 
			
		||||
    for (interaction, mut image, menu_button) in &mut interaction_query {
 | 
			
		||||
        let color = &mut image.color;
 | 
			
		||||
    for (interaction, mut color, menu_button) in &mut interaction_query {
 | 
			
		||||
        match *interaction {
 | 
			
		||||
            Interaction::Pressed => {
 | 
			
		||||
                *color = if menu_button == &MenuButton::Tutorial
 | 
			
		||||
                    && tutorial_state.get() == &TutorialState::Active
 | 
			
		||||
                {
 | 
			
		||||
                    PRESSED_ACTIVE_BUTTON
 | 
			
		||||
                    PRESSED_ACTIVE_BUTTON.into()
 | 
			
		||||
                } else {
 | 
			
		||||
                    PRESSED_BUTTON
 | 
			
		||||
                    PRESSED_BUTTON.into()
 | 
			
		||||
                };
 | 
			
		||||
 | 
			
		||||
                match menu_button {
 | 
			
		||||
@ -255,18 +254,18 @@ fn menu(
 | 
			
		||||
                if menu_button == &MenuButton::Tutorial
 | 
			
		||||
                    && tutorial_state.get() == &TutorialState::Active
 | 
			
		||||
                {
 | 
			
		||||
                    *color = HOVERED_ACTIVE_BUTTON;
 | 
			
		||||
                    *color = HOVERED_ACTIVE_BUTTON.into();
 | 
			
		||||
                } else {
 | 
			
		||||
                    *color = HOVERED_BUTTON;
 | 
			
		||||
                    *color = HOVERED_BUTTON.into();
 | 
			
		||||
                }
 | 
			
		||||
            }
 | 
			
		||||
            Interaction::None => {
 | 
			
		||||
                if menu_button == &MenuButton::Tutorial
 | 
			
		||||
                    && tutorial_state.get() == &TutorialState::Active
 | 
			
		||||
                {
 | 
			
		||||
                    *color = ACTIVE_BUTTON;
 | 
			
		||||
                    *color = ACTIVE_BUTTON.into();
 | 
			
		||||
                } else {
 | 
			
		||||
                    *color = NORMAL_BUTTON;
 | 
			
		||||
                    *color = NORMAL_BUTTON.into();
 | 
			
		||||
                }
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
@ -142,22 +142,21 @@ mod custom_transitions {
 | 
			
		||||
fn menu(
 | 
			
		||||
    mut next_state: ResMut<NextState<AppState>>,
 | 
			
		||||
    mut interaction_query: Query<
 | 
			
		||||
        (&Interaction, &mut UiImage),
 | 
			
		||||
        (&Interaction, &mut BackgroundColor),
 | 
			
		||||
        (Changed<Interaction>, With<Button>),
 | 
			
		||||
    >,
 | 
			
		||||
) {
 | 
			
		||||
    for (interaction, mut image) in &mut interaction_query {
 | 
			
		||||
        let color = &mut image.color;
 | 
			
		||||
    for (interaction, mut color) in &mut interaction_query {
 | 
			
		||||
        match *interaction {
 | 
			
		||||
            Interaction::Pressed => {
 | 
			
		||||
                *color = PRESSED_BUTTON;
 | 
			
		||||
                *color = PRESSED_BUTTON.into();
 | 
			
		||||
                next_state.set(AppState::InGame);
 | 
			
		||||
            }
 | 
			
		||||
            Interaction::Hovered => {
 | 
			
		||||
                *color = HOVERED_BUTTON;
 | 
			
		||||
                *color = HOVERED_BUTTON.into();
 | 
			
		||||
            }
 | 
			
		||||
            Interaction::None => {
 | 
			
		||||
                *color = NORMAL_BUTTON;
 | 
			
		||||
                *color = NORMAL_BUTTON.into();
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
@ -95,21 +95,21 @@ fn setup_menu(mut commands: Commands) {
 | 
			
		||||
fn menu(
 | 
			
		||||
    mut next_state: ResMut<NextState<AppState>>,
 | 
			
		||||
    mut interaction_query: Query<
 | 
			
		||||
        (&Interaction, &mut UiImage),
 | 
			
		||||
        (&Interaction, &mut BackgroundColor),
 | 
			
		||||
        (Changed<Interaction>, With<Button>),
 | 
			
		||||
    >,
 | 
			
		||||
) {
 | 
			
		||||
    for (interaction, mut image) in &mut interaction_query {
 | 
			
		||||
    for (interaction, mut color) in &mut interaction_query {
 | 
			
		||||
        match *interaction {
 | 
			
		||||
            Interaction::Pressed => {
 | 
			
		||||
                image.color = PRESSED_BUTTON;
 | 
			
		||||
                *color = PRESSED_BUTTON.into();
 | 
			
		||||
                next_state.set(AppState::InGame);
 | 
			
		||||
            }
 | 
			
		||||
            Interaction::Hovered => {
 | 
			
		||||
                image.color = HOVERED_BUTTON;
 | 
			
		||||
                *color = HOVERED_BUTTON.into();
 | 
			
		||||
            }
 | 
			
		||||
            Interaction::None => {
 | 
			
		||||
                image.color = NORMAL_BUTTON;
 | 
			
		||||
                *color = NORMAL_BUTTON.into();
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
@ -63,22 +63,21 @@ fn main() {
 | 
			
		||||
fn menu(
 | 
			
		||||
    mut next_state: ResMut<NextState<AppState>>,
 | 
			
		||||
    mut interaction_query: Query<
 | 
			
		||||
        (&Interaction, &mut UiImage),
 | 
			
		||||
        (&Interaction, &mut BackgroundColor),
 | 
			
		||||
        (Changed<Interaction>, With<Button>),
 | 
			
		||||
    >,
 | 
			
		||||
) {
 | 
			
		||||
    for (interaction, mut image) in &mut interaction_query {
 | 
			
		||||
        let color = &mut image.color;
 | 
			
		||||
    for (interaction, mut color) in &mut interaction_query {
 | 
			
		||||
        match *interaction {
 | 
			
		||||
            Interaction::Pressed => {
 | 
			
		||||
                *color = PRESSED_BUTTON;
 | 
			
		||||
                *color = PRESSED_BUTTON.into();
 | 
			
		||||
                next_state.set(AppState::InGame);
 | 
			
		||||
            }
 | 
			
		||||
            Interaction::Hovered => {
 | 
			
		||||
                *color = HOVERED_BUTTON;
 | 
			
		||||
                *color = HOVERED_BUTTON.into();
 | 
			
		||||
            }
 | 
			
		||||
            Interaction::None => {
 | 
			
		||||
                *color = NORMAL_BUTTON;
 | 
			
		||||
                *color = NORMAL_BUTTON.into();
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
@ -100,12 +100,15 @@ fn main() {
 | 
			
		||||
struct IdleColor(Color);
 | 
			
		||||
 | 
			
		||||
fn button_system(
 | 
			
		||||
    mut interaction_query: Query<(&Interaction, &mut UiImage, &IdleColor), Changed<Interaction>>,
 | 
			
		||||
    mut interaction_query: Query<
 | 
			
		||||
        (&Interaction, &mut BackgroundColor, &IdleColor),
 | 
			
		||||
        Changed<Interaction>,
 | 
			
		||||
    >,
 | 
			
		||||
) {
 | 
			
		||||
    for (interaction, mut image, &IdleColor(idle_color)) in interaction_query.iter_mut() {
 | 
			
		||||
        image.color = match interaction {
 | 
			
		||||
    for (interaction, mut color, &IdleColor(idle_color)) in interaction_query.iter_mut() {
 | 
			
		||||
        *color = match interaction {
 | 
			
		||||
            Interaction::Hovered => ORANGE_RED.into(),
 | 
			
		||||
            _ => idle_color,
 | 
			
		||||
            _ => idle_color.into(),
 | 
			
		||||
        };
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -19,27 +19,32 @@ const PRESSED_BUTTON: Color = Color::srgb(0.35, 0.75, 0.35);
 | 
			
		||||
 | 
			
		||||
fn button_system(
 | 
			
		||||
    mut interaction_query: Query<
 | 
			
		||||
        (&Interaction, &mut UiImage, &mut BorderColor, &Children),
 | 
			
		||||
        (
 | 
			
		||||
            &Interaction,
 | 
			
		||||
            &mut BackgroundColor,
 | 
			
		||||
            &mut BorderColor,
 | 
			
		||||
            &Children,
 | 
			
		||||
        ),
 | 
			
		||||
        (Changed<Interaction>, With<Button>),
 | 
			
		||||
    >,
 | 
			
		||||
    mut text_query: Query<&mut Text>,
 | 
			
		||||
) {
 | 
			
		||||
    for (interaction, mut image, mut border_color, children) in &mut interaction_query {
 | 
			
		||||
    for (interaction, mut color, mut border_color, children) 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();
 | 
			
		||||
                image.color = PRESSED_BUTTON;
 | 
			
		||||
                *color = PRESSED_BUTTON.into();
 | 
			
		||||
                border_color.0 = RED.into();
 | 
			
		||||
            }
 | 
			
		||||
            Interaction::Hovered => {
 | 
			
		||||
                text.sections[0].value = "Hover".to_string();
 | 
			
		||||
                image.color = HOVERED_BUTTON;
 | 
			
		||||
                *color = HOVERED_BUTTON.into();
 | 
			
		||||
                border_color.0 = Color::WHITE;
 | 
			
		||||
            }
 | 
			
		||||
            Interaction::None => {
 | 
			
		||||
                text.sections[0].value = "Button".to_string();
 | 
			
		||||
                image.color = NORMAL_BUTTON;
 | 
			
		||||
                *color = NORMAL_BUTTON.into();
 | 
			
		||||
                border_color.0 = Color::BLACK;
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
@ -459,13 +459,13 @@ fn buttons_handler<T>(
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
fn text_hover(
 | 
			
		||||
    mut button_query: Query<(&Interaction, &mut UiImage, &Children), Changed<Interaction>>,
 | 
			
		||||
    mut button_query: Query<(&Interaction, &mut BackgroundColor, &Children), Changed<Interaction>>,
 | 
			
		||||
    mut text_query: Query<&mut Text>,
 | 
			
		||||
) {
 | 
			
		||||
    for (interaction, mut image, children) in button_query.iter_mut() {
 | 
			
		||||
    for (interaction, mut color, children) in button_query.iter_mut() {
 | 
			
		||||
        match interaction {
 | 
			
		||||
            Interaction::Hovered => {
 | 
			
		||||
                image.color = Color::BLACK.with_alpha(0.6);
 | 
			
		||||
                *color = Color::BLACK.with_alpha(0.6).into();
 | 
			
		||||
                for &child in children {
 | 
			
		||||
                    if let Ok(mut text) = text_query.get_mut(child) {
 | 
			
		||||
                        // Bypass change detection to avoid recomputation of the text when only changing the color
 | 
			
		||||
@ -474,7 +474,7 @@ fn text_hover(
 | 
			
		||||
                }
 | 
			
		||||
            }
 | 
			
		||||
            _ => {
 | 
			
		||||
                image.color = Color::BLACK.with_alpha(0.5);
 | 
			
		||||
                *color = Color::BLACK.with_alpha(0.5).into();
 | 
			
		||||
                for &child in children {
 | 
			
		||||
                    if let Ok(mut text) = text_query.get_mut(child) {
 | 
			
		||||
                        text.bypass_change_detection().sections[0].style.color =
 | 
			
		||||
 | 
			
		||||
@ -245,7 +245,7 @@ fn spawn_button(
 | 
			
		||||
                    margin: UiRect::horizontal(Val::Px(2.)),
 | 
			
		||||
                    ..Default::default()
 | 
			
		||||
                },
 | 
			
		||||
                background_color: if active {
 | 
			
		||||
                border_color: if active {
 | 
			
		||||
                    ACTIVE_BORDER_COLOR
 | 
			
		||||
                } else {
 | 
			
		||||
                    INACTIVE_BORDER_COLOR
 | 
			
		||||
@ -359,7 +359,7 @@ fn update_buttons(
 | 
			
		||||
fn update_radio_buttons_colors(
 | 
			
		||||
    mut event_reader: EventReader<ButtonActivatedEvent>,
 | 
			
		||||
    button_query: Query<(Entity, &Constraint, &Interaction)>,
 | 
			
		||||
    mut image_query: Query<&mut UiImage>,
 | 
			
		||||
    mut border_query: Query<&mut BorderColor>,
 | 
			
		||||
    mut color_query: Query<&mut BackgroundColor>,
 | 
			
		||||
    mut text_query: Query<&mut Text>,
 | 
			
		||||
    children_query: Query<&Children>,
 | 
			
		||||
@ -382,7 +382,7 @@ fn update_radio_buttons_colors(
 | 
			
		||||
                    )
 | 
			
		||||
                };
 | 
			
		||||
 | 
			
		||||
                image_query.get_mut(id).unwrap().color = border_color;
 | 
			
		||||
                border_query.get_mut(id).unwrap().0 = border_color;
 | 
			
		||||
                for &child in children_query.get(id).into_iter().flatten() {
 | 
			
		||||
                    color_query.get_mut(child).unwrap().0 = inner_color;
 | 
			
		||||
                    for &grandchild in children_query.get(child).into_iter().flatten() {
 | 
			
		||||
 | 
			
		||||
@ -19,26 +19,31 @@ fn main() {
 | 
			
		||||
 | 
			
		||||
fn button_system(
 | 
			
		||||
    mut interaction_query: Query<
 | 
			
		||||
        (&Interaction, &mut TextureAtlas, &Children, &mut UiImage),
 | 
			
		||||
        (
 | 
			
		||||
            &Interaction,
 | 
			
		||||
            &mut TextureAtlas,
 | 
			
		||||
            &Children,
 | 
			
		||||
            &mut BackgroundColor,
 | 
			
		||||
        ),
 | 
			
		||||
        (Changed<Interaction>, With<Button>),
 | 
			
		||||
    >,
 | 
			
		||||
    mut text_query: Query<&mut Text>,
 | 
			
		||||
) {
 | 
			
		||||
    for (interaction, mut atlas, children, mut image) in &mut interaction_query {
 | 
			
		||||
    for (interaction, mut atlas, 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();
 | 
			
		||||
                atlas.index = (atlas.index + 1) % 30;
 | 
			
		||||
                image.color = GOLD.into();
 | 
			
		||||
                *color = GOLD.into();
 | 
			
		||||
            }
 | 
			
		||||
            Interaction::Hovered => {
 | 
			
		||||
                text.sections[0].value = "Hover".to_string();
 | 
			
		||||
                image.color = ORANGE.into();
 | 
			
		||||
                *color = ORANGE.into();
 | 
			
		||||
            }
 | 
			
		||||
            Interaction::None => {
 | 
			
		||||
                text.sections[0].value = "Button".to_string();
 | 
			
		||||
                image.color = Color::WHITE;
 | 
			
		||||
                *color = Color::BLACK.into();
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
@ -19,25 +19,25 @@ fn main() {
 | 
			
		||||
 | 
			
		||||
fn button_system(
 | 
			
		||||
    mut interaction_query: Query<
 | 
			
		||||
        (&Interaction, &Children, &mut UiImage),
 | 
			
		||||
        (&Interaction, &Children, &mut BackgroundColor),
 | 
			
		||||
        (Changed<Interaction>, With<Button>),
 | 
			
		||||
    >,
 | 
			
		||||
    mut text_query: Query<&mut Text>,
 | 
			
		||||
) {
 | 
			
		||||
    for (interaction, children, mut image) in &mut 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();
 | 
			
		||||
                image.color = GOLD.into();
 | 
			
		||||
                *color = GOLD.into();
 | 
			
		||||
            }
 | 
			
		||||
            Interaction::Hovered => {
 | 
			
		||||
                text.sections[0].value = "Hover".to_string();
 | 
			
		||||
                image.color = ORANGE.into();
 | 
			
		||||
                *color = ORANGE.into();
 | 
			
		||||
            }
 | 
			
		||||
            Interaction::None => {
 | 
			
		||||
                text.sections[0].value = "Button".to_string();
 | 
			
		||||
                image.color = Color::WHITE;
 | 
			
		||||
                *color = Color::BLACK.into();
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user