How to add a background image to 2d game in Bevy

Question

How can I add a background image to my 2d game? The code is here:

In assets/textures I have a file called pitch.png that I would like to serve as the background for my window. I can't find any info on how to do this.

Thanks!

Could you use it as a sprite with 1 frame, and then set its z value to the back? — Will, Feb 14 '21 at 23:01
Maybe? That seems a bit hacky though - I was hoping there was a "standard" way to set an image as the background.....Nonetheless, thank you for the idea! — mthelm85, Feb 15 '21 at 00:02

frankenapps · Answer 1 · 2021-02-16T10:13:22.717

You do not need to set the z-translation. Bevy will render the last added item on top. So if you want to use the image as a background simply spawn the corresponding sprite first like that:

fn setup(
    commands: &mut Commands,
    asset_server: Res<AssetServer>,
    mut materials: ResMut<Assets<ColorMaterial>>,
) {
    let background_image: Handle<Texture> = asset_server.load("textures/pitch.png");
    let texture_handle = asset_server.load("sprites/sprite_max.png");
    commands
        .spawn(Camera2dBundle::default())
        .spawn(SpriteBundle {
            material: materials.add(background_image.into()),
            ..Default::default()
        })
        .spawn(SpriteBundle {
            material: materials.add(texture_handle.into()),
            ..Default::default()
        })
        .with(Max);
}

If you want the image to cover the whole screen initially you will have to scale it accordingly, for example like so:

use bevy::prelude::*;

fn main() {
    App::build()
        .add_resource(WindowDescriptor {
            title: "Game".to_string(),
            width: 900.0,
            height: 900.0,
            vsync: true,
            resizable: false,
            ..Default::default()
        })
        .add_system(move_max.system())
        .add_plugins(DefaultPlugins)
        .add_startup_system(setup.system())
        .run();
}

fn setup(
    commands: &mut Commands,
    asset_server: Res<AssetServer>,
    mut materials: ResMut<Assets<ColorMaterial>>,
) {
    let background_image: Handle<Texture> = asset_server.load("textures/pitch.png");
    let texture_handle = asset_server.load("sprites/sprite_max.png");
    commands
        .spawn(Camera2dBundle::default())
        .spawn(SpriteBundle {
            material: materials.add(background_image.into()),
            transform: Transform::from_scale(Vec3::new(1.5, 1.5, 0.0)),
            ..Default::default()
        })
        .spawn(SpriteBundle {
            material: materials.add(texture_handle.into()),
            ..Default::default()
        })
        .with(Max);
}

struct Max;

fn move_max(
    keyboard_input: Res<Input<KeyCode>>,
    mut max_positions: Query<&mut Transform, With<Max>>,
) {
    for mut transform in max_positions.iter_mut() {
        if keyboard_input.pressed(KeyCode::Left) {
            transform.translation.x -= 1.0;
        }
        if keyboard_input.pressed(KeyCode::Right) {
            transform.translation.x += 1.0;
        }
        if keyboard_input.pressed(KeyCode::Down) {
            transform.translation.y -= 1.0;
        }
        if keyboard_input.pressed(KeyCode::Up) {
            transform.translation.y += 1.0;
        }
    }
}

How to add a background image to 2d game in Bevy

1 Answers1