Skip to content

Commit

Permalink
Transition more examples to new pattern
Browse files Browse the repository at this point in the history
  • Loading branch information
@Weibye
Weibye committed Sep 7, 2022
1 parent 0b8cc1b commit 4f9ed1b
Show file tree
Hide file tree
Showing 5 changed files with 112 additions and 83 deletions.
6 changes: 6 additions & 0 deletions crates/bevy_ui/src/entity.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,12 @@ impl TextBundle {
self.flex_layout = layout;
self
}

/// Returns this [`TextBundle`] with a new [`Spacing`].
pub const fn with_spacing(mut self, spacing: Spacing) -> Self {
self.spacing = spacing;
self
}
}

impl Default for TextBundle {
Expand Down
22 changes: 19 additions & 3 deletions crates/bevy_ui/src/geometry.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,21 +237,37 @@ impl Size {
Size { width, height }
}

/// Creates a new [`Size`] where both values are given in Val::Px.
pub const fn px(width: f32, height: f32) -> Self {
Size {
width: Val::Px(width),
height: Val::Px(height),
}
}

/// Creates a new [`Size`] where both values are given in Val::Percent.
pub const fn percent(width: f32, height: f32) -> Self {
Size {
width: Val::Percent(width),
height: Val::Percent(height),
}
}

pub const DEFAULT: Size = Size::UNDEFINED;

/// Creates a Size where both values are [`Val::Auto`].
/// Creates a new [`Size`] where both values are [`Val::Auto`].
pub const AUTO: Size = Size {
width: Val::Auto,
height: Val::Auto,
};

/// Creates a Size where both values are [`Val::Undefined`].
/// Creates a new [`Size`] where both values are [`Val::Undefined`].
pub const UNDEFINED: Size = Size {
width: Val::Undefined,
height: Val::Undefined,
};

/// Creates a Size where both values are 100 percent.
/// Creates a new [`Size`] where both values are 100 percent.
pub const FULL: Size = Size {
width: Val::Percent(100.),
height: Val::Percent(100.),
Expand Down
119 changes: 66 additions & 53 deletions examples/games/game_menu.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -376,27 +376,25 @@ mod menu {

fn main_menu_setup(mut commands: Commands, asset_server: Res<AssetServer>) {
let font = asset_server.load("fonts/FiraSans-Bold.ttf");

// Common style for all buttons on the screen
let button_style = Style {
size: Size::new(Val::Px(250.0), Val::Px(65.0)),
margin: UiRect::all(Val::Px(20.0)),
let button_spacing = Spacing::margin(UiRect::all(Val::Px(20.0)));
let button_layout = FlexLayout {
justify_content: JustifyContent::Center,
align_items: AlignItems::Center,
..default()
};
let button_icon_style = Style {
size: Size::new(Val::Px(30.0), Val::Auto),
// This takes the icons out of the flexbox flow, to be positioned exactly
position_type: PositionType::Absolute,
// The icon will be close to the left border of the button
position: UiRect {
left: Val::Px(10.0),
right: Val::Auto,
top: Val::Auto,
bottom: Val::Auto,
},
align_items: AlignItems,
..default()
};
let button_size_constraints = SizeConstraints::suggested(Val::Px(250.0), Val::Px(250.0));

let button_icon_size_constraints = SizeConstraints::suggested(Val::Px(30.0), Val::Auto);
let button_icon_offset = Offset(UiRect {
left: Val::Px(10.0),
right: Val::Auto,
top: Val::Auto,
bottom: Val::Auto,
});
let button_icon_position_type = PositionType::Absolute;

let button_text_style = TextStyle {
font: font.clone(),
font_size: 40.0,
Expand Down Expand Up @@ -426,7 +424,7 @@ mod menu {
color: TEXT_COLOR,
},
)
.with_layout(FlexLayout {
.with_spacing(Spacing {
margin: UiRect::all(Val::Px(50.0)),
..default()
}),
Expand All @@ -438,15 +436,19 @@ mod menu {
// - quit
parent
.spawn_bundle(ButtonBundle {
style: button_style.clone(),
size_constraints: button_size_constraints.clone(),
flex_layout: button_layout.clone(),
spacing: button_spacing.clone(),
color: NORMAL_BUTTON.into(),
..default()
})
.insert(MenuButtonAction::Play)
.with_children(|parent| {
let icon = asset_server.load("textures/Game Icons/right.png");
parent.spawn_bundle(ImageBundle {
style: button_icon_style.clone(),
size_constraints: button_icon_size_constraints.clone(),
offset: button_icon_offset.clone(),
position_type: button_icon_position_type.clone(),
image: UiImage(icon),
..default()
});
Expand All @@ -457,15 +459,19 @@ mod menu {
});
parent
.spawn_bundle(ButtonBundle {
style: button_style.clone(),
size_constraints: button_size_constraints.clone(),
flex_layout: button_layout.clone(),
spacing: button_spacing.clone(),
color: NORMAL_BUTTON.into(),
..default()
})
.insert(MenuButtonAction::Settings)
.with_children(|parent| {
let icon = asset_server.load("textures/Game Icons/wrench.png");
parent.spawn_bundle(ImageBundle {
style: button_icon_style.clone(),
size_constraints: button_icon_size_constraints.clone(),
offset: button_icon_offset.clone(),
position_type: button_icon_position_type.clone(),
image: UiImage(icon),
..default()
});
Expand All @@ -476,15 +482,19 @@ mod menu {
});
parent
.spawn_bundle(ButtonBundle {
style: button_style,
size_constraints: button_size_constraints.clone(),
flex_layout: button_layout.clone(),
spacing: button_spacing.clone(),
color: NORMAL_BUTTON.into(),
..default()
})
.insert(MenuButtonAction::Quit)
.with_children(|parent| {
let icon = asset_server.load("textures/Game Icons/exitRight.png");
parent.spawn_bundle(ImageBundle {
style: button_icon_style,
size_constraints: button_icon_size_constraints.clone(),
offset: button_icon_offset.clone(),
position_type: button_icon_position_type.clone(),
image: UiImage(icon),
..default()
});
Expand All @@ -494,14 +504,14 @@ mod menu {
}

fn settings_menu_setup(mut commands: Commands, asset_server: Res<AssetServer>) {
let button_style = Style {
size: Size::new(Val::Px(200.0), Val::Px(65.0)),
margin: UiRect::all(Val::Px(20.0)),
// Common style for all buttons on this menu
let button_spacing = Spacing::margin(UiRect::all(Val::Px(20.0)));
let button_layout = FlexLayout {
justify_content: JustifyContent::Center,
align_items: AlignItems::Center,
..default()
};

let button_size_constraints = SizeConstraints::suggested(Val::Px(250.0), Val::Px(65.0));
let button_text_style = TextStyle {
font: asset_server.load("fonts/FiraSans-Bold.ttf"),
font_size: 40.0,
Expand All @@ -528,7 +538,9 @@ mod menu {
] {
parent
.spawn_bundle(ButtonBundle {
style: button_style.clone(),
size_constraints: button_size_constraints.clone(),
flex_layout: button_layout.clone(),
spacing: button_spacing.clone(),
color: NORMAL_BUTTON.into(),
..default()
})
Expand All @@ -548,9 +560,10 @@ mod menu {
asset_server: Res<AssetServer>,
display_quality: Res<DisplayQuality>,
) {
let button_style = Style {
size: Size::new(Val::Px(200.0), Val::Px(65.0)),
margin: UiRect::all(Val::Px(20.0)),
// Common style for all buttons on this menu
let button_size_constraints = SizeConstraints::suggested(Val::Px(250.0), Val::Px(65.0));
let button_spacing = Spacing::margin(UiRect::all(Val::Px(20.0)));
let button_layout = FlexLayout {
justify_content: JustifyContent::Center,
align_items: AlignItems::Center,
..default()
Expand Down Expand Up @@ -598,10 +611,9 @@ mod menu {
DisplayQuality::High,
] {
let mut entity = parent.spawn_bundle(ButtonBundle {
style: Style {
size: Size::new(Val::Px(150.0), Val::Px(65.0)),
..button_style.clone()
},
size_constraints: SizeConstraints::suggested(Val::Px(150.0), Val::Px(65.0)),
spacing: button_spacing.clone(),
flex_layout: button_layout.clone(),
color: NORMAL_BUTTON.into(),
..default()
});
Expand All @@ -619,7 +631,9 @@ mod menu {
// Display the back button to return to the settings screen
parent
.spawn_bundle(ButtonBundle {
style: button_style,
size_constraints: button_size_constraints.clone(),
spacing: button_spacing.clone(),
flex_layout: button_layout.clone(),
color: NORMAL_BUTTON.into(),
..default()
})
Expand All @@ -635,11 +649,12 @@ mod menu {
asset_server: Res<AssetServer>,
volume: Res<Volume>,
) {
let button_style = Style {
size: Size::new(Val::Px(200.0), Val::Px(65.0)),
margin: UiRect::all(Val::Px(20.0)),
justify_content: JustifyContent::Center,
// Common style for all buttons on this menu
let button_size_constraints = SizeConstraints::suggested(Val::Px(200.0), Val::Px(65.0));
let button_spacing = Spacing::margin(UiRect::all(Val::Px(20.0)));
let button_layout = FlexLayout {
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()
};
let button_text_style = TextStyle {
Expand All @@ -650,10 +665,10 @@ mod menu {

commands
.spawn_bundle(NodeBundle {
style: Style {
margin: UiRect::all(Val::Auto),
flex_direction: FlexDirection::ColumnReverse,
spacing: Spacing::margin(UiRect::all(Val::Auto)),
flex_layout: FlexLayout {
align_items: AlignItems::Center,
flex_direction: FlexDirection::ColumnReverse,
..default()
},
color: Color::CRIMSON.into(),
Expand All @@ -663,10 +678,7 @@ mod menu {
.with_children(|parent| {
parent
.spawn_bundle(NodeBundle {
style: Style {
align_items: AlignItems::Center,
..default()
},
flex_layout: FlexLayout { align_items: AlignItems::Center, ..default() },
color: Color::CRIMSON.into(),
..default()
})
Expand All @@ -677,10 +689,9 @@ mod menu {
));
for volume_setting in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] {
let mut entity = parent.spawn_bundle(ButtonBundle {
style: Style {
size: Size::new(Val::Px(30.0), Val::Px(65.0)),
..button_style.clone()
},
size_constraints: SizeConstraints::suggested(Val::Px(30.0), Val::Px(65.0)),
spacing: button_spacing.clone(),
flex_layout: button_layout.clone(),
color: NORMAL_BUTTON.into(),
..default()
});
Expand All @@ -692,7 +703,9 @@ mod menu {
});
parent
.spawn_bundle(ButtonBundle {
style: button_style,
size_constraints: button_size_constraints.clone(),
spacing: button_spacing.clone(),
flex_layout: button_layout.clone(),
color: NORMAL_BUTTON.into(),
..default()
})
Expand Down
44 changes: 19 additions & 25 deletions examples/ui/scaling.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,48 +32,42 @@ fn setup(mut commands: Commands, asset_server: ResMut<AssetServer>) {

commands
.spawn_bundle(NodeBundle {
style: Style {
size: Size::new(Val::Percent(50.0), Val::Percent(50.0)),
position_type: PositionType::Absolute,
position: UiRect {
left: Val::Percent(25.),
top: Val::Percent(25.),
..default()
},
justify_content: JustifyContent::SpaceAround,
size_constraints: SizeConstraints::suggested(Val::Percent(50.0), Val::Percent(50.0)),
position_type: PositionType::Absolute,
offset: UiRect {
left: Val::Percent(25.),
top: Val::Percent(25.),
..default()
},
flex_layout: FlexLayout {
align_items: AlignItems::Center,
justify_content: JustifyContent::SpaceAround,
..default()
},
color: Color::ANTIQUE_WHITE.into(),
color: Color::ANTIQUE_WHITE,
..default()
})
.with_children(|parent| {
parent
.spawn_bundle(NodeBundle {
style: Style {
size: Size::new(Val::Px(40.), Val::Px(40.)),
..default()
},
color: Color::RED.into(),
size_constraints: SizeConstraints::suggested(Val::Px(40.0), Val::Px(40.0)),
color: Color::RED,
..default()
})
.with_children(|parent| {
parent.spawn_bundle(TextBundle::from_section("Size!", text_style));
});
parent.spawn_bundle(NodeBundle {
style: Style {
size: Size::new(Val::Percent(15.), Val::Percent(15.)),
..default()
},
color: Color::BLUE.into(),
size_constraints: SizeConstraints::suggested(
Val::Percent(15.0),
Val::Percent(15.0),
),
color: Color::BLUE,
..default()
});
parent.spawn_bundle(ImageBundle {
style: Style {
size: Size::new(Val::Px(30.0), Val::Px(30.0)),
..default()
},
image: asset_server.load("branding/icon.png").into(),
size_constraints: SizeConstraints::suggested(Val::Px(30.0), Val::Px(30.0)),
image: asset_server.load("branding/icon.png"),
..default()
});
});
Expand Down
4 changes: 2 additions & 2 deletions examples/window/window_resizing.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@ fn setup_camera(mut cmd: Commands) {
fn setup_ui(mut cmd: Commands, asset_server: Res<AssetServer>) {
// Node that fills entire background
cmd.spawn_bundle(NodeBundle {
style: Style {
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
size_constraints: SizeConstraints {
suggested: Size::FULL,
..default()
},
..default()
Expand Down

0 comments on commit 4f9ed1b

Please sign in to comment.