Update computed_states example to use children macro (#18290)

# Objective

Contributes to #18238 
Updates the `computed_states`, example to use the `children!` macro.
Note that this example requires `--features bevy_dev_tools` to run

## Solution

Updates examples to use the Improved Spawning API merged in
https://github.com/bevyengine/bevy/pull/17521

## Testing

- Did you test these changes? If so, how?
- Opened the examples before and after and verified the same behavior
was observed. I did this on Ubuntu 24.04.2 LTS using `--features
wayland`.
- Are there any parts that need more testing?
- Other OS's and features can't hurt, but this is such a small change it
shouldn't be a problem.
- How can other people (reviewers) test your changes? Is there anything
specific they need to know?
  - Run the examples yourself with and without these changes.
- If relevant, what platforms did you test these changes on, and are
there any important ones you can't test?
  - see above

---

## Showcase

n/a

## Migration Guide

n/a
This commit is contained in:
krunchington 2025-03-13 09:35:32 -07:00 committed by GitHub
parent d70c469483
commit 2c22bc12a0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -336,19 +336,19 @@ mod ui {
pub fn setup_menu(mut commands: Commands, tutorial_state: Res<State<TutorialState>>) {
let button_entity = commands
.spawn(Node {
// center button
width: Val::Percent(100.),
height: Val::Percent(100.),
justify_content: JustifyContent::Center,
align_items: AlignItems::Center,
flex_direction: FlexDirection::Column,
row_gap: Val::Px(10.),
..default()
})
.with_children(|parent| {
parent
.spawn((
.spawn((
Node {
// center button
width: Val::Percent(100.),
height: Val::Percent(100.),
justify_content: JustifyContent::Center,
align_items: AlignItems::Center,
flex_direction: FlexDirection::Column,
row_gap: Val::Px(10.),
..default()
},
children![
(
Button,
Node {
width: Val::Px(200.),
@ -361,20 +361,16 @@ mod ui {
},
BackgroundColor(NORMAL_BUTTON),
MenuButton::Play,
))
.with_children(|parent| {
parent.spawn((
children![(
Text::new("Play"),
TextFont {
font_size: 33.0,
..default()
},
TextColor(Color::srgb(0.9, 0.9, 0.9)),
));
});
parent
.spawn((
)],
),
(
Button,
Node {
width: Val::Px(200.),
@ -390,18 +386,17 @@ mod ui {
TutorialState::Inactive => NORMAL_BUTTON,
}),
MenuButton::Tutorial,
))
.with_children(|parent| {
parent.spawn((
children![(
Text::new("Tutorial"),
TextFont {
font_size: 33.0,
..default()
},
TextColor(Color::srgb(0.9, 0.9, 0.9)),
));
});
})
)]
),
],
))
.id();
commands.insert_resource(MenuData {
root_entity: button_entity,
@ -453,75 +448,66 @@ mod ui {
pub fn setup_paused_screen(mut commands: Commands) {
info!("Printing Pause");
commands
.spawn((
StateScoped(IsPaused::Paused),
commands.spawn((
StateScoped(IsPaused::Paused),
Node {
// center button
width: Val::Percent(100.),
height: Val::Percent(100.),
justify_content: JustifyContent::Center,
align_items: AlignItems::Center,
flex_direction: FlexDirection::Column,
row_gap: Val::Px(10.),
position_type: PositionType::Absolute,
..default()
},
children![(
Node {
// center button
width: Val::Percent(100.),
height: Val::Percent(100.),
width: Val::Px(400.),
height: Val::Px(400.),
// horizontally center child text
justify_content: JustifyContent::Center,
// vertically center child text
align_items: AlignItems::Center,
flex_direction: FlexDirection::Column,
row_gap: Val::Px(10.),
position_type: PositionType::Absolute,
..default()
},
))
.with_children(|parent| {
parent
.spawn((
Node {
width: Val::Px(400.),
height: Val::Px(400.),
// horizontally center child text
justify_content: JustifyContent::Center,
// vertically center child text
align_items: AlignItems::Center,
..default()
},
BackgroundColor(NORMAL_BUTTON),
MenuButton::Play,
))
.with_children(|parent| {
parent.spawn((
Text::new("Paused"),
TextFont {
font_size: 33.0,
..default()
},
TextColor(Color::srgb(0.9, 0.9, 0.9)),
));
});
});
}
pub fn setup_turbo_text(mut commands: Commands) {
commands
.spawn((
StateScoped(TurboMode),
Node {
// center button
width: Val::Percent(100.),
height: Val::Percent(100.),
justify_content: JustifyContent::Start,
align_items: AlignItems::Center,
flex_direction: FlexDirection::Column,
row_gap: Val::Px(10.),
position_type: PositionType::Absolute,
..default()
},
))
.with_children(|parent| {
parent.spawn((
Text::new("TURBO MODE"),
BackgroundColor(NORMAL_BUTTON),
MenuButton::Play,
children![(
Text::new("Paused"),
TextFont {
font_size: 33.0,
..default()
},
TextColor(Color::srgb(0.9, 0.3, 0.1)),
));
});
TextColor(Color::srgb(0.9, 0.9, 0.9)),
)],
),],
));
}
pub fn setup_turbo_text(mut commands: Commands) {
commands.spawn((
StateScoped(TurboMode),
Node {
// center button
width: Val::Percent(100.),
height: Val::Percent(100.),
justify_content: JustifyContent::Start,
align_items: AlignItems::Center,
flex_direction: FlexDirection::Column,
row_gap: Val::Px(10.),
position_type: PositionType::Absolute,
..default()
},
children![(
Text::new("TURBO MODE"),
TextFont {
font_size: 33.0,
..default()
},
TextColor(Color::srgb(0.9, 0.3, 0.1)),
)],
));
}
pub fn change_color(time: Res<Time>, mut query: Query<&mut Sprite>) {
@ -536,93 +522,88 @@ mod ui {
}
pub fn movement_instructions(mut commands: Commands) {
commands
.spawn((
StateScoped(Tutorial::MovementInstructions),
Node {
// center button
width: Val::Percent(100.),
height: Val::Percent(100.),
justify_content: JustifyContent::End,
align_items: AlignItems::Center,
flex_direction: FlexDirection::Column,
row_gap: Val::Px(10.),
position_type: PositionType::Absolute,
..default()
},
))
.with_children(|parent| {
parent.spawn((
commands.spawn((
StateScoped(Tutorial::MovementInstructions),
Node {
// center button
width: Val::Percent(100.),
height: Val::Percent(100.),
justify_content: JustifyContent::End,
align_items: AlignItems::Center,
flex_direction: FlexDirection::Column,
row_gap: Val::Px(10.),
position_type: PositionType::Absolute,
..default()
},
children![
(
Text::new("Move the bevy logo with the arrow keys"),
TextFont {
font_size: 33.0,
..default()
},
TextColor(Color::srgb(0.3, 0.3, 0.7)),
));
parent.spawn((
),
(
Text::new("Press T to enter TURBO MODE"),
TextFont {
font_size: 33.0,
..default()
},
TextColor(Color::srgb(0.3, 0.3, 0.7)),
));
parent.spawn((
),
(
Text::new("Press SPACE to pause"),
TextFont {
font_size: 33.0,
..default()
},
TextColor(Color::srgb(0.3, 0.3, 0.7)),
));
parent.spawn((
),
(
Text::new("Press ESCAPE to return to the menu"),
TextFont {
font_size: 33.0,
..default()
},
TextColor(Color::srgb(0.3, 0.3, 0.7)),
));
});
),
],
));
}
pub fn pause_instructions(mut commands: Commands) {
commands
.spawn((
StateScoped(Tutorial::PauseInstructions),
Node {
// center button
width: Val::Percent(100.),
height: Val::Percent(100.),
justify_content: JustifyContent::End,
align_items: AlignItems::Center,
flex_direction: FlexDirection::Column,
row_gap: Val::Px(10.),
position_type: PositionType::Absolute,
..default()
},
))
.with_children(|parent| {
parent.spawn((
commands.spawn((
StateScoped(Tutorial::PauseInstructions),
Node {
// center button
width: Val::Percent(100.),
height: Val::Percent(100.),
justify_content: JustifyContent::End,
align_items: AlignItems::Center,
flex_direction: FlexDirection::Column,
row_gap: Val::Px(10.),
position_type: PositionType::Absolute,
..default()
},
children![
(
Text::new("Press SPACE to resume"),
TextFont {
font_size: 33.0,
..default()
},
TextColor(Color::srgb(0.3, 0.3, 0.7)),
));
parent.spawn((
),
(
Text::new("Press ESCAPE to return to the menu"),
TextFont {
font_size: 33.0,
..default()
},
TextColor(Color::srgb(0.3, 0.3, 0.7)),
));
});
),
],
));
}
}