[2D][SpriteSheet][Animation] Changing sprite animations with different sprite sheets

[The-DevBlog]

I am creating a 2d top down RPG style game.

Currently, I have one static PNG image used for the hero at the idle position:

I am using an enum with the four directions (left, right, up & down) to track which way the player is currently facing. This should help with determining which animation/spritesheet to play.

When I move right, I want the 'run-right' spritesheet to run, the 'run-left' sheet when I move left, and similarly the up and down spritesheets.

Here is my code compiled into one file:

#[derive(Component, Deref, DerefMut)]
struct AnimationTimer(Timer);

#[derive(Component)]
struct Player;

#[derive(Component)]
struct Speed(f32);

#[derive(Component)]
struct IsMoving(bool);

#[derive(Component, Copy, Clone, Eq, PartialEq)]
enum Direction {
    Left,
    Right,
    Up,
    Down,
}

fn spawn_player(
    mut commands: Commands,
    assets: Res<AssetServer>,
) {
    let sprite = SpriteBundle {
        sprite: Sprite {
            custom_size: Some(Vec2::new(73.5, 69.0)),
            ..default()
        },
        texture: assets.load("hero/idle.png"),
        ..default()
    };

    commands
        .spawn_bundle(sprite)
        .insert(Player)
        .insert(Speed(150.0))
        .insert(Direction::Down)
        .insert(IsMoving(false));
}

pub fn movement<T: Component>(
    keys: Res<Input<KeyCode>>,
    time: Res<Time>,
    mut query: Query<
        (
            &mut Transform,
            &Speed,
            &mut Direction,
            &mut IsMoving,
        ),
        With<T>,
    >,
) {
    for (mut transform, speed, sprint, mut direction, mut is_moving) in
        query.iter_mut()
    {
        let mut new_pos = Vec3::new(0.0, 0.0, 0.0);
        let mut tmp_sprint = 1.0;
        is_sprinting.0 = false;
        is_moving.0 = false;

        // left
        if keys.pressed(KeyCode::A) {
            new_pos.x = -1.0;
            *direction = Direction::Left;
            is_moving.0 = true;
        }
        // right
        else if keys.pressed(KeyCode::D) {
            new_pos.x = 1.0;
            *direction = Direction::Right;
            is_moving.0 = true;
        }
        // up
        else if keys.pressed(KeyCode::W) {
            new_pos.y = 1.0;
            *direction = Direction::Up;
            is_moving.0 = true;
        }
        // down
        else if keys.pressed(KeyCode::S) {
            new_pos.y = -1.0;
            *direction = Direction::Down;
            is_moving.0 = true;
        }

        transform.translation += new_pos * speed.0 * time.delta_seconds();
    }
}

// taken from the Bevy Github 2d spritesheet example
// https://github.com/bevyengine/bevy/blob/main/examples/2d/sprite_sheet.rs
pub fn animate_sprite(
    time: Res<Time>,
    texture_atlases: Res<Assets<TextureAtlas>>,
    mut query: Query<(
        &mut AnimationTimer,
        &mut TextureAtlasSprite,
        &Handle<TextureAtlas>,
    )>,
) {
    for (mut timer, mut sprite, texture_atlas_handle) in query.iter_mut() {
        timer.tick(time.delta());
        if timer.just_finished() {
            let texture_atlas = texture_atlases.get(texture_atlas_handle).unwrap();
            sprite.index = (sprite.index + 1) % texture_atlas.textures.len();
        }
    }
}

Here is my attempt at implementing a sprite sheet animation when the player runs to the run. As soon as I move right, it basically paints the first frame of the animation behind the static idle image like this:

fn change_animation(
    mut commands: Commands,
    mut texture_atlases: ResMut<Assets<TextureAtlas>>,
    assets: Res<AssetServer>,
    player_query: Query<(Entity, &IsMoving, &Direction), With<Player>>,
) {
    for (entity, is_moving, direction) in player_query.iter() {
        if is_moving.0 {
            match direction {
                Direction::Right => {
                    let image = assets.load("hero/run_x.png");
                    let atlas = TextureAtlas::from_grid(image, Vec2::new(49.0, 46.0), 4, 1);
                    let handle = texture_atlases.add(atlas);

                    let sprite_sheet = SpriteSheetBundle {
                        texture_atlas: handle,
                        transform: Transform::from_scale(Vec3::splat(1.5)),
                        ..default()
                    };

                    let child = commands.spawn_bundle(sprite_sheet).id();

                    commands
                        .entity(entity)
                        .push_children(&[child])
                        .insert(AnimationTimer(Timer::from_seconds(0.1, true)));
                }
                _ => {}
            }
        }
    }
}

[hymm]

you probably want to modify the components on the Player entity directly rather than spawning as a child.

Linked is the code I've used for sprite sheet animation in my simple game.
https://github.com/hymm/bevy_test_game/blob/main/src/animation.rs#L59-L60

[The-DevBlog]

So basically you are saying to save these handles instead of loading them every time?

I did add the system. This system is running and previously I was changing the sprite index instead of changing the image handle and that was working fine.

[The-DevBlog]

But no the image doesnt appear even after I move left for an extended period of time.

Also, thanks for working through this with me!

[hymm]

So basically you are saying to save these handles instead of loading them every time?

Yeah, since you're not saving them anywhere, bevy will have to go to the file system every time. Handles are ref counted so when you switch from left to right. The left image will be dropped and cleaned up.

Another sanity check, are you running in release or have optimizations enabled in debug mode? Assets can be very slow to load without any optimizations.

[The-DevBlog]

Makes sense. I'll try update the logic with that in mind after work and I'll report back if I run into anything else (if you don't mind).

My only dependency is bevy = "0.7"

[The-DevBlog]

I'm going to load them all in the start and then attempt to switch them when moving L,R, U & D.