mirror of
https://github.com/bevyengine/bevy
synced 2024-11-14 00:47:32 +00:00
599e5e4e76
# Objective - As part of the migration process we need to a) see the end effect of the migration on user ergonomics b) check for serious perf regressions c) actually migrate the code - To accomplish this, I'm going to attempt to migrate all of the remaining user-facing usages of `LegacyColor` in one PR, being careful to keep a clean commit history. - Fixes #12056. ## Solution I've chosen to use the polymorphic `Color` type as our standard user-facing API. - [x] Migrate `bevy_gizmos`. - [x] Take `impl Into<Color>` in all `bevy_gizmos` APIs - [x] Migrate sprites - [x] Migrate UI - [x] Migrate `ColorMaterial` - [x] Migrate `MaterialMesh2D` - [x] Migrate fog - [x] Migrate lights - [x] Migrate StandardMaterial - [x] Migrate wireframes - [x] Migrate clear color - [x] Migrate text - [x] Migrate gltf loader - [x] Register color types for reflection - [x] Remove `LegacyColor` - [x] Make sure CI passes Incidental improvements to ease migration: - added `Color::srgba_u8`, `Color::srgba_from_array` and friends - added `set_alpha`, `is_fully_transparent` and `is_fully_opaque` to the `Alpha` trait - add and immediately deprecate (lol) `Color::rgb` and friends in favor of more explicit and consistent `Color::srgb` - standardized on white and black for most example text colors - added vector field traits to `LinearRgba`: ~~`Add`, `Sub`, `AddAssign`, `SubAssign`,~~ `Mul<f32>` and `Div<f32>`. Multiplications and divisions do not scale alpha. `Add` and `Sub` have been cut from this PR. - added `LinearRgba` and `Srgba` `RED/GREEN/BLUE` - added `LinearRgba_to_f32_array` and `LinearRgba::to_u32` ## Migration Guide Bevy's color types have changed! Wherever you used a `bevy::render::Color`, a `bevy::color::Color` is used instead. These are quite similar! Both are enums storing a color in a specific color space (or to be more precise, using a specific color model). However, each of the different color models now has its own type. TODO... - `Color::rgba`, `Color::rgb`, `Color::rbga_u8`, `Color::rgb_u8`, `Color::rgb_from_array` are now `Color::srgba`, `Color::srgb`, `Color::srgba_u8`, `Color::srgb_u8` and `Color::srgb_from_array`. - `Color::set_a` and `Color::a` is now `Color::set_alpha` and `Color::alpha`. These are part of the `Alpha` trait in `bevy_color`. - `Color::is_fully_transparent` is now part of the `Alpha` trait in `bevy_color` - `Color::r`, `Color::set_r`, `Color::with_r` and the equivalents for `g`, `b` `h`, `s` and `l` have been removed due to causing silent relatively expensive conversions. Convert your `Color` into the desired color space, perform your operations there, and then convert it back into a polymorphic `Color` enum. - `Color::hex` is now `Srgba::hex`. Call `.into` or construct a `Color::Srgba` variant manually to convert it. - `WireframeMaterial`, `ExtractedUiNode`, `ExtractedDirectionalLight`, `ExtractedPointLight`, `ExtractedSpotLight` and `ExtractedSprite` now store a `LinearRgba`, rather than a polymorphic `Color` - `Color::rgb_linear` and `Color::rgba_linear` are now `Color::linear_rgb` and `Color::linear_rgba` - The various CSS color constants are no longer stored directly on `Color`. Instead, they're defined in the `Srgba` color space, and accessed via `bevy::color::palettes::css`. Call `.into()` on them to convert them into a `Color` for quick debugging use, and consider using the much prettier `tailwind` palette for prototyping. - The `LIME_GREEN` color has been renamed to `LIMEGREEN` to comply with the standard naming. - Vector field arithmetic operations on `Color` (add, subtract, multiply and divide by a f32) have been removed. Instead, convert your colors into `LinearRgba` space, and perform your operations explicitly there. This is particularly relevant when working with emissive or HDR colors, whose color channel values are routinely outside of the ordinary 0 to 1 range. - `Color::as_linear_rgba_f32` has been removed. Call `LinearRgba::to_f32_array` instead, converting if needed. - `Color::as_linear_rgba_u32` has been removed. Call `LinearRgba::to_u32` instead, converting if needed. - Several other color conversion methods to transform LCH or HSL colors into float arrays or `Vec` types have been removed. Please reimplement these externally or open a PR to re-add them if you found them particularly useful. - Various methods on `Color` such as `rgb` or `hsl` to convert the color into a specific color space have been removed. Convert into `LinearRgba`, then to the color space of your choice. - Various implicitly-converting color value methods on `Color` such as `r`, `g`, `b` or `h` have been removed. Please convert it into the color space of your choice, then check these properties. - `Color` no longer implements `AsBindGroup`. Store a `LinearRgba` internally instead to avoid conversion costs. --------- Co-authored-by: Alice Cecile <alice.i.cecil@gmail.com> Co-authored-by: Afonso Lage <lage.afonso@gmail.com> Co-authored-by: Rob Parrett <robparrett@gmail.com> Co-authored-by: Zachary Harrold <zac@harrold.com.au>
338 lines
15 KiB
Rust
338 lines
15 KiB
Rust
//! This example illustrates the various features of Bevy UI.
|
|
|
|
use bevy::{
|
|
a11y::{
|
|
accesskit::{NodeBuilder, Role},
|
|
AccessibilityNode,
|
|
},
|
|
color::palettes::basic::GREEN,
|
|
input::mouse::{MouseScrollUnit, MouseWheel},
|
|
prelude::*,
|
|
winit::WinitSettings,
|
|
};
|
|
|
|
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, mouse_scroll)
|
|
.run();
|
|
}
|
|
|
|
fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|
// Camera
|
|
commands.spawn(Camera2dBundle::default());
|
|
|
|
// root node
|
|
commands
|
|
.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Percent(100.0),
|
|
height: Val::Percent(100.0),
|
|
justify_content: JustifyContent::SpaceBetween,
|
|
..default()
|
|
},
|
|
..default()
|
|
})
|
|
.with_children(|parent| {
|
|
// left vertical fill (border)
|
|
parent
|
|
.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Px(200.),
|
|
border: UiRect::all(Val::Px(2.)),
|
|
..default()
|
|
},
|
|
background_color: Color::srgb(0.65, 0.65, 0.65).into(),
|
|
..default()
|
|
})
|
|
.with_children(|parent| {
|
|
// left vertical fill (content)
|
|
parent
|
|
.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Percent(100.),
|
|
..default()
|
|
},
|
|
background_color: Color::srgb(0.15, 0.15, 0.15).into(),
|
|
..default()
|
|
})
|
|
.with_children(|parent| {
|
|
// text
|
|
parent.spawn((
|
|
TextBundle::from_section(
|
|
"Text Example",
|
|
TextStyle {
|
|
font: asset_server.load("fonts/FiraSans-Bold.ttf"),
|
|
font_size: 30.0,
|
|
..default()
|
|
},
|
|
)
|
|
.with_style(Style {
|
|
margin: UiRect::all(Val::Px(5.)),
|
|
..default()
|
|
}),
|
|
// Because this is a distinct label widget and
|
|
// not button/list item text, this is necessary
|
|
// for accessibility to treat the text accordingly.
|
|
Label,
|
|
));
|
|
});
|
|
});
|
|
// right vertical fill
|
|
parent
|
|
.spawn(NodeBundle {
|
|
style: Style {
|
|
flex_direction: FlexDirection::Column,
|
|
justify_content: JustifyContent::Center,
|
|
align_items: AlignItems::Center,
|
|
width: Val::Px(200.),
|
|
..default()
|
|
},
|
|
background_color: Color::srgb(0.15, 0.15, 0.15).into(),
|
|
..default()
|
|
})
|
|
.with_children(|parent| {
|
|
// Title
|
|
parent.spawn((
|
|
TextBundle::from_section(
|
|
"Scrolling list",
|
|
TextStyle {
|
|
font: asset_server.load("fonts/FiraSans-Bold.ttf"),
|
|
font_size: 25.,
|
|
..default()
|
|
},
|
|
),
|
|
Label,
|
|
));
|
|
// List with hidden overflow
|
|
parent
|
|
.spawn(NodeBundle {
|
|
style: Style {
|
|
flex_direction: FlexDirection::Column,
|
|
align_self: AlignSelf::Stretch,
|
|
height: Val::Percent(50.),
|
|
overflow: Overflow::clip_y(),
|
|
..default()
|
|
},
|
|
background_color: Color::srgb(0.10, 0.10, 0.10).into(),
|
|
..default()
|
|
})
|
|
.with_children(|parent| {
|
|
// Moving panel
|
|
parent
|
|
.spawn((
|
|
NodeBundle {
|
|
style: Style {
|
|
flex_direction: FlexDirection::Column,
|
|
align_items: AlignItems::Center,
|
|
..default()
|
|
},
|
|
..default()
|
|
},
|
|
ScrollingList::default(),
|
|
AccessibilityNode(NodeBuilder::new(Role::List)),
|
|
))
|
|
.with_children(|parent| {
|
|
// List items
|
|
for i in 0..30 {
|
|
parent.spawn((
|
|
TextBundle::from_section(
|
|
format!("Item {i}"),
|
|
TextStyle {
|
|
font: asset_server
|
|
.load("fonts/FiraSans-Bold.ttf"),
|
|
font_size: 20.,
|
|
..default()
|
|
},
|
|
),
|
|
Label,
|
|
AccessibilityNode(NodeBuilder::new(Role::ListItem)),
|
|
));
|
|
}
|
|
});
|
|
});
|
|
});
|
|
parent
|
|
.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Px(200.0),
|
|
height: Val::Px(200.0),
|
|
position_type: PositionType::Absolute,
|
|
left: Val::Px(210.),
|
|
bottom: Val::Px(10.),
|
|
border: UiRect::all(Val::Px(20.)),
|
|
..default()
|
|
},
|
|
border_color: GREEN.into(),
|
|
background_color: Color::srgb(0.4, 0.4, 1.).into(),
|
|
..default()
|
|
})
|
|
.with_children(|parent| {
|
|
parent.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Percent(100.0),
|
|
height: Val::Percent(100.0),
|
|
..default()
|
|
},
|
|
background_color: Color::srgb(0.8, 0.8, 1.).into(),
|
|
..default()
|
|
});
|
|
});
|
|
// render order test: reddest in the back, whitest in the front (flex center)
|
|
parent
|
|
.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Percent(100.0),
|
|
height: Val::Percent(100.0),
|
|
position_type: PositionType::Absolute,
|
|
align_items: AlignItems::Center,
|
|
justify_content: JustifyContent::Center,
|
|
..default()
|
|
},
|
|
..default()
|
|
})
|
|
.with_children(|parent| {
|
|
parent
|
|
.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Px(100.0),
|
|
height: Val::Px(100.0),
|
|
..default()
|
|
},
|
|
background_color: Color::srgb(1.0, 0.0, 0.).into(),
|
|
..default()
|
|
})
|
|
.with_children(|parent| {
|
|
parent.spawn(NodeBundle {
|
|
style: Style {
|
|
// Take the size of the parent node.
|
|
width: Val::Percent(100.0),
|
|
height: Val::Percent(100.0),
|
|
position_type: PositionType::Absolute,
|
|
left: Val::Px(20.),
|
|
bottom: Val::Px(20.),
|
|
..default()
|
|
},
|
|
background_color: Color::srgb(1.0, 0.3, 0.3).into(),
|
|
..default()
|
|
});
|
|
parent.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Percent(100.0),
|
|
height: Val::Percent(100.0),
|
|
position_type: PositionType::Absolute,
|
|
left: Val::Px(40.),
|
|
bottom: Val::Px(40.),
|
|
..default()
|
|
},
|
|
background_color: Color::srgb(1.0, 0.5, 0.5).into(),
|
|
..default()
|
|
});
|
|
parent.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Percent(100.0),
|
|
height: Val::Percent(100.0),
|
|
position_type: PositionType::Absolute,
|
|
left: Val::Px(60.),
|
|
bottom: Val::Px(60.),
|
|
..default()
|
|
},
|
|
background_color: Color::srgb(1.0, 0.7, 0.7).into(),
|
|
..default()
|
|
});
|
|
// alpha test
|
|
parent.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Percent(100.0),
|
|
height: Val::Percent(100.0),
|
|
position_type: PositionType::Absolute,
|
|
left: Val::Px(80.),
|
|
bottom: Val::Px(80.),
|
|
..default()
|
|
},
|
|
background_color: Color::srgba(1.0, 0.9, 0.9, 0.4).into(),
|
|
..default()
|
|
});
|
|
});
|
|
});
|
|
// bevy logo (flex center)
|
|
parent
|
|
.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Percent(100.0),
|
|
position_type: PositionType::Absolute,
|
|
justify_content: JustifyContent::Center,
|
|
align_items: AlignItems::FlexStart,
|
|
..default()
|
|
},
|
|
..default()
|
|
})
|
|
.with_children(|parent| {
|
|
// bevy logo (image)
|
|
// A `NodeBundle` is used to display the logo the image as an `ImageBundle` can't automatically
|
|
// size itself with a child node present.
|
|
parent
|
|
.spawn((
|
|
NodeBundle {
|
|
style: Style {
|
|
width: Val::Px(500.0),
|
|
height: Val::Px(125.0),
|
|
margin: UiRect::top(Val::VMin(5.)),
|
|
..default()
|
|
},
|
|
// a `NodeBundle` is transparent by default, so to see the image we have to its color to `WHITE`
|
|
background_color: Color::WHITE.into(),
|
|
..default()
|
|
},
|
|
UiImage::new(asset_server.load("branding/bevy_logo_dark_big.png")),
|
|
))
|
|
.with_children(|parent| {
|
|
// alt text
|
|
// This UI node takes up no space in the layout and the `Text` component is used by the accessibility module
|
|
// and is not rendered.
|
|
parent.spawn((
|
|
NodeBundle {
|
|
style: Style {
|
|
display: Display::None,
|
|
..Default::default()
|
|
},
|
|
..Default::default()
|
|
},
|
|
Text::from_section("Bevy logo", TextStyle::default()),
|
|
));
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
#[derive(Component, Default)]
|
|
struct ScrollingList {
|
|
position: f32,
|
|
}
|
|
|
|
fn mouse_scroll(
|
|
mut mouse_wheel_events: EventReader<MouseWheel>,
|
|
mut query_list: Query<(&mut ScrollingList, &mut Style, &Parent, &Node)>,
|
|
query_node: Query<&Node>,
|
|
) {
|
|
for mouse_wheel_event in mouse_wheel_events.read() {
|
|
for (mut scrolling_list, mut style, parent, list_node) in &mut query_list {
|
|
let items_height = list_node.size().y;
|
|
let container_height = query_node.get(parent.get()).unwrap().size().y;
|
|
|
|
let max_scroll = (items_height - container_height).max(0.);
|
|
|
|
let dy = match mouse_wheel_event.unit {
|
|
MouseScrollUnit::Line => mouse_wheel_event.y * 20.,
|
|
MouseScrollUnit::Pixel => mouse_wheel_event.y,
|
|
};
|
|
|
|
scrolling_list.position += dy;
|
|
scrolling_list.position = scrolling_list.position.clamp(-max_scroll, 0.);
|
|
style.top = Val::Px(scrolling_list.position);
|
|
}
|
|
}
|
|
}
|