From a7aee1d03ac2070ae21b5f26253c0d8dc9d9af67 Mon Sep 17 00:00:00 2001 From: Rob Parrett Date: Mon, 19 Feb 2024 12:15:47 -0700 Subject: [PATCH] Simplify and improve `overflow_debug` example (#11875) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Objective While doing a bunch of testing on examples, I noticed that this particular example had lots of room for improvement. This example is shown in example showcase, so it might as well look nice. - The "overflow containers" have no vertical separation from each other - The "overflow containers" are aligned awkwardly - The instructions say you can "toggle" overflow, but it's actually cycling through various overflow modes, with no indication of which mode is currently active. - The UI structure could be simplified ## Solution - Simplify the UI structure by - Moving the instructions into an absolutely positioned node, which we do in most other examples with instructions - Using a grid layout and removing some unnecessary containers - Show the current overflow mode - Add a gap between the overflow containers - Other misc cleanup ## Before / After Screenshot 2024-02-15 at 9 48 02 AM Screenshot 2024-02-15 at 9 48 26 AM --- examples/ui/overflow_debug.rs | 193 +++++++++++++++------------------- 1 file changed, 87 insertions(+), 106 deletions(-) diff --git a/examples/ui/overflow_debug.rs b/examples/ui/overflow_debug.rs index d40a085cf72b6..a5326e4593161 100644 --- a/examples/ui/overflow_debug.rs +++ b/examples/ui/overflow_debug.rs @@ -1,5 +1,5 @@ //! Tests how different transforms behave when clipped with `Overflow::Hidden` -use bevy::prelude::*; +use bevy::{input::common_conditions::input_just_pressed, prelude::*}; use std::f32::consts::{FRAC_PI_2, PI, TAU}; const CONTAINER_SIZE: f32 = 150.0; @@ -9,18 +9,13 @@ const LOOP_LENGTH: f32 = 4.0; fn main() { App::new() .add_plugins(DefaultPlugins) - .insert_resource(AnimationState { - playing: false, - paused_at: 0.0, - paused_total: 0.0, - t: 0.0, - }) + .init_resource::() .add_systems(Startup, setup) .add_systems( Update, ( - toggle_overflow, - next_container_size, + toggle_overflow.run_if(input_just_pressed(KeyCode::KeyO)), + next_container_size.run_if(input_just_pressed(KeyCode::KeyS)), update_transform::, update_transform::, update_transform::, @@ -30,7 +25,10 @@ fn main() { .run(); } -#[derive(Resource)] +#[derive(Component)] +struct Instructions; + +#[derive(Resource, Default)] struct AnimationState { playing: bool, paused_at: f32, @@ -76,13 +74,42 @@ impl UpdateTransform for Rotate { fn setup(mut commands: Commands, asset_server: Res) { // Camera + commands.spawn(Camera2dBundle::default()); + // Instructions + + let text_style = TextStyle { + font_size: 20., + ..default() + }; + + commands.spawn(( + TextBundle::from_sections([ + TextSection::new( + "Next Overflow Setting (O)\nNext Container Size (S)\nToggle Animation (space)\n\n", + text_style.clone(), + ), + TextSection::new(format!("{:?}", Overflow::clip()), text_style.clone()), + ]) + .with_style(Style { + position_type: PositionType::Absolute, + top: Val::Px(12.0), + left: Val::Px(12.0), + ..default() + }), + Instructions, + )); + + // Overflow Debug + commands .spawn(NodeBundle { style: Style { width: Val::Percent(100.), - flex_direction: FlexDirection::Column, + height: Val::Percent(100.), + justify_content: JustifyContent::Center, + align_items: AlignItems::Center, ..default() }, ..default() @@ -91,69 +118,27 @@ fn setup(mut commands: Commands, asset_server: Res) { parent .spawn(NodeBundle { style: Style { - height: Val::Px(32.), - align_items: AlignItems::Center, - justify_content: JustifyContent::Center, + display: Display::Grid, + grid_template_columns: RepeatedGridTrack::px(3, CONTAINER_SIZE), + grid_template_rows: RepeatedGridTrack::px(2, CONTAINER_SIZE), + row_gap: Val::Px(80.), + column_gap: Val::Px(80.), ..default() }, - background_color: Color::DARK_GRAY.into(), ..default() }) .with_children(|parent| { - parent.spawn(TextBundle::from_section( - [ - "Toggle Overflow (O)", - "Next Container Size (S)", - "Toggle Animation (space)", - ] - .join(" · "), - TextStyle { - font: asset_server.load("fonts/FiraSans-Bold.ttf"), - font_size: 18.0, - ..default() - }, - )); - }); + spawn_image(parent, &asset_server, Move); + spawn_image(parent, &asset_server, Scale); + spawn_image(parent, &asset_server, Rotate); - parent - .spawn(NodeBundle { - style: Style { - flex_grow: 1., - flex_direction: FlexDirection::Column, - ..default() - }, - ..default() - }) - .with_children(|parent| { - spawn_row(parent, |parent| { - spawn_image(parent, &asset_server, Move); - spawn_image(parent, &asset_server, Scale); - spawn_image(parent, &asset_server, Rotate); - }); - - spawn_row(parent, |parent| { - spawn_text(parent, &asset_server, Move); - spawn_text(parent, &asset_server, Scale); - spawn_text(parent, &asset_server, Rotate); - }); + spawn_text(parent, &asset_server, Move); + spawn_text(parent, &asset_server, Scale); + spawn_text(parent, &asset_server, Rotate); }); }); } -fn spawn_row(parent: &mut ChildBuilder, spawn_children: impl FnOnce(&mut ChildBuilder)) { - parent - .spawn(NodeBundle { - style: Style { - width: Val::Percent(50.), - align_items: AlignItems::Center, - justify_content: JustifyContent::SpaceEvenly, - ..default() - }, - ..default() - }) - .with_children(spawn_children); -} - fn spawn_image( parent: &mut ChildBuilder, asset_server: &Res, @@ -204,8 +189,8 @@ fn spawn_container( .spawn(( NodeBundle { style: Style { - width: Val::Px(CONTAINER_SIZE), - height: Val::Px(CONTAINER_SIZE), + width: Val::Percent(100.), + height: Val::Percent(100.), align_items: AlignItems::Center, justify_content: JustifyContent::Center, overflow: Overflow::clip(), @@ -241,20 +226,20 @@ fn update_animation( time: Res