fixed_node/
fixed_node.rs

1//! Demonstrates how to use `FixedNode` to lay out a UI node as a root node
2
3use bevy::color::palettes::css::BLUE;
4use bevy::color::palettes::css::RED;
5use bevy::color::palettes::css::YELLOW;
6use bevy::prelude::*;
7
8fn main() {
9    App::new()
10        .add_plugins(DefaultPlugins)
11        .add_systems(Startup, setup)
12        .run();
13}
14
15fn setup(mut commands: Commands) {
16    commands.spawn(Camera2d);
17
18    commands
19        .spawn((
20            Node {
21                width: percent(100),
22                height: percent(100),
23                align_items: AlignItems::Center,
24                justify_content: JustifyContent::Center,
25                ..default()
26            },
27            BackgroundColor(BLUE.into()),
28            Pickable::IGNORE,
29            children![(
30                FixedNode,
31                Node {
32                    width: px(100),
33                    height: px(100),
34                    ..default()
35                },
36                BackgroundColor(YELLOW.into()),
37            )],
38        ))
39        .observe(
40            |over: On<PointerOver>, mut colors: Query<&mut BackgroundColor>| {
41                colors.get_mut(over.entity).unwrap().0 = RED.into();
42            },
43        )
44        .observe(
45            |over: On<PointerLeave>, mut colors: Query<&mut BackgroundColor>| {
46                colors.get_mut(over.entity).unwrap().0 = BLUE.into();
47            },
48        );
49}
fixed_node/fixed_node.rs

fixed_node/
fixed_node.rs
