docs/bevy/examples/ui/ui_target_camera.rs 3.6 K · 94 lines · raw · history

1 //! Demonstrates how to use `UiTargetCamera` and camera ordering.
2
3 use bevy::color::palettes::css::BLUE;
4 use bevy::color::palettes::css::GREEN;
5 use bevy::color::palettes::css::RED;
6 use bevy::color::palettes::css::YELLOW;
7 use bevy::prelude::*;
8
9 fn main() {
10 App::new()
11 .add_plugins(DefaultPlugins)
12 .add_systems(Startup, setup)
13 .run();
14 }
15
16 const BOX_SIZE: f32 = 100.;
17
18 fn setup(mut commands: Commands) {
19 // Root UI node displaying instructions.
20 // Has no `UiTargetCamera`; the highest-order camera rendering to the primary window will be chosen automatically.
21 commands.spawn((
22 Node {
23 align_self: AlignSelf::Center,
24 justify_self: JustifySelf::Center,
25 justify_content: JustifyContent::Center,
26 bottom: px(2. * BOX_SIZE),
27 ..default()
28 },
29 Text::new("Each box is rendered by a different camera\n* left-click: increase the camera's order\n* right-click: decrease the camera's order")
30 ));
31
32 for (i, color) in [RED, GREEN, BLUE].into_iter().enumerate() {
33 let camera_entity = commands
34 .spawn((
35 // Ordering behavior is the same using `Camera3d`.
36 Camera2d,
37 Camera {
38 // The viewport will be cleared according to the `ClearColorConfig` of the camera with the lowest order, skipping cameras set to `ClearColorConfig::NONE`.
39 // If all are set to `ClearColorConfig::NONE`, no clear color is used.
40 clear_color: ClearColorConfig::Custom(color.into()),
41 order: i as isize,
42 ..Default::default()
43 },
44 ))
45 .id();
46
47 // Label each box with the order of its camera target
48 let label_entity = commands
49 .spawn((
50 Text(format!("{i}")),
51 TextFont::from_font_size(50.),
52 TextColor(color.into()),
53 ))
54 .id();
55
56 commands
57 .spawn((
58 Node {
59 align_self: AlignSelf::Center,
60 justify_self: JustifySelf::Center,
61 justify_content: JustifyContent::Center,
62 align_items: AlignItems::Center,
63 left: px(0.67 * BOX_SIZE * (i as f32 - 1.)),
64 top: px(0.67 * BOX_SIZE * (i as f32 - 1.)),
65 width: px(BOX_SIZE),
66 height: px(BOX_SIZE),
67 border: px(0.1 * BOX_SIZE).into(),
68 ..default()
69 },
70 // Bevy UI doesn't support `RenderLayers`. Each UI layout can only have one render target, selected using `UiTargetCamera`.
71 UiTargetCamera(camera_entity),
72 BackgroundColor(Color::BLACK),
73 BorderColor::all(YELLOW),
74 ))
75 .observe(
76 move |on_pressed: On<PointerPress>,
77 mut label_query: Query<&mut Text>,
78 mut camera_query: Query<&mut Camera>| {
79 let Ok(mut label_text) = label_query.get_mut(label_entity) else {
80 return;
81 };
82 let Ok(mut camera) = camera_query.get_mut(camera_entity) else {
83 return;
84 };
85 camera.order += match on_pressed.button {
86 PointerButton::Primary => 1,
87 _ => -1,
88 };
89 label_text.0 = format!("{}", camera.order);
90 },
91 )
92 .add_child(label_entity);
93 }
94 }