Mirrors/bevy
2
0
Fork 0
mirror of https://github.com/bevyengine/bevy synced 2024-11-24 05:33:04 +00:00
Code Issues Projects Releases Packages Wiki Activity

Expanded ui example (#16151)

Browse source 
# Objective

Expand the `ui` example to show off more of the features and make it
more useful for debugging.

# Solution

Added some extra elements to the `ui` example demonstrating outlines,
border-radius, rotation, image sizing and image flipping.

## Showcase

<img width="961" alt="uiexample"
src="https://github.com/user-attachments/assets/fb0cfb57-9102-4c6c-bc8e-03d3fa6e0bf6">
This commit is contained in:
ickshonpe 2024-11-04 15:23:16 +00:00 committed by GitHub
parent 267b57e565
commit a9b2344992
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 68 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
examples/ui/ui.rs
View file

@ -1,11 +1,13 @@
//! This example illustrates the various features of Bevy UI.
use std::f32::consts::PI;
use bevy::{
a11y::{
accesskit::{NodeBuilder, Role},
AccessibilityNode,
},
color::palettes::basic::LIME,
color::palettes::{basic::LIME, css::DARK_GRAY},
input::mouse::{MouseScrollUnit, MouseWheel},
picking::focus::HoverMap,
prelude::*,
@ -158,28 +160,39 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
});
parent
.spawn((
Node {
width: Val::Px(200.0),
height: Val::Px(200.0),
position_type: PositionType::Absolute,
left: Val::Px(210.),
bottom: Val::Px(10.),
border: UiRect::all(Val::Px(20.)),
..default()
},
BorderColor(LIME.into()),
BackgroundColor(Color::srgb(0.4, 0.4, 1.)),
))
.spawn(Node {
left: Val::Px(210.),
bottom: Val::Px(10.),
position_type: PositionType::Absolute,
..default()
})
.with_children(|parent| {
parent.spawn((
Node {
width: Val::Percent(100.0),
height: Val::Percent(100.0),
..default()
},
BackgroundColor(Color::srgb(0.8, 0.8, 1.)),
));
parent
.spawn((
Node {
width: Val::Px(200.0),
height: Val::Px(200.0),
border: UiRect::all(Val::Px(20.)),
flex_direction: FlexDirection::Column,
justify_content: JustifyContent::Center,
..default()
},
BorderColor(LIME.into()),
BackgroundColor(Color::srgb(0.8, 0.8, 1.)),
))
.with_children(|parent| {
parent.spawn((
UiImage::new(asset_server.load("branding/bevy_logo_light.png")),
// Uses the transform to rotate the logo image by 45 degrees
Transform::from_rotation(Quat::from_rotation_z(0.25 * PI)),
BorderRadius::all(Val::Px(10.)),
Outline {
width: Val::Px(2.),
offset: Val::Px(4.),
color: DARK_GRAY.into(),
},
));
});
});
let shadow = BoxShadow {
@ -187,7 +200,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
blur_radius: Val::Px(2.),
x_offset: Val::Px(10.),
y_offset: Val::Px(10.),
..Default::default()
..default()
};
// render order test: reddest in the back, whitest in the front (flex center)
@ -303,6 +316,38 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
));
});
});
// four bevy icons demonstrating image flipping
parent
.spawn(Node {
width: Val::Percent(100.0),
height: Val::Percent(100.0),
position_type: PositionType::Absolute,
justify_content: JustifyContent::Center,
align_items: AlignItems::FlexEnd,
column_gap: Val::Px(10.),
padding: UiRect::all(Val::Px(10.)),
..default()
})
.with_children(|parent| {
for (flip_x, flip_y) in
[(false, false), (false, true), (true, true), (true, false)]
{
parent.spawn((
Node {
// The height will be chosen automatically to preserve the image's aspect ratio
width: Val::Px(75.),
..default()
},
UiImage {
image: asset_server.load("branding/icon.png"),
flip_x,
flip_y,
..default()
},
));
}
});
});
}