Mirrors/bevy
2
0
Fork 0
mirror of https://github.com/bevyengine/bevy synced 2024-11-22 12:43:34 +00:00
Code Issues Projects Releases Packages Wiki Activity
bevy/examples/ui/display_and_visibility.rs
Alice Cecile 336fddb101
Make default behavior for BackgroundColor and BorderColor more intuitive (#14017) 
# Objective

In Bevy 0.13, `BackgroundColor` simply tinted the image of any
`UiImage`. This was confusing: in every other case (e.g. Text), this
added a solid square behind the element. #11165 changed this, but
removed `BackgroundColor` from `ImageBundle` to avoid confusion, since
the semantic meaning had changed.

However, this resulted in a serious UX downgrade / inconsistency, as
this behavior was no longer part of the bundle (unlike for `TextBundle`
or `NodeBundle`), leaving users with a relatively frustrating upgrade
path.

Additionally, adding both `BackgroundColor` and `UiImage` resulted in a
bizarre effect, where the background color was seemingly ignored as it
was covered by a solid white placeholder image.

Fixes #13969.

## Solution

Per @viridia's design:

> - if you don't specify a background color, it's transparent.
> - if you don't specify an image color, it's white (because it's a
multiplier).
> - if you don't specify an image, no image is drawn.
> - if you specify both a background color and an image color, they are
independent.
> - the background color is drawn behind the image (in whatever pixels
are transparent)

As laid out by @benfrankel, this involves:

1. Changing the default `UiImage` to use a transparent texture but a
pure white tint.
2. Adding `UiImage::solid_color` to quickly set placeholder images.
3. Changing the default `BorderColor` and `BackgroundColor` to
transparent.
4. Removing the default overrides for these values in the other assorted
UI bundles.
5. Adding `BackgroundColor` back to `ImageBundle` and `ButtonBundle`.
6. Adding a 1x1 `Image::transparent`, which can be accessed from
`Assets<Image>` via the `TRANSPARENT_IMAGE_HANDLE` constant.

Huge thanks to everyone who helped out with the design in the linked
issue and [the Discord
thread](https://discord.com/channels/691052431525675048/1255209923890118697/1255209999278280844):
this was very much a joint design.

@cart helped me figure out how to set the UiImage's default texture to a
transparent 1x1 image, which is a much nicer fix.

## Testing

I've checked the examples modified by this PR, and the `ui` example as
well just to be sure.

## Migration Guide

- `BackgroundColor` no longer tints the color of images in `ImageBundle`
or `ButtonBundle`. Set `UiImage::color` to tint images instead.
- The default texture for `UiImage` is now a transparent white square.
Use `UiImage::solid_color` to quickly draw debug images.
- The default value for `BackgroundColor` and `BorderColor` is now
transparent. Set the color to white manually to return to previous
behavior.
2024-06-25 21:50:41 +00:00

493 lines
21 KiB
Rust
Raw Blame History

//! Demonstrates how Display and Visibility work in the UI.
use bevy::winit::WinitSettings;
use bevy::{
color::palettes::css::{DARK_GRAY, YELLOW},
prelude::*,
};
const PALETTE: [&str; 4] = ["27496D", "466B7A", "669DB3", "ADCBE3"];
const HIDDEN_COLOR: Color = Color::srgb(1.0, 0.7, 0.7);
fn main() {
App::new()
.add_plugins(DefaultPlugins)
// Only run the app when there is user input. This will significantly reduce CPU/GPU use.
.insert_resource(WinitSettings::desktop_app())
.add_systems(Startup, setup)
.add_systems(
Update,
(
buttons_handler::<Display>,
buttons_handler::<Visibility>,
text_hover,
),
)
.run();
}
#[derive(Component)]
struct Target<T> {
id: Entity,
phantom: std::marker::PhantomData<T>,
}
impl<T> Target<T> {
fn new(id: Entity) -> Self {
Self {
id,
phantom: std::marker::PhantomData,
}
}
}
trait TargetUpdate {
type TargetComponent: Component;
const NAME: &'static str;
fn update_target(&self, target: &mut Self::TargetComponent) -> String;
}
impl TargetUpdate for Target<Display> {
type TargetComponent = Style;
const NAME: &'static str = "Display";
fn update_target(&self, style: &mut Self::TargetComponent) -> String {
style.display = match style.display {
Display::Flex => Display::None,
Display::None => Display::Flex,
Display::Block | Display::Grid => unreachable!(),
};
format!("{}::{:?} ", Self::NAME, style.display)
}
}
impl TargetUpdate for Target<Visibility> {
type TargetComponent = Visibility;
const NAME: &'static str = "Visibility";
fn update_target(&self, visibility: &mut Self::TargetComponent) -> String {
*visibility = match *visibility {
Visibility::Inherited => Visibility::Visible,
Visibility::Visible => Visibility::Hidden,
Visibility::Hidden => Visibility::Inherited,
};
format!("{}::{visibility:?}", Self::NAME)
}
}
fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
let palette: [Color; 4] = PALETTE.map(|hex| Srgba::hex(hex).unwrap().into());
let text_style = TextStyle {
font: asset_server.load("fonts/FiraSans-Bold.ttf"),
..default()
};
commands.spawn(Camera2dBundle::default());
commands.spawn(NodeBundle {
style: Style {
width: Val::Percent(100.),
height: Val::Percent(100.),
flex_direction: FlexDirection::Column,
align_items: AlignItems::Center,
justify_content: JustifyContent::SpaceEvenly,
..Default::default()
},
background_color: BackgroundColor(Color::BLACK),
..Default::default()
}).with_children(|parent| {
parent.spawn(TextBundle {
text: Text::from_section(
"Use the panel on the right to change the Display and Visibility properties for the respective nodes of the panel on the left",
text_style.clone(),
).with_justify(JustifyText::Center),
style: Style {
margin: UiRect::bottom(Val::Px(10.)),
..Default::default()
},
..Default::default()
});
parent
.spawn(NodeBundle {
style: Style {
width: Val::Percent(100.),
..Default::default()
},
..Default::default()
})
.with_children(|parent| {
let mut target_ids = vec![];
parent.spawn(NodeBundle {
style: Style {
width: Val::Percent(50.),
height: Val::Px(520.),
justify_content: JustifyContent::Center,
..Default::default()
},
..Default::default()
}).with_children(|parent| {
target_ids = spawn_left_panel(parent, &palette);
});
parent.spawn(NodeBundle {
style: Style {
width: Val::Percent(50.),
justify_content: JustifyContent::Center,
..Default::default()
},
..Default::default()
}).with_children(|parent| {
spawn_right_panel(parent, text_style, &palette, target_ids);
});
});
parent.spawn(NodeBundle {
style: Style {
flex_direction: FlexDirection::Row,
align_items: AlignItems::Start,
justify_content: JustifyContent::Start,
column_gap: Val::Px(10.),
..Default::default()
},
..default() })
.with_children(|builder| {
let text_style = TextStyle {
font: asset_server.load("fonts/FiraSans-Bold.ttf"),
..default()
};
builder.spawn(TextBundle {
text: Text::from_section(
"Display::None\nVisibility::Hidden\nVisibility::Inherited",
TextStyle { color: HIDDEN_COLOR, ..text_style.clone() }
).with_justify(JustifyText::Center),
..Default::default()
});
builder.spawn(TextBundle {
text: Text::from_section(
"-\n-\n-",
TextStyle { color: DARK_GRAY.into(), ..text_style.clone() }
).with_justify(JustifyText::Center),
..Default::default()
});
builder.spawn(TextBundle::from_section(
"The UI Node and its descendants will not be visible and will not be allotted any space in the UI layout.\nThe UI Node will not be visible but will still occupy space in the UI layout.\nThe UI node will inherit the visibility property of its parent. If it has no parent it will be visible.",
text_style
));
});
});
}
fn spawn_left_panel(builder: &mut ChildBuilder, palette: &[Color; 4]) -> Vec<Entity> {
let mut target_ids = vec![];
builder
.spawn(NodeBundle {
style: Style {
padding: UiRect::all(Val::Px(10.)),
..Default::default()
},
background_color: BackgroundColor(Color::WHITE),
..Default::default()
})
.with_children(|parent| {
parent
.spawn(NodeBundle {
background_color: BackgroundColor(Color::BLACK),
..Default::default()
})
.with_children(|parent| {
let id = parent
.spawn(NodeBundle {
style: Style {
align_items: AlignItems::FlexEnd,
justify_content: JustifyContent::FlexEnd,
..Default::default()
},
background_color: BackgroundColor(palette[0]),
..Default::default()
})
.with_children(|parent| {
parent.spawn(NodeBundle {
style: Style {
width: Val::Px(100.),
height: Val::Px(500.),
..Default::default()
},
..Default::default()
});
let id = parent
.spawn(NodeBundle {
style: Style {
height: Val::Px(400.),
align_items: AlignItems::FlexEnd,
justify_content: JustifyContent::FlexEnd,
..Default::default()
},
background_color: BackgroundColor(palette[1]),
..Default::default()
})
.with_children(|parent| {
parent.spawn(NodeBundle {
style: Style {
width: Val::Px(100.),
height: Val::Px(400.),
..Default::default()
},
..Default::default()
});
let id = parent
.spawn(NodeBundle {
style: Style {
height: Val::Px(300.),
align_items: AlignItems::FlexEnd,
justify_content: JustifyContent::FlexEnd,
..Default::default()
},
background_color: BackgroundColor(palette[2]),
..Default::default()
})
.with_children(|parent| {
parent.spawn(NodeBundle {
style: Style {
width: Val::Px(100.),
height: Val::Px(300.),
..Default::default()
},
..Default::default()
});
let id = parent
.spawn(NodeBundle {
style: Style {
width: Val::Px(200.),
height: Val::Px(200.),
..Default::default()
},
background_color: BackgroundColor(palette[3]),
..Default::default()
})
.id();
target_ids.push(id);
})
.id();
target_ids.push(id);
})
.id();
target_ids.push(id);
})
.id();
target_ids.push(id);
});
});
target_ids
}
fn spawn_right_panel(
parent: &mut ChildBuilder,
text_style: TextStyle,
palette: &[Color; 4],
mut target_ids: Vec<Entity>,
) {
let spawn_buttons = |parent: &mut ChildBuilder, target_id| {
spawn_button::<Display>(parent, text_style.clone(), target_id);
spawn_button::<Visibility>(parent, text_style.clone(), target_id);
};
parent
.spawn(NodeBundle {
style: Style {
padding: UiRect::all(Val::Px(10.)),
..Default::default()
},
background_color: BackgroundColor(Color::WHITE),
..Default::default()
})
.with_children(|parent| {
parent
.spawn(NodeBundle {
style: Style {
width: Val::Px(500.),
height: Val::Px(500.),
flex_direction: FlexDirection::Column,
align_items: AlignItems::FlexEnd,
justify_content: JustifyContent::SpaceBetween,
padding: UiRect {
left: Val::Px(5.),
top: Val::Px(5.),
..Default::default()
},
..Default::default()
},
background_color: BackgroundColor(palette[0]),
..Default::default()
})
.with_children(|parent| {
spawn_buttons(parent, target_ids.pop().unwrap());
parent
.spawn(NodeBundle {
style: Style {
width: Val::Px(400.),
height: Val::Px(400.),
flex_direction: FlexDirection::Column,
align_items: AlignItems::FlexEnd,
justify_content: JustifyContent::SpaceBetween,
padding: UiRect {
left: Val::Px(5.),
top: Val::Px(5.),
..Default::default()
},
..Default::default()
},
background_color: BackgroundColor(palette[1]),
..Default::default()
})
.with_children(|parent| {
spawn_buttons(parent, target_ids.pop().unwrap());
parent
.spawn(NodeBundle {
style: Style {
width: Val::Px(300.),
height: Val::Px(300.),
flex_direction: FlexDirection::Column,
align_items: AlignItems::FlexEnd,
justify_content: JustifyContent::SpaceBetween,
padding: UiRect {
left: Val::Px(5.),
top: Val::Px(5.),
..Default::default()
},
..Default::default()
},
background_color: BackgroundColor(palette[2]),
..Default::default()
})
.with_children(|parent| {
spawn_buttons(parent, target_ids.pop().unwrap());
parent
.spawn(NodeBundle {
style: Style {
width: Val::Px(200.),
height: Val::Px(200.),
align_items: AlignItems::FlexStart,
justify_content: JustifyContent::SpaceBetween,
flex_direction: FlexDirection::Column,
padding: UiRect {
left: Val::Px(5.),
top: Val::Px(5.),
..Default::default()
},
..Default::default()
},
background_color: BackgroundColor(palette[3]),
..Default::default()
})
.with_children(|parent| {
spawn_buttons(parent, target_ids.pop().unwrap());
parent.spawn(NodeBundle {
style: Style {
width: Val::Px(100.),
height: Val::Px(100.),
..Default::default()
},
..Default::default()
});
});
});
});
});
});
}
fn spawn_button<T>(parent: &mut ChildBuilder, text_style: TextStyle, target: Entity)
where
T: Default + std::fmt::Debug + Send + Sync + 'static,
Target<T>: TargetUpdate,
{
parent
.spawn((
ButtonBundle {
style: Style {
align_self: AlignSelf::FlexStart,
padding: UiRect::axes(Val::Px(5.), Val::Px(1.)),
..Default::default()
},
background_color: Color::BLACK.with_alpha(0.5).into(),
..Default::default()
},
Target::<T>::new(target),
))
.with_children(|builder| {
builder.spawn(
TextBundle::from_section(
format!("{}::{:?}", Target::<T>::NAME, T::default()),
text_style,
)
.with_text_justify(JustifyText::Center),
);
});
}
fn buttons_handler<T>(
mut left_panel_query: Query<&mut <Target<T> as TargetUpdate>::TargetComponent>,
mut visibility_button_query: Query<(&Target<T>, &Interaction, &Children), Changed<Interaction>>,
mut text_query: Query<&mut Text>,
) where
T: Send + Sync,
Target<T>: TargetUpdate + Component,
{
for (target, interaction, children) in visibility_button_query.iter_mut() {
if matches!(interaction, Interaction::Pressed) {
let mut target_value = left_panel_query.get_mut(target.id).unwrap();
for &child in children {
if let Ok(mut text) = text_query.get_mut(child) {
text.sections[0].value = target.update_target(target_value.as_mut());
text.sections[0].style.color = if text.sections[0].value.contains("None")
|| text.sections[0].value.contains("Hidden")
{
Color::srgb(1.0, 0.7, 0.7)
} else {
Color::WHITE
};
}
}
}
}
}
fn text_hover(
mut button_query: Query<(&Interaction, &mut UiImage, &Children), Changed<Interaction>>,
mut text_query: Query<&mut Text>,
) {
for (interaction, mut image, children) in button_query.iter_mut() {
match interaction {
Interaction::Hovered => {
image.color = Color::BLACK.with_alpha(0.6);
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
text.bypass_change_detection().sections[0].style.color = YELLOW.into();
}
}
}
_ => {
image.color = Color::BLACK.with_alpha(0.5);
for &child in children {
if let Ok(mut text) = text_query.get_mut(child) {
text.bypass_change_detection().sections[0].style.color =
if text.sections[0].value.contains("None")
|| text.sections[0].value.contains("Hidden")
{
HIDDEN_COLOR
} else {
Color::WHITE
};
}
}
}
}
}
}
Reference in a new issue View git blame Copy permalink