Skip to content

Commit 4f9ed1b

Browse files
WeibyeWeibye
committed
Transition more examples to new pattern
1 parent 0b8cc1b commit 4f9ed1b

File tree

5 files changed

+112
-83
lines changed

5 files changed

+112
-83
lines changed

‎crates/bevy_ui/src/entity.rs

+6
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,12 @@ impl TextBundle {
167167
self.flex_layout = layout;
168168
self
169169
}
170+
171+
/// Returns this [`TextBundle`] with a new [`Spacing`].
172+
pub const fn with_spacing(mut self, spacing: Spacing) -> Self {
173+
self.spacing = spacing;
174+
self
175+
}
170176
}
171177

172178
impl Default for TextBundle {

‎crates/bevy_ui/src/geometry.rs

+19-3
Original file line numberDiff line numberDiff line change
@@ -237,21 +237,37 @@ impl Size {
237237
Size { width, height }
238238
}
239239

240+
/// Creates a new [`Size`] where both values are given in Val::Px.
241+
pub const fn px(width: f32, height: f32) -> Self {
242+
Size {
243+
width: Val::Px(width),
244+
height: Val::Px(height),
245+
}
246+
}
247+
248+
/// Creates a new [`Size`] where both values are given in Val::Percent.
249+
pub const fn percent(width: f32, height: f32) -> Self {
250+
Size {
251+
width: Val::Percent(width),
252+
height: Val::Percent(height),
253+
}
254+
}
255+
240256
pub const DEFAULT: Size = Size::UNDEFINED;
241257

242-
/// Creates a Size where both values are [`Val::Auto`].
258+
/// Creates a new [`Size`] where both values are [`Val::Auto`].
243259
pub const AUTO: Size = Size {
244260
width: Val::Auto,
245261
height: Val::Auto,
246262
};
247263

248-
/// Creates a Size where both values are [`Val::Undefined`].
264+
/// Creates a new [`Size`] where both values are [`Val::Undefined`].
249265
pub const UNDEFINED: Size = Size {
250266
width: Val::Undefined,
251267
height: Val::Undefined,
252268
};
253269

254-
/// Creates a Size where both values are 100 percent.
270+
/// Creates a new [`Size`] where both values are 100 percent.
255271
pub const FULL: Size = Size {
256272
width: Val::Percent(100.),
257273
height: Val::Percent(100.),

‎examples/games/game_menu.rs

+66-53
Original file line numberDiff line numberDiff line change
@@ -376,27 +376,25 @@ mod menu {
376376

377377
fn main_menu_setup(mut commands: Commands, asset_server: Res<AssetServer>) {
378378
let font = asset_server.load("fonts/FiraSans-Bold.ttf");
379+
379380
// Common style for all buttons on the screen
380-
let button_style = Style {
381-
size: Size::new(Val::Px(250.0), Val::Px(65.0)),
382-
margin: UiRect::all(Val::Px(20.0)),
381+
let button_spacing = Spacing::margin(UiRect::all(Val::Px(20.0)));
382+
let button_layout = FlexLayout {
383383
justify_content: JustifyContent::Center,
384-
align_items: AlignItems::Center,
385-
..default()
386-
};
387-
let button_icon_style = Style {
388-
size: Size::new(Val::Px(30.0), Val::Auto),
389-
// This takes the icons out of the flexbox flow, to be positioned exactly
390-
position_type: PositionType::Absolute,
391-
// The icon will be close to the left border of the button
392-
position: UiRect {
393-
left: Val::Px(10.0),
394-
right: Val::Auto,
395-
top: Val::Auto,
396-
bottom: Val::Auto,
397-
},
384+
align_items: AlignItems,
398385
..default()
399386
};
387+
let button_size_constraints = SizeConstraints::suggested(Val::Px(250.0), Val::Px(250.0));
388+
389+
let button_icon_size_constraints = SizeConstraints::suggested(Val::Px(30.0), Val::Auto);
390+
let button_icon_offset = Offset(UiRect {
391+
left: Val::Px(10.0),
392+
right: Val::Auto,
393+
top: Val::Auto,
394+
bottom: Val::Auto,
395+
});
396+
let button_icon_position_type = PositionType::Absolute;
397+
400398
let button_text_style = TextStyle {
401399
font: font.clone(),
402400
font_size: 40.0,
@@ -426,7 +424,7 @@ mod menu {
426424
color: TEXT_COLOR,
427425
},
428426
)
429-
.with_layout(FlexLayout {
427+
.with_spacing(Spacing {
430428
margin: UiRect::all(Val::Px(50.0)),
431429
..default()
432430
}),
@@ -438,15 +436,19 @@ mod menu {
438436
// - quit
439437
parent
440438
.spawn_bundle(ButtonBundle {
441-
style: button_style.clone(),
439+
size_constraints: button_size_constraints.clone(),
440+
flex_layout: button_layout.clone(),
441+
spacing: button_spacing.clone(),
442442
color: NORMAL_BUTTON.into(),
443443
..default()
444444
})
445445
.insert(MenuButtonAction::Play)
446446
.with_children(|parent| {
447447
let icon = asset_server.load("textures/Game Icons/right.png");
448448
parent.spawn_bundle(ImageBundle {
449-
style: button_icon_style.clone(),
449+
size_constraints: button_icon_size_constraints.clone(),
450+
offset: button_icon_offset.clone(),
451+
position_type: button_icon_position_type.clone(),
450452
image: UiImage(icon),
451453
..default()
452454
});
@@ -457,15 +459,19 @@ mod menu {
457459
});
458460
parent
459461
.spawn_bundle(ButtonBundle {
460-
style: button_style.clone(),
462+
size_constraints: button_size_constraints.clone(),
463+
flex_layout: button_layout.clone(),
464+
spacing: button_spacing.clone(),
461465
color: NORMAL_BUTTON.into(),
462466
..default()
463467
})
464468
.insert(MenuButtonAction::Settings)
465469
.with_children(|parent| {
466470
let icon = asset_server.load("textures/Game Icons/wrench.png");
467471
parent.spawn_bundle(ImageBundle {
468-
style: button_icon_style.clone(),
472+
size_constraints: button_icon_size_constraints.clone(),
473+
offset: button_icon_offset.clone(),
474+
position_type: button_icon_position_type.clone(),
469475
image: UiImage(icon),
470476
..default()
471477
});
@@ -476,15 +482,19 @@ mod menu {
476482
});
477483
parent
478484
.spawn_bundle(ButtonBundle {
479-
style: button_style,
485+
size_constraints: button_size_constraints.clone(),
486+
flex_layout: button_layout.clone(),
487+
spacing: button_spacing.clone(),
480488
color: NORMAL_BUTTON.into(),
481489
..default()
482490
})
483491
.insert(MenuButtonAction::Quit)
484492
.with_children(|parent| {
485493
let icon = asset_server.load("textures/Game Icons/exitRight.png");
486494
parent.spawn_bundle(ImageBundle {
487-
style: button_icon_style,
495+
size_constraints: button_icon_size_constraints.clone(),
496+
offset: button_icon_offset.clone(),
497+
position_type: button_icon_position_type.clone(),
488498
image: UiImage(icon),
489499
..default()
490500
});
@@ -494,14 +504,14 @@ mod menu {
494504
}
495505

496506
fn settings_menu_setup(mut commands: Commands, asset_server: Res<AssetServer>) {
497-
let button_style = Style {
498-
size: Size::new(Val::Px(200.0), Val::Px(65.0)),
499-
margin: UiRect::all(Val::Px(20.0)),
507+
// Common style for all buttons on this menu
508+
let button_spacing = Spacing::margin(UiRect::all(Val::Px(20.0)));
509+
let button_layout = FlexLayout {
500510
justify_content: JustifyContent::Center,
501511
align_items: AlignItems::Center,
502512
..default()
503513
};
504-
514+
let button_size_constraints = SizeConstraints::suggested(Val::Px(250.0), Val::Px(65.0));
505515
let button_text_style = TextStyle {
506516
font: asset_server.load("fonts/FiraSans-Bold.ttf"),
507517
font_size: 40.0,
@@ -528,7 +538,9 @@ mod menu {
528538
] {
529539
parent
530540
.spawn_bundle(ButtonBundle {
531-
style: button_style.clone(),
541+
size_constraints: button_size_constraints.clone(),
542+
flex_layout: button_layout.clone(),
543+
spacing: button_spacing.clone(),
532544
color: NORMAL_BUTTON.into(),
533545
..default()
534546
})
@@ -548,9 +560,10 @@ mod menu {
548560
asset_server: Res<AssetServer>,
549561
display_quality: Res<DisplayQuality>,
550562
) {
551-
let button_style = Style {
552-
size: Size::new(Val::Px(200.0), Val::Px(65.0)),
553-
margin: UiRect::all(Val::Px(20.0)),
563+
// Common style for all buttons on this menu
564+
let button_size_constraints = SizeConstraints::suggested(Val::Px(250.0), Val::Px(65.0));
565+
let button_spacing = Spacing::margin(UiRect::all(Val::Px(20.0)));
566+
let button_layout = FlexLayout {
554567
justify_content: JustifyContent::Center,
555568
align_items: AlignItems::Center,
556569
..default()
@@ -598,10 +611,9 @@ mod menu {
598611
DisplayQuality::High,
599612
] {
600613
let mut entity = parent.spawn_bundle(ButtonBundle {
601-
style: Style {
602-
size: Size::new(Val::Px(150.0), Val::Px(65.0)),
603-
..button_style.clone()
604-
},
614+
size_constraints: SizeConstraints::suggested(Val::Px(150.0), Val::Px(65.0)),
615+
spacing: button_spacing.clone(),
616+
flex_layout: button_layout.clone(),
605617
color: NORMAL_BUTTON.into(),
606618
..default()
607619
});
@@ -619,7 +631,9 @@ mod menu {
619631
// Display the back button to return to the settings screen
620632
parent
621633
.spawn_bundle(ButtonBundle {
622-
style: button_style,
634+
size_constraints: button_size_constraints.clone(),
635+
spacing: button_spacing.clone(),
636+
flex_layout: button_layout.clone(),
623637
color: NORMAL_BUTTON.into(),
624638
..default()
625639
})
@@ -635,11 +649,12 @@ mod menu {
635649
asset_server: Res<AssetServer>,
636650
volume: Res<Volume>,
637651
) {
638-
let button_style = Style {
639-
size: Size::new(Val::Px(200.0), Val::Px(65.0)),
640-
margin: UiRect::all(Val::Px(20.0)),
641-
justify_content: JustifyContent::Center,
652+
// Common style for all buttons on this menu
653+
let button_size_constraints = SizeConstraints::suggested(Val::Px(200.0), Val::Px(65.0));
654+
let button_spacing = Spacing::margin(UiRect::all(Val::Px(20.0)));
655+
let button_layout = FlexLayout {
642656
align_items: AlignItems::Center,
657+
justify_content: JustifyContent::Center,
643658
..default()
644659
};
645660
let button_text_style = TextStyle {
@@ -650,10 +665,10 @@ mod menu {
650665

651666
commands
652667
.spawn_bundle(NodeBundle {
653-
style: Style {
654-
margin: UiRect::all(Val::Auto),
655-
flex_direction: FlexDirection::ColumnReverse,
668+
spacing: Spacing::margin(UiRect::all(Val::Auto)),
669+
flex_layout: FlexLayout {
656670
align_items: AlignItems::Center,
671+
flex_direction: FlexDirection::ColumnReverse,
657672
..default()
658673
},
659674
color: Color::CRIMSON.into(),
@@ -663,10 +678,7 @@ mod menu {
663678
.with_children(|parent| {
664679
parent
665680
.spawn_bundle(NodeBundle {
666-
style: Style {
667-
align_items: AlignItems::Center,
668-
..default()
669-
},
681+
flex_layout: FlexLayout { align_items: AlignItems::Center, ..default() },
670682
color: Color::CRIMSON.into(),
671683
..default()
672684
})
@@ -677,10 +689,9 @@ mod menu {
677689
));
678690
for volume_setting in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] {
679691
let mut entity = parent.spawn_bundle(ButtonBundle {
680-
style: Style {
681-
size: Size::new(Val::Px(30.0), Val::Px(65.0)),
682-
..button_style.clone()
683-
},
692+
size_constraints: SizeConstraints::suggested(Val::Px(30.0), Val::Px(65.0)),
693+
spacing: button_spacing.clone(),
694+
flex_layout: button_layout.clone(),
684695
color: NORMAL_BUTTON.into(),
685696
..default()
686697
});
@@ -692,7 +703,9 @@ mod menu {
692703
});
693704
parent
694705
.spawn_bundle(ButtonBundle {
695-
style: button_style,
706+
size_constraints: button_size_constraints.clone(),
707+
spacing: button_spacing.clone(),
708+
flex_layout: button_layout.clone(),
696709
color: NORMAL_BUTTON.into(),
697710
..default()
698711
})

‎examples/ui/scaling.rs

+19-25
Original file line numberDiff line numberDiff line change
@@ -32,48 +32,42 @@ fn setup(mut commands: Commands, asset_server: ResMut<AssetServer>) {
3232

3333
commands
3434
.spawn_bundle(NodeBundle {
35-
style: Style {
36-
size: Size::new(Val::Percent(50.0), Val::Percent(50.0)),
37-
position_type: PositionType::Absolute,
38-
position: UiRect {
39-
left: Val::Percent(25.),
40-
top: Val::Percent(25.),
41-
..default()
42-
},
43-
justify_content: JustifyContent::SpaceAround,
35+
size_constraints: SizeConstraints::suggested(Val::Percent(50.0), Val::Percent(50.0)),
36+
position_type: PositionType::Absolute,
37+
offset: UiRect {
38+
left: Val::Percent(25.),
39+
top: Val::Percent(25.),
40+
..default()
41+
},
42+
flex_layout: FlexLayout {
4443
align_items: AlignItems::Center,
44+
justify_content: JustifyContent::SpaceAround,
4545
..default()
4646
},
47-
color: Color::ANTIQUE_WHITE.into(),
47+
color: Color::ANTIQUE_WHITE,
4848
..default()
4949
})
5050
.with_children(|parent| {
5151
parent
5252
.spawn_bundle(NodeBundle {
53-
style: Style {
54-
size: Size::new(Val::Px(40.), Val::Px(40.)),
55-
..default()
56-
},
57-
color: Color::RED.into(),
53+
size_constraints: SizeConstraints::suggested(Val::Px(40.0), Val::Px(40.0)),
54+
color: Color::RED,
5855
..default()
5956
})
6057
.with_children(|parent| {
6158
parent.spawn_bundle(TextBundle::from_section("Size!", text_style));
6259
});
6360
parent.spawn_bundle(NodeBundle {
64-
style: Style {
65-
size: Size::new(Val::Percent(15.), Val::Percent(15.)),
66-
..default()
67-
},
68-
color: Color::BLUE.into(),
61+
size_constraints: SizeConstraints::suggested(
62+
Val::Percent(15.0),
63+
Val::Percent(15.0),
64+
),
65+
color: Color::BLUE,
6966
..default()
7067
});
7168
parent.spawn_bundle(ImageBundle {
72-
style: Style {
73-
size: Size::new(Val::Px(30.0), Val::Px(30.0)),
74-
..default()
75-
},
76-
image: asset_server.load("branding/icon.png").into(),
69+
size_constraints: SizeConstraints::suggested(Val::Px(30.0), Val::Px(30.0)),
70+
image: asset_server.load("branding/icon.png"),
7771
..default()
7872
});
7973
});

‎examples/window/window_resizing.rs

+2-2
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@ fn setup_camera(mut cmd: Commands) {
3737
fn setup_ui(mut cmd: Commands, asset_server: Res<AssetServer>) {
3838
// Node that fills entire background
3939
cmd.spawn_bundle(NodeBundle {
40-
style: Style {
41-
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
40+
size_constraints: SizeConstraints {
41+
suggested: Size::FULL,
4242
..default()
4343
},
4444
..default()

0 commit comments

Comments
 (0)