Move radial_gradients example to UI testbed (#19390)
# 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`  --------- Co-authored-by: François Mockers <mockersf@gmail.com>
This commit is contained in:
Rob Parrett
GitHub
parent
e0ed28022d
commit
a575502886
11
Cargo.toml
11
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"
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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,
|
||||
}),
|
||||
));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,
|
||||
}),
|
||||
));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user