fix remaining issues with background color in examples (#14115)

# Objective

- Fixes #14097

## Solution

- Switching the uses of `UiImage` in examples to `BackgroundColor` when
needed

examples/state/computed_states.rs

@@ -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();
  }
  }
  }

examples/state/custom_transitions.rs

@@ -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();
  }
  }
  }

examples/state/states.rs

@@ -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();
  }
  }
  }

examples/state/sub_states.rs

@@ -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();
  }
  }
  }

examples/stress_tests/many_buttons.rs

@@ -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(),
  };
  }
 }

examples/ui/button.rs

@@ -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;
  }
  }

examples/ui/display_and_visibility.rs

@@ -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 =

examples/ui/size_constraints.rs

@@ -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() {

examples/ui/ui_texture_atlas_slice.rs

@@ -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();
  }
  }
  }

examples/ui/ui_texture_slice.rs

@@ -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();
  }
  }
  }