Skip to content

Bevy 0.16 #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Cyannide wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Bevy 0.16 #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8196b28
Updated to Bevy 0.15.
Cyannide May 9, 2025
c7707d4
Adjusted shaders to account for the ComputedNode inverse scale factor.
Cyannide May 9, 2025
ff81260
Updated to Bevy 0.16.
Cyannide May 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions Cargo.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
[package]
name = "bevy_round_ui"
version = "2.0.0"
version = "5.0.0"
edition = "2021"
license = "MIT OR Apache-2.0"
authors = ["Robert Dodd"]
Expand All @@ -23,4 +23,4 @@ round_rect = []
superellipse = []

[dependencies]
bevy = "0.14"
bevy = "0.16"
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,8 @@ allows you to toggle between the superellipse and round-rect materials to easily

| `bevy_round_ui` | `bevy` |
|:----------------|:-------|
| `5.x` | `0.16` |
| `4.x` | `0.15` |
| `1.x` - `2.x` | `0.13` |
| `0.2` | `0.13` |
| `0.1` | `0.12` |
Expand Down
65 changes: 31 additions & 34 deletions examples/autosize.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,29 +13,20 @@ fn main() {

fn setup(mut commands: Commands, mut materials: ResMut<Assets<RoundRectUiMaterial>>) {
// Camera so we can see UI
commands.spawn(Camera2dBundle::default());
commands.spawn(Camera2d);

// Spawn two nested panels with flexible sizes in the middle of the window
commands
.spawn(NodeBundle {
style: Style {
width: Val::Percent(100.0),
height: Val::Percent(100.0),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()
},
.spawn((Node {
width: Val::Percent(100.0),
height: Val::Percent(100.0),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()
})
},))
.with_children(|p| {
p.spawn(MaterialNodeBundle {
material: materials.add(RoundRectUiMaterial {
background_color: css::PINK.into(),
border_color: LinearRgba::WHITE,
border_radius: RoundUiBorder::all(20.).into(),
offset: RoundUiOffset::all(6.).into(),
}),
style: Style {
p.spawn((
Node {
width: Val::Percent(50.),
height: Val::Percent(50.),
align_items: AlignItems::Center,
Expand All @@ -44,17 +35,17 @@ fn setup(mut commands: Commands, mut materials: ResMut<Assets<RoundRectUiMateria
padding: UiRect::all(Val::Px(12.)),
..default()
},
..default()
})
MaterialNode(materials.add(RoundRectUiMaterial {
background_color: css::PINK.into(),
border_color: LinearRgba::WHITE,
border_radius: RoundUiBorder::all(20.).into(),
offset: RoundUiOffset::all(6.).into(),
..default()
})),
))
.with_children(|p| {
p.spawn(MaterialNodeBundle {
material: materials.add(RoundRectUiMaterial {
background_color: Srgba::hex("5cb3af").unwrap().into(),
border_color: LinearRgba::WHITE,
border_radius: RoundUiBorder::all(20.0).into(),
offset: RoundUiOffset::all(6.0).into(),
}),
style: Style {
p.spawn((
Node {
width: Val::Percent(50.),
height: Val::Percent(50.),
align_items: AlignItems::Center,
Expand All @@ -63,16 +54,22 @@ fn setup(mut commands: Commands, mut materials: ResMut<Assets<RoundRectUiMateria
padding: UiRect::all(Val::Px(12.)),
..default()
},
..default()
})
MaterialNode(materials.add(RoundRectUiMaterial {
background_color: Srgba::hex("5cb3af").unwrap().into(),
border_color: LinearRgba::WHITE,
border_radius: RoundUiBorder::all(20.0).into(),
offset: RoundUiOffset::all(6.0).into(),
..default()
})),
))
.with_children(|p| {
p.spawn(TextBundle::from_section(
"Resize the window to see how flexible I am",
TextStyle {
color: Color::WHITE,
p.spawn((
Text::new("Resize the window to see how flexible I am"),
TextFont {
font_size: 20.,
..default()
},
TextColor::WHITE,
));
});
});
Expand Down
100 changes: 49 additions & 51 deletions examples/buttons.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,20 +46,23 @@ impl FromWorld for ButtonStyle {
border_color: Srgba::hex("#A53A3D").unwrap().into(),
border_radius: border_radius.into(),
offset: RoundUiOffset::bottom(BUTTON_OFFSET_SIZE).into(),
..default()
}),
default_padding: UiRect::bottom(Val::Px(BUTTON_OFFSET_SIZE)),
hover_material: materials.add(RoundRectUiMaterial {
background_color: Srgba::hex("#F61A39").unwrap().into(),
border_color: Srgba::hex("#A0102A").unwrap().into(),
border_radius: border_radius.into(),
offset: RoundUiOffset::bottom(BUTTON_OFFSET_SIZE).into(),
..default()
}),
hover_padding: UiRect::bottom(Val::Px(BUTTON_OFFSET_SIZE)),
press_material: materials.add(RoundRectUiMaterial {
background_color: Srgba::hex("#A0102A").unwrap().into(),
border_color: LinearRgba::NONE,
border_radius: border_radius.into(),
offset: RoundUiOffset::top(BUTTON_OFFSET_SIZE).into(),
..default()
}),
press_padding: UiRect::top(Val::Px(BUTTON_OFFSET_SIZE)),
}
Expand All @@ -85,7 +88,7 @@ fn setup(
mut superellipse_materials: ResMut<Assets<SuperellipseUiMaterial>>,
) {
// Camera so we can see UI
commands.spawn(Camera2dBundle::default());
commands.spawn(Camera2d);

// Define a material for the panel.
// This material looks like it has a border, because we applied an equal offset to all sides.
Expand All @@ -94,54 +97,48 @@ fn setup(
border_color: Srgba::hex(PANEL_BORDER_COLOR).unwrap().into(),
border_radius: RoundUiBorder::all(20.0).into(),
border_thickness: 6.0,
..default()
});

// Spawn the screen layout, containing a centered panel with menu items
commands
.spawn(NodeBundle {
style: Style {
width: Val::Percent(100.0),
height: Val::Percent(100.0),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()
},
.spawn((Node {
width: Val::Percent(100.0),
height: Val::Percent(100.0),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()
})
},))
.with_children(|p| {
p.spawn(MaterialNodeBundle {
material: panel_material,
style: Style {
p.spawn((
MaterialNode(panel_material),
Node {
width: Val::Px(PANEL_WIDTH),
padding: UiRect::axes(Val::Px(40.), Val::Px(60.)),
flex_direction: FlexDirection::Column,
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()
},
..default()
})
))
.with_children(|p| {
// Spawn the title
p.spawn(NodeBundle {
style: Style {
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
margin: UiRect::bottom(Val::Px(40.)),
..default()
},
p.spawn((Node {
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
margin: UiRect::bottom(Val::Px(40.)),
..default()
})
.with_children(|p| {
p.spawn(TextBundle::from_section(
"MENU",
TextStyle {
color: Color::WHITE,
font_size: 40.,
..default()
},
));
});
},))
.with_children(|p| {
p.spawn((
Text::new("MENU"),
TextFont {
font_size: 40.,
..default()
},
TextColor::WHITE,
));
});

// Spawn the buttons
spawn_button(p, &button_style, "Play", ButtonAction::Play);
Expand All @@ -153,37 +150,34 @@ fn setup(

/// Utility that spawns a new button.
fn spawn_button(
parent: &mut ChildBuilder,
parent: &mut ChildSpawnerCommands,
button_style: &ButtonStyle,
text: impl Into<String>,
extras: impl Bundle,
) -> Entity {
parent
.spawn((
RoundButton,
MaterialNodeBundle {
material: button_style.default_material.clone(),
style: Style {
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
width: Val::Percent(100.),
height: Val::Px(BUTTON_HEIGHT),
margin: UiRect::top(Val::Px(10.)),
..default()
},
Node {
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
width: Val::Percent(100.),
height: Val::Px(BUTTON_HEIGHT),
margin: UiRect::top(Val::Px(10.)),
..default()
},
MaterialNode(button_style.default_material.clone()),
extras,
Interaction::default(),
))
.with_children(|p| {
p.spawn(TextBundle::from_section(
text,
TextStyle {
color: Color::WHITE,
p.spawn((
Text::new(text),
TextFont {
font_size: 20.,
..default()
},
TextColor::WHITE,
));
})
.id()
Expand All @@ -193,7 +187,11 @@ fn spawn_button(
#[allow(clippy::type_complexity)]
fn handle_button_interactions(
mut interaction_query: Query<
(&Interaction, &mut Handle<RoundRectUiMaterial>, &mut Style),
(
&Interaction,
&mut MaterialNode<RoundRectUiMaterial>,
&mut Node,
),
(Changed<Interaction>, With<RoundButton>),
>,
button_style: Res<ButtonStyle>,
Expand All @@ -213,7 +211,7 @@ fn handle_button_interactions(
button_style.default_padding,
),
};
*material = material_handle;
**material = material_handle;
style.padding = padding;
}
}
Expand All @@ -230,7 +228,7 @@ fn handle_button_actions(
ButtonAction::Play => (),
ButtonAction::Settings => (),
ButtonAction::Quit => {
app_exit_events.send(AppExit::Success);
app_exit_events.write(AppExit::Success);
}
}
}
Expand Down
27 changes: 12 additions & 15 deletions examples/circle.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const CIRCLE_BORDER_COLOR: &str = "#A53A3D";

fn setup(mut commands: Commands, mut materials: ResMut<Assets<RoundRectUiMaterial>>) {
// Camera so we can see UI
commands.spawn(Camera2dBundle::default());
commands.spawn(Camera2d);

// Add the material asset.
// NOTE: To make a circle, the width, height and border radius should be equal
Expand All @@ -29,29 +29,26 @@ fn setup(mut commands: Commands, mut materials: ResMut<Assets<RoundRectUiMateria
border_color: Srgba::hex(CIRCLE_BORDER_COLOR).unwrap().into(),
border_radius: RoundUiBorder::all(CIRCLE_DIAMETER).into(),
offset: RoundUiOffset::bottom(CIRCLE_OFFSET_SIZE).into(),
..default()
});

// Spawn a round material node in the middle of the screen
commands
.spawn(NodeBundle {
style: Style {
width: Val::Percent(100.0),
height: Val::Percent(100.0),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()
},
.spawn((Node {
width: Val::Percent(100.0),
height: Val::Percent(100.0),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()
})
},))
.with_children(|p| {
p.spawn(MaterialNodeBundle {
material: circle_material,
style: Style {
p.spawn((
Node {
width: Val::Px(CIRCLE_DIAMETER),
height: Val::Px(CIRCLE_DIAMETER),
..default()
},
..default()
});
MaterialNode(circle_material),
));
});
}
Loading