This example illustrates the basic usage of [ImageNode], a UI node that renders an image.
use bevy::prelude::*;
fn main() {
App::new()
.add_plugins(DefaultPlugins)
.add_systems(Startup, setup)
.run();
}
fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
// Ui camera
commands.spawn(Camera2d);
commands.spawn((
// This root Node serves as a container for the ImageNode.
// In this case, it will center the item on the screen.
Node {
width: percent(100),
height: percent(100),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()
},
// Child Nodes are added with the `children!` macro.
children![(
// Create a new `ImageNode` with the given texture.
ImageNode::new(asset_server.load("branding/icon.png")),
// Child Node control `ImageNode` size
Node {
border: px(5.).all(),
padding: px(10.).all(),
width: px(256.),
height: px(256.),
..default()
},
BorderColor::all(Color::WHITE),
)],
));
}