Struct ImageNode 

pub struct ImageNode {
    pub color: Color,
    pub image: Handle<Image>,
    pub texture_atlas: Option<TextureAtlas>,
    pub flip_x: bool,
    pub flip_y: bool,
    pub rect: Option<Rect>,
    pub image_mode: NodeImageMode,
    pub visual_box: VisualBox,
}

A UI Node that renders an image.

Fields

color: Color

The tint color used to draw the image.

This is multiplied by the color of each pixel in the image. The field value defaults to solid white, which will pass the image through unmodified.

image: Handle<Image>

Handle to the texture.

This defaults to a TRANSPARENT_IMAGE_HANDLE, which points to a fully transparent 1x1 texture.

texture_atlas: Option<TextureAtlas>

The (optional) texture atlas used to render the image.

flip_x: bool

Whether the image should be flipped along its x-axis.

flip_y: bool

Whether the image should be flipped along its y-axis.

rect: Option<Rect>

An optional rectangle representing the region of the image to render, instead of rendering the full image. This is an easy one-off alternative to using a TextureAtlas.

When used with a TextureAtlas, the rect is offset by the atlas’s minimal (top-left) corner position.

image_mode: NodeImageMode

Controls how the image is altered to fit within the layout and how the layout algorithm determines the space to allocate for the image.

visual_box: VisualBox

Which region of the UI node the image should be drawn within.

Implementations

impl ImageNode

pub fn new(texture: Handle<Image>) -> ImageNode

Create a new ImageNode with the given texture.

Examples found in repository

examples/ui/scroll_and_overflow/overflow_debug.rs (line 143)

fn spawn_image(
    parent: &mut ChildSpawnerCommands,
    asset_server: &Res<AssetServer>,
    update_transform: impl UpdateTransform + Component,
) {
    spawn_container(parent, update_transform, |parent| {
        parent.spawn((
            ImageNode::new(asset_server.load("branding/bevy_logo_dark_big.png")),
            Node {
                height: px(100),
                position_type: PositionType::Absolute,
                top: px(-50),
                left: px(-200),
                ..default()
            },
        ));
    });
}

examples/ui/text/font_atlas_debug.rs (line 54)

fn atlas_render_system(
    mut commands: Commands,
    mut state: ResMut<State>,
    font_atlas_set: Res<FontAtlasSet>,
    images: Res<Assets<Image>>,
) {
    if let Some(font_atlases) = font_atlas_set.values().next() {
        let x_offset = state.atlas_count as f32;
        if state.atlas_count == font_atlases.len() as u32 {
            return;
        }
        let font_atlas = &font_atlases[state.atlas_count as usize];
        let image = images.get(&font_atlas.texture).unwrap();
        state.atlas_count += 1;
        commands.spawn((
            ImageNode::new(font_atlas.texture.clone()),
            Node {
                position_type: PositionType::Absolute,
                top: Val::ZERO,
                left: px(image.width() as f32 * x_offset),
                ..default()
            },
        ));
    }
}

examples/showcase/game_menu.rs (line 89)

    fn splash_setup(mut commands: Commands, asset_server: Res<AssetServer>) {
        let icon = asset_server.load("branding/icon.png");
        // Display the logo
        commands.spawn((
            // This entity will be despawned when exiting the state
            DespawnOnExit(GameState::Splash),
            Node {
                align_items: AlignItems::Center,
                justify_content: JustifyContent::Center,
                width: percent(100),
                height: percent(100),
                ..default()
            },
            OnSplashScreen,
            children![(
                ImageNode::new(icon),
                Node {
                    // This will set the logo to be 200px wide, and auto adjust its height
                    width: px(200),
                    ..default()
                },
            )],
        ));
        // Insert the timer as a resource
        commands.insert_resource(SplashTimer(Timer::from_seconds(1.0, TimerMode::Once)));
    }

    // Tick the timer, and change state when finished
    fn countdown(
        mut game_state: ResMut<NextState<GameState>>,
        time: Res<Time>,
        mut timer: ResMut<SplashTimer>,
    ) {
        if timer.tick(time.delta()).is_finished() {
            game_state.set(GameState::Menu);
        }
    }
}

mod game {
    use bevy::{
        color::palettes::basic::{BLUE, LIME},
        prelude::*,
    };

    use super::{DisplayQuality, GameState, Volume, TEXT_COLOR};

    // This plugin will contain the game. In this case, it's just be a screen that will
    // display the current settings for 5 seconds before returning to the menu
    pub fn game_plugin(app: &mut App) {
        app.add_systems(OnEnter(GameState::Game), game_setup)
            .add_systems(Update, game.run_if(in_state(GameState::Game)));
    }

    // Tag component used to tag entities added on the game screen
    #[derive(Component)]
    struct OnGameScreen;

    #[derive(Resource, Deref, DerefMut)]
    struct GameTimer(Timer);

    fn game_setup(
        mut commands: Commands,
        display_quality: Res<DisplayQuality>,
        volume: Res<Volume>,
    ) {
        commands.spawn((
            DespawnOnExit(GameState::Game),
            Node {
                width: percent(100),
                height: percent(100),
                // center children
                align_items: AlignItems::Center,
                justify_content: JustifyContent::Center,
                ..default()
            },
            OnGameScreen,
            children![(
                Node {
                    // This will display its children in a column, from top to bottom
                    flex_direction: FlexDirection::Column,
                    // `align_items` will align children on the cross axis. Here the main axis is
                    // vertical (column), so the cross axis is horizontal. This will center the
                    // children
                    align_items: AlignItems::Center,
                    ..default()
                },
                BackgroundColor(Color::BLACK),
                children![
                    (
                        Text::new("Will be back to the menu shortly..."),
                        TextFont {
                            font_size: FontSize::Px(67.0),
                            ..default()
                        },
                        TextColor(TEXT_COLOR),
                        Node {
                            margin: UiRect::all(px(50)),
                            ..default()
                        },
                    ),
                    (
                        Text::default(),
                        Node {
                            margin: UiRect::all(px(50)),
                            ..default()
                        },
                        children![
                            (
                                TextSpan(format!("quality: {:?}", *display_quality)),
                                TextFont {
                                    font_size: FontSize::Px(50.0),
                                    ..default()
                                },
                                TextColor(BLUE.into()),
                            ),
                            (
                                TextSpan::new(" - "),
                                TextFont {
                                    font_size: FontSize::Px(50.0),
                                    ..default()
                                },
                                TextColor(TEXT_COLOR),
                            ),
                            (
                                TextSpan(format!("volume: {:?}", *volume)),
                                TextFont {
                                    font_size: FontSize::Px(50.0),
                                    ..default()
                                },
                                TextColor(LIME.into()),
                            ),
                        ]
                    ),
                ]
            )],
        ));
        // Spawn a 5 seconds timer to trigger going back to the menu
        commands.insert_resource(GameTimer(Timer::from_seconds(5.0, TimerMode::Once)));
    }

    // Tick the timer, and change state when finished
    fn game(
        time: Res<Time>,
        mut game_state: ResMut<NextState<GameState>>,
        mut timer: ResMut<GameTimer>,
    ) {
        if timer.tick(time.delta()).is_finished() {
            game_state.set(GameState::Menu);
        }
    }
}

mod menu {
    use bevy::{
        app::AppExit,
        color::palettes::css::CRIMSON,
        ecs::component::Mutable,
        ecs::spawn::{SpawnIter, SpawnWith},
        prelude::*,
    };

    use super::{DisplayQuality, GameState, Setting, Volume, TEXT_COLOR};

    // This plugin manages the menu, with 5 different screens:
    // - a main menu with "New Game", "Settings", "Quit"
    // - a settings menu with two submenus and a back button
    // - two settings screen with a setting that can be set and a back button
    pub fn menu_plugin(app: &mut App) {
        app
            // At start, the menu is not enabled. This will be changed in `menu_setup` when
            // entering the `GameState::Menu` state.
            // Current screen in the menu is handled by an independent state from `GameState`
            .init_state::<MenuState>()
            .add_systems(OnEnter(GameState::Menu), menu_setup)
            // Systems to handle the main menu screen
            .add_systems(OnEnter(MenuState::Main), main_menu_setup)
            // Systems to handle the settings menu screen
            .add_systems(OnEnter(MenuState::Settings), settings_menu_setup)
            // Systems to handle the display settings screen
            .add_systems(
                OnEnter(MenuState::SettingsDisplay),
                display_settings_menu_setup,
            )
            .add_systems(
                Update,
                (setting_button::<DisplayQuality>.run_if(in_state(MenuState::SettingsDisplay)),),
            )
            // Systems to handle the sound settings screen
            .add_systems(OnEnter(MenuState::SettingsSound), sound_settings_menu_setup)
            .add_systems(
                Update,
                setting_button::<Volume>.run_if(in_state(MenuState::SettingsSound)),
            )
            // Common systems to all screens that handles buttons behavior
            .add_systems(
                Update,
                (menu_action, button_system).run_if(in_state(GameState::Menu)),
            );
    }

    // State used for the current menu screen
    #[derive(Clone, Copy, Default, Eq, PartialEq, Debug, Hash, States)]
    enum MenuState {
        Main,
        Settings,
        SettingsDisplay,
        SettingsSound,
        #[default]
        Disabled,
    }

    // Tag component used to tag entities added on the main menu screen
    #[derive(Component)]
    struct OnMainMenuScreen;

    // Tag component used to tag entities added on the settings menu screen
    #[derive(Component)]
    struct OnSettingsMenuScreen;

    // Tag component used to tag entities added on the display settings menu screen
    #[derive(Component)]
    struct OnDisplaySettingsMenuScreen;

    // Tag component used to tag entities added on the sound settings menu screen
    #[derive(Component)]
    struct OnSoundSettingsMenuScreen;

    const NORMAL_BUTTON: Color = Color::srgb(0.15, 0.15, 0.15);
    const HOVERED_BUTTON: Color = Color::srgb(0.25, 0.25, 0.25);
    const HOVERED_PRESSED_BUTTON: Color = Color::srgb(0.25, 0.65, 0.25);
    const PRESSED_BUTTON: Color = Color::srgb(0.35, 0.75, 0.35);

    // Tag component used to mark which setting is currently selected
    #[derive(Component)]
    struct SelectedOption;

    // All actions that can be triggered from a button click
    #[derive(Component)]
    enum MenuButtonAction {
        Play,
        Settings,
        SettingsDisplay,
        SettingsSound,
        BackToMainMenu,
        BackToSettings,
        Quit,
    }

    // This system handles changing all buttons color based on mouse interaction
    fn button_system(
        mut interaction_query: Query<
            (&Interaction, &mut BackgroundColor, Option<&SelectedOption>),
            (Changed<Interaction>, With<Button>),
        >,
    ) {
        for (interaction, mut background_color, selected) in &mut interaction_query {
            *background_color = match (*interaction, selected) {
                (Interaction::Pressed, _) | (Interaction::None, Some(_)) => PRESSED_BUTTON.into(),
                (Interaction::Hovered, Some(_)) => HOVERED_PRESSED_BUTTON.into(),
                (Interaction::Hovered, None) => HOVERED_BUTTON.into(),
                (Interaction::None, None) => NORMAL_BUTTON.into(),
            }
        }
    }

    // This system updates the settings when a new value for a setting is selected, and marks
    // the button as the one currently selected
    fn setting_button<T: Resource<Mutability = Mutable> + Component + PartialEq + Copy>(
        interaction_query: Query<
            (&Interaction, &Setting<T>, Entity),
            (Changed<Interaction>, With<Button>),
        >,
        selected_query: Single<(Entity, &mut BackgroundColor), With<SelectedOption>>,
        mut commands: Commands,
        mut setting: ResMut<T>,
    ) {
        let (previous_button, mut previous_button_color) = selected_query.into_inner();
        for (interaction, button_setting, entity) in &interaction_query {
            if *interaction == Interaction::Pressed && *setting != button_setting.0 {
                *previous_button_color = NORMAL_BUTTON.into();
                commands.entity(previous_button).remove::<SelectedOption>();
                commands.entity(entity).insert(SelectedOption);
                *setting = button_setting.0;
            }
        }
    }

    fn menu_setup(mut menu_state: ResMut<NextState<MenuState>>) {
        menu_state.set(MenuState::Main);
    }

    fn main_menu_setup(mut commands: Commands, asset_server: Res<AssetServer>) {
        // Common style for all buttons on the screen
        let button_node = Node {
            width: px(300),
            height: px(65),
            margin: UiRect::all(px(20)),
            justify_content: JustifyContent::Center,
            align_items: AlignItems::Center,
            ..default()
        };
        let button_icon_node = Node {
            width: px(30),
            // This takes the icons out of the flexbox flow, to be positioned exactly
            position_type: PositionType::Absolute,
            // The icon will be close to the left border of the button
            left: px(10),
            ..default()
        };
        let button_text_font = TextFont {
            font_size: FontSize::Px(33.0),
            ..default()
        };

        let right_icon = asset_server.load("textures/Game Icons/right.png");
        let wrench_icon = asset_server.load("textures/Game Icons/wrench.png");
        let exit_icon = asset_server.load("textures/Game Icons/exitRight.png");

        commands.spawn((
            DespawnOnExit(MenuState::Main),
            Node {
                width: percent(100),
                height: percent(100),
                align_items: AlignItems::Center,
                justify_content: JustifyContent::Center,
                ..default()
            },
            OnMainMenuScreen,
            children![(
                Node {
                    flex_direction: FlexDirection::Column,
                    align_items: AlignItems::Center,
                    ..default()
                },
                BackgroundColor(CRIMSON.into()),
                children![
                    // Display the game name
                    (
                        Text::new("Bevy Game Menu UI"),
                        TextFont {
                            font_size: FontSize::Px(67.0),
                            ..default()
                        },
                        TextColor(TEXT_COLOR),
                        Node {
                            margin: UiRect::all(px(50)),
                            ..default()
                        },
                    ),
                    // Display three buttons for each action available from the main menu:
                    // - new game
                    // - settings
                    // - quit
                    (
                        Button,
                        button_node.clone(),
                        BackgroundColor(NORMAL_BUTTON),
                        MenuButtonAction::Play,
                        children![
                            (ImageNode::new(right_icon), button_icon_node.clone()),
                            (
                                Text::new("New Game"),
                                button_text_font.clone(),
                                TextColor(TEXT_COLOR),
                            ),
                        ]
                    ),
                    (
                        Button,
                        button_node.clone(),
                        BackgroundColor(NORMAL_BUTTON),
                        MenuButtonAction::Settings,
                        children![
                            (ImageNode::new(wrench_icon), button_icon_node.clone()),
                            (
                                Text::new("Settings"),
                                button_text_font.clone(),
                                TextColor(TEXT_COLOR),
                            ),
                        ]
                    ),
                    (
                        Button,
                        button_node,
                        BackgroundColor(NORMAL_BUTTON),
                        MenuButtonAction::Quit,
                        children![
                            (ImageNode::new(exit_icon), button_icon_node),
                            (Text::new("Quit"), button_text_font, TextColor(TEXT_COLOR),),
                        ]
                    ),
                ]
            )],
        ));
    }

examples/ui/images/image_node.rs (line 30)

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),
        )],
    ));
}

examples/stress_tests/many_buttons.rs (line 294)

fn spawn_button(
    commands: &mut ChildSpawnerCommands,
    background_color: Color,
    buttons: f32,
    column: usize,
    row: usize,
    spawn_text: bool,
    border: UiRect,
    border_color: BorderColor,
    image: Option<Handle<Image>>,
) {
    let width = vw(90.0 / buttons);
    let height = vh(90.0 / buttons);
    let margin = UiRect::axes(width * 0.05, height * 0.05);
    let mut builder = commands.spawn((
        Button,
        Node {
            width,
            height,
            margin,
            align_items: AlignItems::Center,
            justify_content: JustifyContent::Center,
            border,
            ..default()
        },
        BackgroundColor(background_color),
        border_color,
        IdleColor(background_color),
    ));

    if let Some(image) = image {
        builder.insert(ImageNode::new(image));
    }

    if spawn_text {
        builder.with_children(|parent| {
            // These labels are split to stress test multi-span text
            parent
                .spawn((
                    Text(format!("{column}, ")),
                    TextFont {
                        font_size: FONT_SIZE,
                        ..default()
                    },
                    TextColor(Color::srgb(0.5, 0.2, 0.2)),
                ))
                .with_child((
                    TextSpan(format!("{row}")),
                    TextFont {
                        font_size: FONT_SIZE,
                        ..default()
                    },
                    TextColor(Color::srgb(0.2, 0.2, 0.5)),
                ));
        });
    }
}

examples/ui/ui_scaling.rs (line 69)

fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
    commands.spawn(Camera2d);

    let text_font = TextFont {
        font_size: FontSize::Px(13.),
        ..default()
    };

    commands
        .spawn((
            Node {
                width: percent(50),
                height: percent(50),
                position_type: PositionType::Absolute,
                left: percent(25),
                top: percent(25),
                justify_content: JustifyContent::SpaceAround,
                align_items: AlignItems::Center,
                ..default()
            },
            BackgroundColor(ANTIQUE_WHITE.into()),
        ))
        .with_children(|parent| {
            parent
                .spawn((
                    Node {
                        width: px(40),
                        height: px(40),
                        ..default()
                    },
                    BackgroundColor(RED.into()),
                ))
                .with_children(|parent| {
                    parent.spawn((Text::new("Size!"), text_font, TextColor::BLACK));
                });
            parent.spawn((
                Node {
                    width: percent(15),
                    height: percent(15),
                    ..default()
                },
                BackgroundColor(BLUE.into()),
            ));
            parent.spawn((
                ImageNode::new(asset_server.load("branding/icon.png")),
                Node {
                    width: px(30),
                    height: px(30),
                    ..default()
                },
            ));
        });
}

Additional examples can be found in:

• examples/testbed/ui.rs
• examples/ui/scroll_and_overflow/overflow.rs
• examples/ui/scroll_and_overflow/overflow_clip_margin.rs
• examples/testbed/full_ui.rs

pub fn solid_color(color: Color) -> ImageNode

Create a solid color ImageNode.

This is primarily useful for debugging / mocking the extents of your image.

pub fn from_atlas_image(image: Handle<Image>, atlas: TextureAtlas) -> ImageNode

Create a ImageNode from an image, with an associated texture atlas

Examples found in repository

examples/usage/cooldown.rs (line 108)

fn build_ability(
    food: FoodItem,
    texture: Handle<Image>,
    layout: Handle<TextureAtlasLayout>,
) -> impl Bundle {
    let FoodItem {
        name,
        cooldown,
        index,
    } = food;
    let name = Name::new(name);

    // Every food item is a button with a child node.
    // The child node's height will be animated to be at 100% at the beginning
    // of a cooldown, effectively graying out the whole button, and then getting smaller over time.
    (
        Node {
            width: px(80),
            height: px(80),
            flex_direction: FlexDirection::ColumnReverse,
            ..default()
        },
        BackgroundColor(tailwind::SLATE_400.into()),
        Button,
        ImageNode::from_atlas_image(texture, TextureAtlas { layout, index }),
        Cooldown(Timer::from_seconds(cooldown, TimerMode::Once)),
        name,
        children![(
            Node {
                width: percent(100),
                height: percent(0),
                ..default()
            },
            BackgroundColor(tailwind::SLATE_50.with_alpha(0.5).into()),
        )],
    )
}

examples/ui/images/ui_texture_atlas.rs (lines 46-49)

fn setup(
    mut commands: Commands,
    asset_server: Res<AssetServer>,
    mut texture_atlases: ResMut<Assets<TextureAtlasLayout>>,
) {
    // Camera
    commands.spawn(Camera2d);

    let font_size: f32 = 20.;
    let text_font = TextFont::from_font_size(20.);

    let texture_handle = asset_server.load("textures/rpg/chars/gabe/gabe-idle-run.png");
    let texture_atlas = TextureAtlasLayout::from_grid(UVec2::splat(24), 7, 1, None, None);
    let texture_atlas_handle = texture_atlases.add(texture_atlas);

    // root node
    commands
        .spawn(Node {
            width: percent(100),
            height: percent(100),
            flex_direction: FlexDirection::Column,
            justify_content: JustifyContent::Center,
            align_items: AlignItems::Center,
            row_gap: px(font_size * 2.),
            ..default()
        })
        .with_children(|parent| {
            parent.spawn((
                ImageNode::from_atlas_image(
                    texture_handle,
                    TextureAtlas::from(texture_atlas_handle),
                ),
                Node {
                    width: px(256),
                    height: px(256),
                    ..default()
                },
                BackgroundColor(ANTIQUE_WHITE.into()),
                Outline::new(px(8), Val::ZERO, CRIMSON.into()),
            ));
            parent
                .spawn((Text::new("press "), text_font.clone()))
                .with_child((
                    TextSpan::new("space"),
                    TextColor(YELLOW.into()),
                    text_font.clone(),
                ))
                .with_child((TextSpan::new(" to advance frames"), text_font));
        });
}

examples/ui/images/ui_texture_atlas_slice.rs (lines 82-88)

fn setup(
    mut commands: Commands,
    asset_server: Res<AssetServer>,
    mut texture_atlases: ResMut<Assets<TextureAtlasLayout>>,
) {
    let texture_handle = asset_server.load("textures/fantasy_ui_borders/border_sheet.png");
    let atlas_layout =
        TextureAtlasLayout::from_grid(UVec2::new(50, 50), 6, 6, Some(UVec2::splat(2)), None);
    let atlas_layout_handle = texture_atlases.add(atlas_layout);

    let slicer = TextureSlicer {
        border: BorderRect::all(24.0),
        center_scale_mode: SliceScaleMode::Stretch,
        sides_scale_mode: SliceScaleMode::Stretch,
        max_corner_scale: 1.0,
    };
    // ui camera
    commands.spawn(Camera2d);
    commands
        .spawn(Node {
            width: percent(100),
            height: percent(100),
            align_items: AlignItems::Center,
            justify_content: JustifyContent::Center,
            ..default()
        })
        .with_children(|parent| {
            for (idx, [w, h]) in [
                (0, [150.0, 150.0]),
                (7, [300.0, 150.0]),
                (13, [150.0, 300.0]),
            ] {
                parent
                    .spawn((
                        Button,
                        ImageNode::from_atlas_image(
                            texture_handle.clone(),
                            TextureAtlas {
                                index: idx,
                                layout: atlas_layout_handle.clone(),
                            },
                        )
                        .with_mode(NodeImageMode::Sliced(slicer.clone())),
                        Node {
                            width: px(w),
                            height: px(h),
                            // horizontally center child text
                            justify_content: JustifyContent::Center,
                            // vertically center child text
                            align_items: AlignItems::Center,
                            margin: px(20).all(),
                            ..default()
                        },
                    ))
                    .with_children(|parent| {
                        parent.spawn((
                            Text::new("Button"),
                            TextFont {
                                font: asset_server.load("fonts/FiraSans-Bold.ttf").into(),
                                font_size: FontSize::Px(33.0),
                                ..default()
                            },
                            TextColor(Color::srgb(0.9, 0.9, 0.9)),
                        ));
                    });
            }
        });
}

pub const fn with_color(self, color: Color) -> ImageNode

Set the color tint

pub const fn with_flip_x(self) -> ImageNode

Flip the image along its x-axis

pub const fn with_flip_y(self) -> ImageNode

Flip the image along its y-axis

pub const fn with_rect(self, rect: Rect) -> ImageNode

pub const fn with_mode(self, mode: NodeImageMode) -> ImageNode

Examples found in repository

examples/ui/images/ui_texture_atlas_slice.rs (line 89)

fn setup(
    mut commands: Commands,
    asset_server: Res<AssetServer>,
    mut texture_atlases: ResMut<Assets<TextureAtlasLayout>>,
) {
    let texture_handle = asset_server.load("textures/fantasy_ui_borders/border_sheet.png");
    let atlas_layout =
        TextureAtlasLayout::from_grid(UVec2::new(50, 50), 6, 6, Some(UVec2::splat(2)), None);
    let atlas_layout_handle = texture_atlases.add(atlas_layout);

    let slicer = TextureSlicer {
        border: BorderRect::all(24.0),
        center_scale_mode: SliceScaleMode::Stretch,
        sides_scale_mode: SliceScaleMode::Stretch,
        max_corner_scale: 1.0,
    };
    // ui camera
    commands.spawn(Camera2d);
    commands
        .spawn(Node {
            width: percent(100),
            height: percent(100),
            align_items: AlignItems::Center,
            justify_content: JustifyContent::Center,
            ..default()
        })
        .with_children(|parent| {
            for (idx, [w, h]) in [
                (0, [150.0, 150.0]),
                (7, [300.0, 150.0]),
                (13, [150.0, 300.0]),
            ] {
                parent
                    .spawn((
                        Button,
                        ImageNode::from_atlas_image(
                            texture_handle.clone(),
                            TextureAtlas {
                                index: idx,
                                layout: atlas_layout_handle.clone(),
                            },
                        )
                        .with_mode(NodeImageMode::Sliced(slicer.clone())),
                        Node {
                            width: px(w),
                            height: px(h),
                            // horizontally center child text
                            justify_content: JustifyContent::Center,
                            // vertically center child text
                            align_items: AlignItems::Center,
                            margin: px(20).all(),
                            ..default()
                        },
                    ))
                    .with_children(|parent| {
                        parent.spawn((
                            Text::new("Button"),
                            TextFont {
                                font: asset_server.load("fonts/FiraSans-Bold.ttf").into(),
                                font_size: FontSize::Px(33.0),
                                ..default()
                            },
                            TextColor(Color::srgb(0.9, 0.9, 0.9)),
                        ));
                    });
            }
        });
}

examples/testbed/full_ui.rs (line 350)

fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
    // Camera
    commands.spawn((Camera2d, IsDefaultUiCamera, BoxShadowSamples(6)));

    // root node
    commands
        .spawn(Node {
            width: percent(100),
            height: percent(100),
            justify_content: JustifyContent::SpaceBetween,
            ..default()
        })
        .insert(Pickable::IGNORE)
        .with_children(|parent| {
            // left vertical fill (border)
            parent
                .spawn((
                    Node {
                        width: px(200),
                        border: UiRect::all(px(2)),
                        ..default()
                    },
                    BackgroundColor(Color::srgb(0.65, 0.65, 0.65)),
                ))
                .with_children(|parent| {
                    // left vertical fill (content)
                    parent
                        .spawn((
                            Node {
                                width: percent(100),
                                flex_direction: FlexDirection::Column,
                                padding: UiRect::all(px(5)),
                                row_gap: px(5),
                                ..default()
                            },
                            BackgroundColor(Color::srgb(0.15, 0.15, 0.15)),
                            Visibility::Visible,
                        ))
                        .with_children(|parent| {
                            // text
                            parent.spawn((
                                Text::new("Text Example"),
                                TextFont {
                                    font: asset_server.load("fonts/FiraSans-Bold.ttf").into(),
                                    font_size: FontSize::Px(25.0),
                                    ..default()
                                },
                                // Because this is a distinct label widget and
                                // not button/list item text, this is necessary
                                // for accessibility to treat the text accordingly.
                                Label,
                            ));

                            #[cfg(feature = "bevy_ui_debug")]
                            {
                                // Debug overlay text
                                parent.spawn((
                                    Text::new("Press Space to toggle debug outlines."),
                                    TextFont {
                                        font: asset_server.load("fonts/FiraSans-Bold.ttf").into(),
                                        ..default()
                                    },
                                    Label,
                                ));

                                parent.spawn((
                                    Text::new("V: toggle UI root's visibility"),
                                    TextFont {
                                        font: asset_server.load("fonts/FiraSans-Bold.ttf").into(),
                                        font_size: FontSize::Px(12.),
                                        ..default()
                                    },
                                    Label,
                                ));

                                parent.spawn((
                                    Text::new("S: toggle outlines for hidden nodes"),
                                    TextFont {
                                        font: asset_server.load("fonts/FiraSans-Bold.ttf").into(),
                                        font_size: FontSize::Px(12.),
                                        ..default()
                                    },
                                    Label,
                                ));
                                parent.spawn((
                                    Text::new("C: toggle outlines for clipped nodes"),
                                    TextFont {
                                        font: asset_server.load("fonts/FiraSans-Bold.ttf").into(),
                                        font_size: FontSize::Px(12.),
                                        ..default()
                                    },
                                    Label,
                                ));
                            }
                            #[cfg(not(feature = "bevy_ui_debug"))]
                            parent.spawn((
                                Text::new("Try enabling feature \"bevy_ui_debug\"."),
                                TextFont {
                                    font: asset_server.load("fonts/FiraSans-Bold.ttf").into(),
                                    ..default()
                                },
                                Label,
                            ));
                        });
                });
            // right vertical fill
            parent
                .spawn(Node {
                    flex_direction: FlexDirection::Column,
                    justify_content: JustifyContent::Center,
                    align_items: AlignItems::Center,
                    width: px(200),
                    ..default()
                })
                .with_children(|parent| {
                    // Title
                    parent.spawn((
                        Text::new("Scrolling list"),
                        TextFont {
                            font: asset_server.load("fonts/FiraSans-Bold.ttf").into(),
                            font_size: FontSize::Px(21.),
                            ..default()
                        },
                        Label,
                    ));
                    // Scrolling list
                    parent
                        .spawn((
                            Node {
                                flex_direction: FlexDirection::Column,
                                align_self: AlignSelf::Stretch,
                                height: percent(50),
                                overflow: Overflow::scroll_y(),
                                ..default()
                            },
                            BackgroundColor(Color::srgb(0.10, 0.10, 0.10)),
                        ))
                        .with_children(|parent| {
                            parent
                                .spawn((
                                    Node {
                                        flex_direction: FlexDirection::Column,
                                        ..Default::default()
                                    },
                                    BackgroundGradient::from(LinearGradient::to_bottom(vec![
                                        ColorStop::auto(NAVY),
                                        ColorStop::auto(Color::BLACK),
                                    ])),
                                    Pickable {
                                        should_block_lower: false,
                                        ..Default::default()
                                    },
                                ))
                                .with_children(|parent| {
                                    // List items
                                    for i in 0..25 {
                                        parent
                                            .spawn((
                                                Text(format!("Item {i}")),
                                                TextFont {
                                                    font: asset_server
                                                        .load("fonts/FiraSans-Bold.ttf")
                                                        .into(),
                                                    ..default()
                                                },
                                                Label,
                                                AccessibilityNode(Accessible::new(Role::ListItem)),
                                            ))
                                            .insert(Pickable {
                                                should_block_lower: false,
                                                ..default()
                                            });
                                    }
                                });
                        });
                });

            parent
                .spawn(Node {
                    left: px(210),
                    bottom: px(10),
                    position_type: PositionType::Absolute,
                    ..default()
                })
                .with_children(|parent| {
                    parent
                        .spawn((
                            Node {
                                width: px(200),
                                height: px(200),
                                border: UiRect::all(px(20)),
                                flex_direction: FlexDirection::Column,
                                justify_content: JustifyContent::Center,
                                ..default()
                            },
                            BorderColor::all(LIME),
                            BackgroundColor(Color::srgb(0.8, 0.8, 1.)),
                        ))
                        .with_children(|parent| {
                            parent.spawn((
                                ImageNode::new(asset_server.load("branding/bevy_logo_light.png")),
                                // Uses the transform to rotate the logo image by 45 degrees
                                Node {
                                    border_radius: BorderRadius::all(px(10)),
                                    ..Default::default()
                                },
                                UiTransform {
                                    rotation: Rot2::radians(0.25 * PI),
                                    ..Default::default()
                                },
                                Outline {
                                    width: px(2),
                                    offset: px(4),
                                    color: DARK_GRAY.into(),
                                },
                            ));
                        });
                });

            let shadow_style = ShadowStyle {
                color: Color::BLACK.with_alpha(0.5),
                blur_radius: px(2),
                x_offset: px(10),
                y_offset: px(10),
                ..default()
            };

            // render order test: reddest in the back, whitest in the front (flex center)
            parent
                .spawn(Node {
                    width: percent(100),
                    height: percent(100),
                    position_type: PositionType::Absolute,
                    align_items: AlignItems::Center,
                    justify_content: JustifyContent::Center,
                    ..default()
                })
                .insert(Pickable::IGNORE)
                .with_children(|parent| {
                    parent
                        .spawn((
                            Node {
                                width: px(100),
                                height: px(100),
                                ..default()
                            },
                            BackgroundColor(Color::srgb(1.0, 0.0, 0.)),
                            BoxShadow::from(shadow_style),
                        ))
                        .with_children(|parent| {
                            parent.spawn((
                                Node {
                                    // Take the size of the parent node.
                                    width: percent(100),
                                    height: percent(100),
                                    position_type: PositionType::Absolute,
                                    left: px(20),
                                    bottom: px(20),
                                    ..default()
                                },
                                BackgroundColor(Color::srgb(1.0, 0.3, 0.3)),
                                BoxShadow::from(shadow_style),
                            ));
                            parent.spawn((
                                Node {
                                    width: percent(100),
                                    height: percent(100),
                                    position_type: PositionType::Absolute,
                                    left: px(40),
                                    bottom: px(40),
                                    ..default()
                                },
                                BackgroundColor(Color::srgb(1.0, 0.5, 0.5)),
                                BoxShadow::from(shadow_style),
                            ));
                            parent.spawn((
                                Node {
                                    width: percent(100),
                                    height: percent(100),
                                    position_type: PositionType::Absolute,
                                    left: px(60),
                                    bottom: px(60),
                                    ..default()
                                },
                                BackgroundColor(Color::srgb(0.0, 0.7, 0.7)),
                                BoxShadow::from(shadow_style),
                            ));
                            // alpha test
                            parent.spawn((
                                Node {
                                    width: percent(100),
                                    height: percent(100),
                                    position_type: PositionType::Absolute,
                                    left: px(80),
                                    bottom: px(80),
                                    ..default()
                                },
                                BackgroundColor(Color::srgba(1.0, 0.9, 0.9, 0.4)),
                                BoxShadow::from(ShadowStyle {
                                    color: Color::BLACK.with_alpha(0.3),
                                    ..shadow_style
                                }),
                            ));
                        });
                });
            // bevy logo (flex center)
            parent
                .spawn(Node {
                    width: percent(100),
                    position_type: PositionType::Absolute,
                    justify_content: JustifyContent::Center,
                    align_items: AlignItems::FlexStart,
                    ..default()
                })
                .with_children(|parent| {
                    // bevy logo (image)
                    parent
                        .spawn((
                            ImageNode::new(asset_server.load("branding/bevy_logo_dark_big.png"))
                                .with_mode(NodeImageMode::Stretch),
                            Node {
                                width: px(500),
                                height: px(125),
                                margin: UiRect::top(vmin(5)),
                                ..default()
                            },
                        ))
                        .with_children(|parent| {
                            // alt text
                            // This UI node takes up no space in the layout and the `Text` component is used by the accessibility module
                            // and is not rendered.
                            parent.spawn((
                                Node {
                                    display: Display::None,
                                    ..default()
                                },
                                Text::new("Bevy logo"),
                            ));
                        });
                });

            // four bevy icons demonstrating image flipping
            parent
                .spawn(Node {
                    width: percent(100),
                    height: percent(100),
                    position_type: PositionType::Absolute,
                    justify_content: JustifyContent::Center,
                    align_items: AlignItems::FlexEnd,
                    column_gap: px(10),
                    padding: UiRect::all(px(10)),
                    ..default()
                })
                .insert(Pickable::IGNORE)
                .with_children(|parent| {
                    for (flip_x, flip_y) in
                        [(false, false), (false, true), (true, true), (true, false)]
                    {
                        parent.spawn((
                            ImageNode {
                                image: asset_server.load("branding/icon.png"),
                                flip_x,
                                flip_y,
                                ..default()
                            },
                            Node {
                                // The height will be chosen automatically to preserve the image's aspect ratio
                                width: px(75),
                                ..default()
                            },
                        ));
                    }
                });
        });
}

Trait Implementations

impl AsAssetId for ImageNode

type Asset = Image

The underlying asset type.

fn as_asset_id(&self) -> AssetId<<ImageNode as AsAssetId>::Asset>

Retrieves the asset id from this component.

impl Clone for ImageNode

fn clone(&self) -> ImageNode

Returns a duplicate of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl Component for ImageNode

where ImageNode: Send + Sync + 'static,

Required Components: Node, ImageNodeSize.

A component’s Required Components are inserted whenever it is inserted. Note that this will also insert the required components of the required components, recursively, in depth-first order.

const STORAGE_TYPE: StorageType = bevy_ecs::component::StorageType::Table

A constant indicating the storage type used for this component.

type Mutability = Mutable

A marker type to assist Bevy with determining if this component is mutable, or immutable. Mutable components will have Component<Mutability = Mutable>, while immutable components will instead have Component<Mutability = Immutable>.

fn register_required_components( _requiree: ComponentId, required_components: &mut RequiredComponentsRegistrator<'_, '_>, )

Registers required components.

fn clone_behavior() -> ComponentCloneBehavior

Called when registering this component, allowing to override clone function (or disable cloning altogether) for this component.

fn relationship_accessor() -> Option<ComponentRelationshipAccessor<ImageNode>>

Returns ComponentRelationshipAccessor required for working with relationships in dynamic contexts.

fn on_add() -> Option<for<'w> fn(DeferredWorld<'w>, HookContext)>

Gets the on_add ComponentHook for this Component if one is defined.

fn on_insert() -> Option<for<'w> fn(DeferredWorld<'w>, HookContext)>

Gets the on_insert ComponentHook for this Component if one is defined.

fn on_discard() -> Option<for<'w> fn(DeferredWorld<'w>, HookContext)>

Gets the on_discard ComponentHook for this Component if one is defined.

fn on_remove() -> Option<for<'w> fn(DeferredWorld<'w>, HookContext)>

Gets the on_remove ComponentHook for this Component if one is defined.

fn on_despawn() -> Option<for<'w> fn(DeferredWorld<'w>, HookContext)>

Gets the on_despawn ComponentHook for this Component if one is defined.

fn map_entities<E>(_this: &mut Self, _mapper: &mut E)

where E: EntityMapper,

Maps the entities on this component using the given EntityMapper. This is used to remap entities in contexts like scenes and entity cloning. When deriving Component, this is populated by annotating fields containing entities with #[entities]

impl Debug for ImageNode

fn fmt(&self, f: &mut Formatter<'_>) -> Result<(), Error>

Formats the value using the given formatter.

impl Default for ImageNode

fn default() -> ImageNode

A transparent 1x1 image with a solid white tint.

Warning

This will be invisible by default. To set this to a visible image, you need to set the texture field to a valid image handle, or use Handle<Image>’s default 1x1 solid white texture (as is done in ImageNode::solid_color).

impl From<Handle<Image>> for ImageNode

fn from(texture: Handle<Image>) -> ImageNode

Converts to this type from the input type.

impl FromArg for ImageNode

type This<'from_arg> = ImageNode

The type to convert into.

fn from_arg(arg: Arg<'_>) -> Result<<ImageNode as FromArg>::This<'_>, ArgError>

Creates an item from an argument.

impl FromReflect for ImageNode

fn from_reflect(reflect: &(dyn PartialReflect + 'static)) -> Option<ImageNode>

Constructs a concrete instance of Self from a reflected value.

fn take_from_reflect( reflect: Box<dyn PartialReflect>, ) -> Result<Self, Box<dyn PartialReflect>>

Attempts to downcast the given value to Self using, constructing the value using from_reflect if that fails.

impl FromTemplate for ImageNode

type Template = ImageNodeTemplate

The Template for this type.

impl GetOwnership for ImageNode

fn ownership() -> Ownership

Returns the ownership of Self.

impl GetTypeRegistration for ImageNode

fn get_type_registration() -> TypeRegistration

Returns the default TypeRegistration for this type.

fn register_type_dependencies(registry: &mut TypeRegistry)

Registers other types needed by this type.

impl IntoReturn for ImageNode

fn into_return<'into_return>(self) -> Return<'into_return>

where ImageNode: 'into_return,

Converts Self into a Return value.

impl PartialReflect for ImageNode

fn get_represented_type_info(&self) -> Option<&'static TypeInfo>

Returns the TypeInfo of the type represented by this value.

fn try_apply( &mut self, value: &(dyn PartialReflect + 'static), ) -> Result<(), ApplyError>

Tries to apply a reflected value to this value.

fn reflect_kind(&self) -> ReflectKind

Returns a zero-sized enumeration of “kinds” of type.

fn reflect_ref(&self) -> ReflectRef<'_>

Returns an immutable enumeration of “kinds” of type.

fn reflect_mut(&mut self) -> ReflectMut<'_>

Returns a mutable enumeration of “kinds” of type.

fn reflect_owned(self: Box<ImageNode>) -> ReflectOwned

Returns an owned enumeration of “kinds” of type.

fn try_into_reflect( self: Box<ImageNode>, ) -> Result<Box<dyn Reflect>, Box<dyn PartialReflect>>

Attempts to cast this type to a boxed, fully-reflected value.

fn try_as_reflect(&self) -> Option<&(dyn Reflect + 'static)>

Attempts to cast this type to a fully-reflected value.

fn try_as_reflect_mut(&mut self) -> Option<&mut (dyn Reflect + 'static)>

Attempts to cast this type to a mutable, fully-reflected value.

fn into_partial_reflect(self: Box<ImageNode>) -> Box<dyn PartialReflect>

Casts this type to a boxed, reflected value.

fn as_partial_reflect(&self) -> &(dyn PartialReflect + 'static)

Casts this type to a reflected value.

fn as_partial_reflect_mut(&mut self) -> &mut (dyn PartialReflect + 'static)

Casts this type to a mutable, reflected value.

fn reflect_partial_eq( &self, value: &(dyn PartialReflect + 'static), ) -> Option<bool>

Returns a “partial equality” comparison result.

fn reflect_partial_cmp( &self, value: &(dyn PartialReflect + 'static), ) -> Option<Ordering>

Returns a “partial comparison” result.

fn debug(&self, f: &mut Formatter<'_>) -> Result<(), Error>

Debug formatter for the value.

fn reflect_clone(&self) -> Result<Box<dyn Reflect>, ReflectCloneError>

Attempts to clone Self using reflection.

fn apply(&mut self, value: &(dyn PartialReflect + 'static))

Applies a reflected value to this value.

fn to_dynamic(&self) -> Box<dyn PartialReflect>

Converts this reflected value into its dynamic representation based on its kind.

fn reflect_clone_and_take<T>(&self) -> Result<T, ReflectCloneError>

where T: 'static, Self: Sized + TypePath,

For a type implementing PartialReflect, combines reflect_clone and take in a useful fashion, automatically constructing an appropriate ReflectCloneError if the downcast fails.

fn reflect_hash(&self) -> Option<u64>

Returns a hash of the value (which includes the type).

fn is_dynamic(&self) -> bool

Indicates whether or not this type is a dynamic type.

impl Reflect for ImageNode

fn into_any(self: Box<ImageNode>) -> Box<dyn Any>

Returns the value as a Box<dyn Any>.

fn as_any(&self) -> &(dyn Any + 'static)

Returns the value as a &dyn Any.

fn as_any_mut(&mut self) -> &mut (dyn Any + 'static)

Returns the value as a &mut dyn Any.

fn into_reflect(self: Box<ImageNode>) -> Box<dyn Reflect>

Casts this type to a boxed, fully-reflected value.

fn as_reflect(&self) -> &(dyn Reflect + 'static)

Casts this type to a fully-reflected value.

fn as_reflect_mut(&mut self) -> &mut (dyn Reflect + 'static)

Casts this type to a mutable, fully-reflected value.

fn set(&mut self, value: Box<dyn Reflect>) -> Result<(), Box<dyn Reflect>>

Performs a type-checked assignment of a reflected value to this value.

impl Struct for ImageNode

fn field(&self, name: &str) -> Option<&(dyn PartialReflect + 'static)>

Gets a reference to the value of the field named name as a &dyn PartialReflect.

fn field_mut( &mut self, name: &str, ) -> Option<&mut (dyn PartialReflect + 'static)>

Gets a mutable reference to the value of the field named name as a &mut dyn PartialReflect.

fn field_at(&self, index: usize) -> Option<&(dyn PartialReflect + 'static)>

Gets a reference to the value of the field with index index as a &dyn PartialReflect.

fn field_at_mut( &mut self, index: usize, ) -> Option<&mut (dyn PartialReflect + 'static)>

Gets a mutable reference to the value of the field with index index as a &mut dyn PartialReflect.

fn name_at(&self, index: usize) -> Option<&str>

Gets the name of the field with index index.

fn index_of_name(&self, name: &str) -> Option<usize>

Gets the index of the field with the given name.

fn field_len(&self) -> usize

Returns the number of fields in the struct.

fn iter_fields(&self) -> FieldIter<'_>

Returns an iterator over the values of the reflectable fields for this struct.

fn to_dynamic_struct(&self) -> DynamicStruct

Creates a new DynamicStruct from this struct.

fn get_represented_struct_info(&self) -> Option<&'static StructInfo>

Will return None if TypeInfo is not available.

impl TypePath for ImageNode

fn type_path() -> &'static str

Returns the fully qualified path of the underlying type.

fn short_type_path() -> &'static str

Returns a short, pretty-print enabled path to the type.

fn type_ident() -> Option<&'static str>

Returns the name of the type, or None if it is anonymous.

fn crate_name() -> Option<&'static str>

Returns the name of the crate the type is in, or None if it is anonymous.

fn module_path() -> Option<&'static str>

Returns the path to the module the type is in, or None if it is anonymous.

impl Typed for ImageNode

fn type_info() -> &'static TypeInfo

Returns the compile-time info for the underlying type.

impl Unpin for ImageNode

where [()]: for<'a> SpecializeFromTemplate,