pub fn px<T>(value: T) -> Valwhere
T: ValNum,Expand description
Returns a Val::Px representing a value in logical pixels.
Examples found in repository?
examples/app/logs.rs (line 26)
20fn setup(mut commands: Commands) {
21 commands.spawn(Camera2d);
22 commands.spawn((
23 Text::new("Press P to panic"),
24 Node {
25 position_type: PositionType::Absolute,
26 top: px(12),
27 left: px(12),
28 ..default()
29 },
30 ));
31}More examples
examples/ui/tab_navigation.rs (line 58)
48fn focus_system(
49 mut commands: Commands,
50 focus: Res<InputFocus>,
51 mut query: Query<Entity, With<Button>>,
52) {
53 if focus.is_changed() {
54 for button in query.iter_mut() {
55 if focus.0 == Some(button) {
56 commands.entity(button).insert(Outline {
57 color: Color::WHITE,
58 width: px(2),
59 offset: px(2),
60 });
61 } else {
62 commands.entity(button).remove::<Outline>();
63 }
64 }
65 }
66}
67
68fn setup(mut commands: Commands) {
69 // ui camera
70 commands.spawn(Camera2d);
71 commands
72 .spawn(Node {
73 width: percent(100),
74 height: percent(100),
75 display: Display::Flex,
76 flex_direction: FlexDirection::Column,
77 align_items: AlignItems::Center,
78 justify_content: JustifyContent::Center,
79 row_gap: px(6),
80 ..default()
81 })
82 .observe(
83 |mut event: On<Pointer<Click>>, mut focus: ResMut<InputFocus>| {
84 focus.0 = None;
85 event.propagate(false);
86 },
87 )
88 .with_children(|parent| {
89 for (label, tab_group, indices) in [
90 // In this group all the buttons have the same `TabIndex` so they will be visited according to their order as children.
91 ("TabGroup 0", TabGroup::new(0), [0, 0, 0, 0]),
92 // In this group the `TabIndex`s are reversed so the buttons will be visited in right-to-left order.
93 ("TabGroup 2", TabGroup::new(2), [3, 2, 1, 0]),
94 // In this group the orders of the indices and buttons match so the buttons will be visited in left-to-right order.
95 ("TabGroup 1", TabGroup::new(1), [0, 1, 2, 3]),
96 // Visit the modal group's buttons in an arbitrary order.
97 ("Modal TabGroup", TabGroup::modal(), [0, 3, 1, 2]),
98 ] {
99 parent.spawn(Text::new(label));
100 parent
101 .spawn((
102 Node {
103 display: Display::Flex,
104 flex_direction: FlexDirection::Row,
105 column_gap: px(6),
106 margin: UiRect {
107 bottom: px(10),
108 ..default()
109 },
110 ..default()
111 },
112 tab_group,
113 ))
114 .with_children(|parent| {
115 for i in indices {
116 parent
117 .spawn((
118 Button,
119 Node {
120 width: px(200),
121 height: px(65),
122 border: UiRect::all(px(5)),
123 justify_content: JustifyContent::Center,
124 align_items: AlignItems::Center,
125 ..default()
126 },
127 BorderColor::all(Color::BLACK),
128 BackgroundColor(NORMAL_BUTTON),
129 TabIndex(i),
130 children![(
131 Text::new(format!("TabIndex {i}")),
132 TextFont {
133 font_size: 20.0,
134 ..default()
135 },
136 TextColor(Color::srgb(0.9, 0.9, 0.9)),
137 )],
138 ))
139 .observe(
140 |mut click: On<Pointer<Click>>,
141 mut focus: ResMut<InputFocus>| {
142 focus.0 = Some(click.entity);
143 click.propagate(false);
144 },
145 );
146 }
147 });
148 }
149 });
150}examples/dev_tools/fps_overlay.rs (line 67)
51fn setup(mut commands: Commands) {
52 // We need to spawn a camera (2d or 3d) to see the overlay
53 commands.spawn(Camera2d);
54
55 // Instruction text
56
57 commands.spawn((
58 Text::new(concat!(
59 "Press 1 to toggle the overlay color.\n",
60 "Press 2 to decrease the overlay size.\n",
61 "Press 3 to increase the overlay size.\n",
62 "Press 4 to toggle the text visibility.\n",
63 "Press 5 to toggle the frame time graph."
64 )),
65 Node {
66 position_type: PositionType::Absolute,
67 bottom: px(12),
68 left: px(12),
69 ..default()
70 },
71 ));
72}examples/ui/window_fallthrough.rs (line 40)
25fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
26 // UI camera
27 commands.spawn(Camera2d);
28 // Text with one span
29 commands.spawn((
30 // Accepts a `String` or any type that converts into a `String`, such as `&str`
31 Text::new("Hit 'P' then scroll/click around!"),
32 TextFont {
33 font: asset_server.load("fonts/FiraSans-Bold.ttf"),
34 font_size: 83.0, // Nice and big so you can see it!
35 ..default()
36 },
37 // Set the style of the TextBundle itself.
38 Node {
39 position_type: PositionType::Absolute,
40 bottom: px(5),
41 right: px(10),
42 ..default()
43 },
44 ));
45}examples/audio/audio_control.rs (line 26)
16fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
17 commands.spawn((
18 AudioPlayer::new(asset_server.load("sounds/Windless Slopes.ogg")),
19 MyMusic,
20 ));
21
22 commands.spawn((
23 Text::new(""),
24 Node {
25 position_type: PositionType::Absolute,
26 top: px(12),
27 left: px(12),
28 ..default()
29 },
30 ProgressText,
31 ));
32
33 // example instructions
34 commands.spawn((
35 Text::new("-/=: Volume Down/Up\nSpace: Toggle Playback\nM: Toggle Mute"),
36 Node {
37 position_type: PositionType::Absolute,
38 bottom: px(12),
39 left: px(12),
40 ..default()
41 },
42 ));
43
44 // camera
45 commands.spawn(Camera3d::default());
46}examples/ui/font_atlas_debug.rs (line 57)
38fn atlas_render_system(
39 mut commands: Commands,
40 mut state: ResMut<State>,
41 font_atlas_set: Res<FontAtlasSet>,
42 images: Res<Assets<Image>>,
43) {
44 if let Some(font_atlases) = font_atlas_set.values().next() {
45 let x_offset = state.atlas_count as f32;
46 if state.atlas_count == font_atlases.len() as u32 {
47 return;
48 }
49 let font_atlas = &font_atlases[state.atlas_count as usize];
50 let image = images.get(&font_atlas.texture).unwrap();
51 state.atlas_count += 1;
52 commands.spawn((
53 ImageNode::new(font_atlas.texture.clone()),
54 Node {
55 position_type: PositionType::Absolute,
56 top: Val::ZERO,
57 left: px(image.width() as f32 * x_offset),
58 ..default()
59 },
60 ));
61 }
62}Additional examples can be found in: