Skip to main content

image_node/
image_node.rs

1//! This example illustrates the basic usage of [`ImageNode`],
2//! a UI node that renders an image.
3
4use bevy::prelude::*;
5
6fn main() {
7    App::new()
8        .add_plugins(DefaultPlugins)
9        .add_systems(Startup, setup)
10        .run();
11}
12
13fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
14    // Ui camera
15    commands.spawn(Camera2d);
16
17    commands.spawn((
18        // This root Node serves as a container for the ImageNode.
19        // In this case, it will center the item on the screen.
20        Node {
21            width: percent(100),
22            height: percent(100),
23            align_items: AlignItems::Center,
24            justify_content: JustifyContent::Center,
25            ..default()
26        },
27        // Child Nodes are added with the `children!` macro.
28        children![(
29            // Create a new `ImageNode` with the given texture.
30            ImageNode::new(asset_server.load("branding/icon.png")),
31            // Child Node control `ImageNode` size
32            Node {
33                border: px(5.).all(),
34                padding: px(10.).all(),
35                width: px(256.),
36                height: px(256.),
37                ..default()
38            },
39            BorderColor::all(Color::WHITE),
40        )],
41    ));
42}