mirror of
https://github.com/bevyengine/bevy
synced 2024-09-20 14:32:06 +00:00
f7aa83a247
# Objective Implement borders for UI nodes. Relevant discussion: #7785 Related: #5924, #3991 <img width="283" alt="borders" src="https://user-images.githubusercontent.com/27962798/220968899-7661d5ec-6f5b-4b0f-af29-bf9af02259b5.PNG"> ## Solution Add an extraction function to draw the borders. --- Can only do one colour rectangular borders due to the limitations of the Bevy UI renderer. Maybe it can be combined with #3991 eventually to add curved border support. ## Changelog * Added a component `BorderColor`. * Added the `extract_uinode_borders` system to the UI Render App. * Added the UI example `borders` --------- Co-authored-by: Nico Burns <nico@nicoburns.com>
117 lines
3.4 KiB
Rust
117 lines
3.4 KiB
Rust
//! Example demonstrating bordered UI nodes
|
|
|
|
use bevy::prelude::*;
|
|
|
|
fn main() {
|
|
App::new()
|
|
.add_plugins(DefaultPlugins)
|
|
.add_systems(Startup, setup)
|
|
.run();
|
|
}
|
|
|
|
fn setup(mut commands: Commands) {
|
|
commands.spawn(Camera2dBundle::default());
|
|
let root = commands
|
|
.spawn(NodeBundle {
|
|
style: Style {
|
|
flex_basis: Val::Percent(100.0),
|
|
margin: UiRect::all(Val::Px(25.0)),
|
|
flex_wrap: FlexWrap::Wrap,
|
|
justify_content: JustifyContent::FlexStart,
|
|
align_items: AlignItems::FlexStart,
|
|
align_content: AlignContent::FlexStart,
|
|
..Default::default()
|
|
},
|
|
background_color: BackgroundColor(Color::BLACK),
|
|
..Default::default()
|
|
})
|
|
.id();
|
|
|
|
// all the different combinations of border edges
|
|
let borders = [
|
|
UiRect::default(),
|
|
UiRect::all(Val::Px(10.)),
|
|
UiRect::left(Val::Px(10.)),
|
|
UiRect::right(Val::Px(10.)),
|
|
UiRect::top(Val::Px(10.)),
|
|
UiRect::bottom(Val::Px(10.)),
|
|
UiRect::horizontal(Val::Px(10.)),
|
|
UiRect::vertical(Val::Px(10.)),
|
|
UiRect {
|
|
left: Val::Px(10.),
|
|
top: Val::Px(10.),
|
|
..Default::default()
|
|
},
|
|
UiRect {
|
|
left: Val::Px(10.),
|
|
bottom: Val::Px(10.),
|
|
..Default::default()
|
|
},
|
|
UiRect {
|
|
right: Val::Px(10.),
|
|
top: Val::Px(10.),
|
|
..Default::default()
|
|
},
|
|
UiRect {
|
|
right: Val::Px(10.),
|
|
bottom: Val::Px(10.),
|
|
..Default::default()
|
|
},
|
|
UiRect {
|
|
right: Val::Px(10.),
|
|
top: Val::Px(10.),
|
|
bottom: Val::Px(10.),
|
|
..Default::default()
|
|
},
|
|
UiRect {
|
|
left: Val::Px(10.),
|
|
top: Val::Px(10.),
|
|
bottom: Val::Px(10.),
|
|
..Default::default()
|
|
},
|
|
UiRect {
|
|
left: Val::Px(10.),
|
|
right: Val::Px(10.),
|
|
top: Val::Px(10.),
|
|
..Default::default()
|
|
},
|
|
UiRect {
|
|
left: Val::Px(10.),
|
|
right: Val::Px(10.),
|
|
bottom: Val::Px(10.),
|
|
..Default::default()
|
|
},
|
|
];
|
|
|
|
for i in 0..64 {
|
|
let inner_spot = commands
|
|
.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Px(10.),
|
|
height: Val::Px(10.),
|
|
..Default::default()
|
|
},
|
|
background_color: Color::YELLOW.into(),
|
|
..Default::default()
|
|
})
|
|
.id();
|
|
let bordered_node = commands
|
|
.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Px(50.),
|
|
height: Val::Px(50.),
|
|
border: borders[i % borders.len()],
|
|
margin: UiRect::all(Val::Px(2.)),
|
|
align_items: AlignItems::Center,
|
|
justify_content: JustifyContent::Center,
|
|
..Default::default()
|
|
},
|
|
background_color: Color::BLUE.into(),
|
|
border_color: Color::WHITE.with_a(0.5).into(),
|
|
..Default::default()
|
|
})
|
|
.add_child(inner_spot)
|
|
.id();
|
|
commands.entity(root).add_child(bordered_node);
|
|
}
|
|
}
|