mirror of
https://github.com/bevyengine/bevy
synced 2024-11-10 15:14:50 +00:00
b995827013
# Objective Make `bevy_ui` "root" nodes more intuitive to use/style by: - Removing the implicit flexbox styling (such as stretch alignment) that is applied to them, and replacing it with more intuitive CSS Grid styling (notably with stretch alignment disabled in both axes). - Making root nodes layout independently of each other. Instead of there being a single implicit "viewport" node that all root nodes are children of, there is now an implicit "viewport" node *per root node*. And layout of each tree is computed separately. ## Solution - Remove the global implicit viewport node, and instead create an implicit viewport node for each user-specified root node. - Keep track of both the user-specified root nodes and the implicit viewport nodes in a separate `Vec`. - Use the window's size as the `available_space` parameter to `Taffy.compute_layout` rather than setting it on the implicit viewport node (and set the viewport to `height: 100%; width: 100%` to make this "just work"). --- ## Changelog - Bevy UI now lays out root nodes independently of each other in separate layout contexts. - The implicit viewport node (which contains each user-specified root node) is now `Display::Grid` with `align_items` and `justify_items` both set to `Start`. ## Migration Guide - Bevy UI now lays out root nodes independently of each other in separate layout contexts. If you were relying on your root nodes being able to affect each other's layouts, then you may need to wrap them in a single root node. - The implicit viewport node (which contains each user-specified root node) is now `Display::Grid` with `align_items` and `justify_items` both set to `Start`. You may need to add `height: Val::Percent(100.)` to your root nodes if you were previously relying on being implicitly set.
161 lines
5.2 KiB
Rust
161 lines
5.2 KiB
Rust
//! This example illustrates how to use [`States`] for high-level app control flow.
|
|
//! States are a powerful but intuitive tool for controlling which logic runs when.
|
|
//! You can have multiple independent states, and the [`OnEnter`] and [`OnExit`] schedules
|
|
//! can be used to great effect to ensure that you handle setup and teardown appropriately.
|
|
//!
|
|
//! In this case, we're transitioning from a `Menu` state to an `InGame` state.
|
|
|
|
use bevy::prelude::*;
|
|
|
|
fn main() {
|
|
App::new()
|
|
.add_plugins(DefaultPlugins)
|
|
.add_state::<AppState>()
|
|
.add_systems(Startup, setup)
|
|
// This system runs when we enter `AppState::Menu`, during the `StateTransition` schedule.
|
|
// All systems from the exit schedule of the state we're leaving are run first,
|
|
// and then all systems from the enter schedule of the state we're entering are run second.
|
|
.add_systems(OnEnter(AppState::Menu), setup_menu)
|
|
// By contrast, update systems are stored in the `Update` schedule. They simply
|
|
// check the value of the `State<T>` resource to see if they should run each frame.
|
|
.add_systems(Update, menu.run_if(in_state(AppState::Menu)))
|
|
.add_systems(OnExit(AppState::Menu), cleanup_menu)
|
|
.add_systems(OnEnter(AppState::InGame), setup_game)
|
|
.add_systems(
|
|
Update,
|
|
(movement, change_color).run_if(in_state(AppState::InGame)),
|
|
)
|
|
.run();
|
|
}
|
|
|
|
#[derive(Debug, Clone, Copy, Default, Eq, PartialEq, Hash, States)]
|
|
enum AppState {
|
|
#[default]
|
|
Menu,
|
|
InGame,
|
|
}
|
|
|
|
#[derive(Resource)]
|
|
struct MenuData {
|
|
button_entity: Entity,
|
|
}
|
|
|
|
const NORMAL_BUTTON: Color = Color::rgb(0.15, 0.15, 0.15);
|
|
const HOVERED_BUTTON: Color = Color::rgb(0.25, 0.25, 0.25);
|
|
const PRESSED_BUTTON: Color = Color::rgb(0.35, 0.75, 0.35);
|
|
|
|
fn setup(mut commands: Commands) {
|
|
commands.spawn(Camera2dBundle::default());
|
|
}
|
|
|
|
fn setup_menu(mut commands: Commands) {
|
|
let button_entity = commands
|
|
.spawn(NodeBundle {
|
|
style: Style {
|
|
// center button
|
|
width: Val::Percent(100.),
|
|
height: Val::Percent(100.),
|
|
justify_content: JustifyContent::Center,
|
|
align_items: AlignItems::Center,
|
|
..default()
|
|
},
|
|
..default()
|
|
})
|
|
.with_children(|parent| {
|
|
parent
|
|
.spawn(ButtonBundle {
|
|
style: Style {
|
|
width: Val::Px(150.),
|
|
height: Val::Px(65.),
|
|
// horizontally center child text
|
|
justify_content: JustifyContent::Center,
|
|
// vertically center child text
|
|
align_items: AlignItems::Center,
|
|
..default()
|
|
},
|
|
background_color: NORMAL_BUTTON.into(),
|
|
..default()
|
|
})
|
|
.with_children(|parent| {
|
|
parent.spawn(TextBundle::from_section(
|
|
"Play",
|
|
TextStyle {
|
|
font_size: 40.0,
|
|
color: Color::rgb(0.9, 0.9, 0.9),
|
|
..default()
|
|
},
|
|
));
|
|
});
|
|
})
|
|
.id();
|
|
commands.insert_resource(MenuData { button_entity });
|
|
}
|
|
|
|
fn menu(
|
|
mut next_state: ResMut<NextState<AppState>>,
|
|
mut interaction_query: Query<
|
|
(&Interaction, &mut BackgroundColor),
|
|
(Changed<Interaction>, With<Button>),
|
|
>,
|
|
) {
|
|
for (interaction, mut color) in &mut interaction_query {
|
|
match *interaction {
|
|
Interaction::Pressed => {
|
|
*color = PRESSED_BUTTON.into();
|
|
next_state.set(AppState::InGame);
|
|
}
|
|
Interaction::Hovered => {
|
|
*color = HOVERED_BUTTON.into();
|
|
}
|
|
Interaction::None => {
|
|
*color = NORMAL_BUTTON.into();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
fn cleanup_menu(mut commands: Commands, menu_data: Res<MenuData>) {
|
|
commands.entity(menu_data.button_entity).despawn_recursive();
|
|
}
|
|
|
|
fn setup_game(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|
commands.spawn(SpriteBundle {
|
|
texture: asset_server.load("branding/icon.png"),
|
|
..default()
|
|
});
|
|
}
|
|
|
|
const SPEED: f32 = 100.0;
|
|
fn movement(
|
|
time: Res<Time>,
|
|
input: Res<Input<KeyCode>>,
|
|
mut query: Query<&mut Transform, With<Sprite>>,
|
|
) {
|
|
for mut transform in &mut query {
|
|
let mut direction = Vec3::ZERO;
|
|
if input.pressed(KeyCode::Left) {
|
|
direction.x -= 1.0;
|
|
}
|
|
if input.pressed(KeyCode::Right) {
|
|
direction.x += 1.0;
|
|
}
|
|
if input.pressed(KeyCode::Up) {
|
|
direction.y += 1.0;
|
|
}
|
|
if input.pressed(KeyCode::Down) {
|
|
direction.y -= 1.0;
|
|
}
|
|
|
|
if direction != Vec3::ZERO {
|
|
transform.translation += direction.normalize() * SPEED * time.delta_seconds();
|
|
}
|
|
}
|
|
}
|
|
|
|
fn change_color(time: Res<Time>, mut query: Query<&mut Sprite>) {
|
|
for mut sprite in &mut query {
|
|
sprite
|
|
.color
|
|
.set_b((time.elapsed_seconds() * 0.5).sin() + 2.0);
|
|
}
|
|
}
|