From a575502886d2e2685165a581a0c7cff4020f6dc2 Mon Sep 17 00:00:00 2001 From: Rob Parrett Date: Tue, 27 May 2025 15:06:19 -0700 Subject: [PATCH] Move `radial_gradients` example to UI testbed (#19390) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Objective Fixes #19385 Note: this has shader errors due to #19383 and should probably be merged after #19384 ## Solution - Move the example to the UI testbed - Adjust label contents and cell size so that every test case fits on the screen - Minor tidying, slightly less harsh colors while preserving the intentional debug coloring ## Testing `cargo run --example testbed_ui` ![Screenshot 2025-05-27 at 8 53 43 AM](https://github.com/user-attachments/assets/97ea20ee-d265-45f6-8b99-bcd5f6030e30) --------- Co-authored-by: François Mockers --- Cargo.toml | 11 ---- examples/README.md | 1 - examples/testbed/ui.rs | 102 +++++++++++++++++++++++++++++++- examples/ui/radial_gradients.rs | 98 ------------------------------ 4 files changed, 101 insertions(+), 111 deletions(-) delete mode 100644 examples/ui/radial_gradients.rs diff --git a/Cargo.toml b/Cargo.toml index 79967b68ec..9602ef33fb 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -3451,17 +3451,6 @@ description = "An example demonstrating stacked gradients" category = "UI (User Interface)" wasm = true -[[example]] -name = "radial_gradients" -path = "examples/ui/radial_gradients.rs" -doc-scrape-examples = true - -[package.metadata.example.radial_gradients] -name = "Radial Gradients" -description = "An example demonstrating radial gradients" -category = "UI (User Interface)" -wasm = true - [[example]] name = "scroll" path = "examples/ui/scroll.rs" diff --git a/examples/README.md b/examples/README.md index 1d6377be96..4f5030563a 100644 --- a/examples/README.md +++ b/examples/README.md @@ -552,7 +552,6 @@ Example | Description [Overflow](../examples/ui/overflow.rs) | Simple example demonstrating overflow behavior [Overflow Clip Margin](../examples/ui/overflow_clip_margin.rs) | Simple example demonstrating the OverflowClipMargin style property [Overflow and Clipping Debug](../examples/ui/overflow_debug.rs) | An example to debug overflow and clipping behavior -[Radial Gradients](../examples/ui/radial_gradients.rs) | An example demonstrating radial gradients [Relative Cursor Position](../examples/ui/relative_cursor_position.rs) | Showcases the RelativeCursorPosition component [Render UI to Texture](../examples/ui/render_ui_to_texture.rs) | An example of rendering UI as a part of a 3D world [Scroll](../examples/ui/scroll.rs) | Demonstrates scrolling UI containers diff --git a/examples/testbed/ui.rs b/examples/testbed/ui.rs index f81fbac0b4..c59867fe0e 100644 --- a/examples/testbed/ui.rs +++ b/examples/testbed/ui.rs @@ -20,6 +20,7 @@ fn main() { .add_systems(OnEnter(Scene::Overflow), overflow::setup) .add_systems(OnEnter(Scene::Slice), slice::setup) .add_systems(OnEnter(Scene::LayoutRounding), layout_rounding::setup) + .add_systems(OnEnter(Scene::RadialGradient), radial_gradient::setup) .add_systems(Update, switch_scene); #[cfg(feature = "bevy_ci_testing")] @@ -41,6 +42,7 @@ enum Scene { Overflow, Slice, LayoutRounding, + RadialGradient, } impl Next for Scene { @@ -54,7 +56,8 @@ impl Next for Scene { Scene::TextWrap => Scene::Overflow, Scene::Overflow => Scene::Slice, Scene::Slice => Scene::LayoutRounding, - Scene::LayoutRounding => Scene::Image, + Scene::LayoutRounding => Scene::RadialGradient, + Scene::RadialGradient => Scene::Image, } } } @@ -527,3 +530,100 @@ mod layout_rounding { }); } } + +mod radial_gradient { + use bevy::color::palettes::css::RED; + use bevy::color::palettes::tailwind::GRAY_700; + use bevy::prelude::*; + use bevy::ui::ColorStop; + + const CELL_SIZE: f32 = 80.; + const GAP: f32 = 10.; + + pub fn setup(mut commands: Commands) { + let color_stops = vec![ + ColorStop::new(Color::BLACK, Val::Px(5.)), + ColorStop::new(Color::WHITE, Val::Px(5.)), + ColorStop::new(Color::WHITE, Val::Percent(100.)), + ColorStop::auto(RED), + ]; + + commands.spawn((Camera2d, DespawnOnExitState(super::Scene::RadialGradient))); + commands + .spawn(( + Node { + width: Val::Percent(100.), + height: Val::Percent(100.), + display: Display::Grid, + align_items: AlignItems::Start, + grid_template_columns: vec![RepeatedGridTrack::px( + GridTrackRepetition::AutoFill, + CELL_SIZE, + )], + grid_auto_flow: GridAutoFlow::Row, + row_gap: Val::Px(GAP), + column_gap: Val::Px(GAP), + padding: UiRect::all(Val::Px(GAP)), + ..default() + }, + DespawnOnExitState(super::Scene::RadialGradient), + )) + .with_children(|commands| { + for (shape, shape_label) in [ + (RadialGradientShape::ClosestSide, "ClosestSide"), + (RadialGradientShape::FarthestSide, "FarthestSide"), + ( + RadialGradientShape::Circle(Val::Percent(55.)), + "Circle(55%)", + ), + (RadialGradientShape::FarthestCorner, "FarthestCorner"), + ] { + for (position, position_label) in [ + (Position::TOP_LEFT, "TOP_LEFT"), + (Position::LEFT, "LEFT"), + (Position::BOTTOM_LEFT, "BOTTOM_LEFT"), + (Position::TOP, "TOP"), + (Position::CENTER, "CENTER"), + (Position::BOTTOM, "BOTTOM"), + (Position::TOP_RIGHT, "TOP_RIGHT"), + (Position::RIGHT, "RIGHT"), + (Position::BOTTOM_RIGHT, "BOTTOM_RIGHT"), + ] { + for (w, h) in [(CELL_SIZE, CELL_SIZE), (CELL_SIZE, CELL_SIZE / 2.)] { + commands + .spawn(( + BackgroundColor(GRAY_700.into()), + Node { + display: Display::Grid, + width: Val::Px(CELL_SIZE), + ..Default::default() + }, + )) + .with_children(|commands| { + commands.spawn(( + Node { + margin: UiRect::all(Val::Px(2.0)), + ..default() + }, + Text(format!("{shape_label}\n{position_label}")), + TextFont::from_font_size(9.), + )); + commands.spawn(( + Node { + width: Val::Px(w), + height: Val::Px(h), + ..default() + }, + BackgroundGradient::from(RadialGradient { + stops: color_stops.clone(), + position, + shape, + }), + )); + }); + } + } + } + }); + } +} diff --git a/examples/ui/radial_gradients.rs b/examples/ui/radial_gradients.rs deleted file mode 100644 index 8be0b549c2..0000000000 --- a/examples/ui/radial_gradients.rs +++ /dev/null @@ -1,98 +0,0 @@ -//! Simple example demonstrating radial gradients. - -use bevy::color::palettes::css::GREEN; -use bevy::color::palettes::css::NAVY; -use bevy::color::palettes::css::RED; -use bevy::prelude::*; -use bevy::ui::ColorStop; - -fn main() { - App::new() - .add_plugins(DefaultPlugins) - .add_systems(Startup, setup_grid) - .run(); -} - -const CELL_SIZE: f32 = 100.; -const GAP: f32 = 10.; - -fn setup_grid(mut commands: Commands) { - let color_stops = vec![ - ColorStop::new(Color::BLACK, Val::Px(5.)), - ColorStop::new(Color::WHITE, Val::Px(5.)), - ColorStop::new(Color::WHITE, Val::Percent(100.)), - ColorStop::auto(RED), - ]; - - commands.spawn(Camera2d); - commands - .spawn(( - Node { - width: Val::Percent(100.), - height: Val::Percent(100.), - display: Display::Grid, - align_items: AlignItems::Start, - align_content: AlignContent::Start, - grid_template_columns: vec![RepeatedGridTrack::px( - GridTrackRepetition::AutoFill, - CELL_SIZE, - )], - grid_auto_flow: GridAutoFlow::Row, - row_gap: Val::Px(GAP), - column_gap: Val::Px(GAP), - margin: UiRect::all(Val::Px(GAP)), - ..Default::default() - }, - BackgroundColor(NAVY.into()), - )) - .with_children(|commands| { - for shape in [ - RadialGradientShape::ClosestSide, - RadialGradientShape::FarthestSide, - RadialGradientShape::Circle(Val::Percent(55.)), - RadialGradientShape::FarthestCorner, - ] { - for position in [ - Position::TOP_LEFT, - Position::LEFT, - Position::BOTTOM_LEFT, - Position::TOP, - Position::CENTER, - Position::BOTTOM, - Position::TOP_RIGHT, - Position::RIGHT, - Position::BOTTOM_RIGHT, - ] { - for (w, h) in [(100., 100.), (100., 50.)] { - commands - .spawn(( - BackgroundColor(GREEN.into()), - Node { - display: Display::Grid, - width: Val::Px(CELL_SIZE), - ..Default::default() - }, - )) - .with_children(|commands| { - commands.spawn(( - Text(format!("{shape:#?}\n{position:#?}")), - TextFont::from_font_size(10.), - )); - commands.spawn(( - Node { - width: Val::Px(w), - height: Val::Px(h), - ..default() - }, - BackgroundGradient::from(RadialGradient { - stops: color_stops.clone(), - position, - shape, - }), - )); - }); - } - } - } - }); -}