viewport_debug/
viewport_debug.rs

1//! A simple example for debugging viewport coordinates
2//!
3//! This example creates two UI node trees, one using viewport coordinates and one using pixel coordinates,
4//! and then switches between them once per second using the `Display` style property.
5//! If there are no problems both layouts should be identical, except for the color of the margin changing which is used to signal that the displayed UI node tree has changed
6//! (red for viewport, yellow for pixel).
7use bevy::{color::palettes::css::*, prelude::*};
8
9const PALETTE: [Srgba; 10] = [
10    RED, YELLOW, WHITE, BEIGE, AQUA, CRIMSON, NAVY, AZURE, LIME, BLACK,
11];
12
13#[derive(Component, Default, PartialEq)]
14enum Coords {
15    #[default]
16    Viewport,
17    Pixel,
18}
19
20fn main() {
21    App::new()
22        .insert_resource(UiScale(2.0))
23        .add_plugins(DefaultPlugins.set(WindowPlugin {
24            primary_window: Some(Window {
25                title: "Viewport Coordinates Debug".to_string(),
26                // This example relies on these specific viewport dimensions, so let's explicitly
27                // define them.
28                resolution: (1280, 720).into(),
29                resizable: false,
30                ..Default::default()
31            }),
32            ..Default::default()
33        }))
34        .add_systems(Startup, setup)
35        .add_systems(Update, update)
36        .run();
37}
38
39fn update(
40    mut timer: Local<f32>,
41    mut visible_tree: Local<Coords>,
42    time: Res<Time>,
43    mut coords_nodes: Query<(&Coords, &mut Node)>,
44) {
45    *timer -= time.delta_secs();
46    if *timer <= 0. {
47        *timer = 1.;
48        *visible_tree = match *visible_tree {
49            Coords::Viewport => Coords::Pixel,
50            Coords::Pixel => Coords::Viewport,
51        };
52        for (coords, mut node) in coords_nodes.iter_mut() {
53            node.display = if *coords == *visible_tree {
54                Display::Flex
55            } else {
56                Display::None
57            };
58        }
59    }
60}
61
62fn setup(mut commands: Commands) {
63    commands.spawn(Camera2d);
64    spawn_with_viewport_coords(&mut commands);
65    spawn_with_pixel_coords(&mut commands);
66}
67
68fn spawn_with_viewport_coords(commands: &mut Commands) {
69    commands
70        .spawn((
71            Node {
72                width: vw(100),
73                height: vh(100),
74                border: UiRect::axes(vw(5), vh(5)),
75                flex_wrap: FlexWrap::Wrap,
76                ..default()
77            },
78            BorderColor::all(PALETTE[0]),
79            Coords::Viewport,
80        ))
81        .with_children(|builder| {
82            builder.spawn((
83                Node {
84                    width: vw(30),
85                    height: vh(30),
86                    border: UiRect::all(vmin(5)),
87                    ..default()
88                },
89                BackgroundColor(PALETTE[2].into()),
90                BorderColor::all(PALETTE[9]),
91            ));
92
93            builder.spawn((
94                Node {
95                    width: vw(60),
96                    height: vh(30),
97                    ..default()
98                },
99                BackgroundColor(PALETTE[3].into()),
100            ));
101
102            builder.spawn((
103                Node {
104                    width: vw(45),
105                    height: vh(30),
106                    border: UiRect::left(vmax(45. / 2.)),
107                    ..default()
108                },
109                BackgroundColor(PALETTE[4].into()),
110                BorderColor::all(PALETTE[8]),
111            ));
112
113            builder.spawn((
114                Node {
115                    width: vw(45),
116                    height: vh(30),
117                    border: UiRect::right(vmax(45. / 2.)),
118                    ..default()
119                },
120                BackgroundColor(PALETTE[5].into()),
121                BorderColor::all(PALETTE[8]),
122            ));
123
124            builder.spawn((
125                Node {
126                    width: vw(60),
127                    height: vh(30),
128                    ..default()
129                },
130                BackgroundColor(PALETTE[6].into()),
131            ));
132
133            builder.spawn((
134                Node {
135                    width: vw(30),
136                    height: vh(30),
137                    border: UiRect::all(vmin(5)),
138                    ..default()
139                },
140                BackgroundColor(PALETTE[7].into()),
141                BorderColor::all(PALETTE[9]),
142            ));
143        });
144}
145
146fn spawn_with_pixel_coords(commands: &mut Commands) {
147    commands
148        .spawn((
149            Node {
150                width: px(640),
151                height: px(360),
152                border: UiRect::axes(px(32), px(18)),
153                flex_wrap: FlexWrap::Wrap,
154                ..default()
155            },
156            BorderColor::all(PALETTE[1]),
157            Coords::Pixel,
158        ))
159        .with_children(|builder| {
160            builder.spawn((
161                Node {
162                    width: px(192),
163                    height: px(108),
164                    border: UiRect::axes(px(18), px(18)),
165                    ..default()
166                },
167                BackgroundColor(PALETTE[2].into()),
168                BorderColor::all(PALETTE[9]),
169            ));
170
171            builder.spawn((
172                Node {
173                    width: px(384),
174                    height: px(108),
175                    ..default()
176                },
177                BackgroundColor(PALETTE[3].into()),
178            ));
179
180            builder.spawn((
181                Node {
182                    width: px(288),
183                    height: px(108),
184                    border: UiRect::left(px(144)),
185                    ..default()
186                },
187                BackgroundColor(PALETTE[4].into()),
188                BorderColor::all(PALETTE[8]),
189            ));
190
191            builder.spawn((
192                Node {
193                    width: px(288),
194                    height: px(108),
195                    border: UiRect::right(px(144)),
196                    ..default()
197                },
198                BackgroundColor(PALETTE[5].into()),
199                BorderColor::all(PALETTE[8]),
200            ));
201
202            builder.spawn((
203                Node {
204                    width: px(384),
205                    height: px(108),
206                    ..default()
207                },
208                BackgroundColor(PALETTE[6].into()),
209            ));
210
211            builder.spawn((
212                Node {
213                    width: px(192),
214                    height: px(108),
215                    border: UiRect::axes(px(18), px(18)),
216                    ..default()
217                },
218                BackgroundColor(PALETTE[7].into()),
219                BorderColor::all(PALETTE[9]),
220            ));
221        });
222}
viewport_debug/viewport_debug.rs

viewport_debug/
viewport_debug.rs
