Clearing the screen every frame

[edwardloveall]

I am trying to move a box around on the screen. Every Update I move the component's location, then I draw a square on that location. Since I added insert_resource(ClearColor(Color::WHITE)) I expected it to draw "over" each frame with White, but that's not what's happening.

Here's a stripped down, runable version of what I have:

use bevy::{prelude::*, sprite::MaterialMesh2dBundle};

#[derive(Component)]
struct Location(Vec2);

fn setup(mut commands: Commands) {
    commands.spawn(Camera2dBundle::default());
    commands.spawn(Location(Vec2 { x: 0., y: 0. }));
}

fn draw(
    mut commands: Commands,
    mut meshes: ResMut<Assets<Mesh>>,
    mut materials: ResMut<Assets<ColorMaterial>>,
    mut query: Query<&mut Location>,
) {
    for mut location in &mut query {
        location.0.x += 10.;
        commands.spawn(MaterialMesh2dBundle {
            mesh: meshes
                .add(Mesh::from(shape::Quad::new(Vec2::splat(5.))))
                .into(),
            material: materials.add(ColorMaterial::from(Color::TEAL)),
            transform: Transform {
                translation: Vec3::from((location.0, 0.)),
                ..default()
            },
            ..default()
        });
    }
}

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .insert_resource(ClearColor(Color::WHITE))
        .add_systems(Startup, setup)
        .add_systems(Update, draw)
        .run();
}

It draws a 5x5 square every frame (loop? not sure if that's the right word) moves it by 10 to the right, then draw's it again.

Here's what is looks like after a bunch of frames:

How can I get the previously drawn squares to disappear each redraw so I can make it look like a single square is moving on the screen?

[nezuo]

This code spawns multiple MaterialMesh2dBundles instead of moving one. These entities will continue to render every frame after the screen has been cleared.

[Pieresqi]

Hi, you are spawning new entity with mesh and material every loop in the for loop - notice the commands.spawn- and entities unless removed are persistent during runtime. So from the draw system remove the whole commands.spawn.

And then you need to add the MaterialMesh2Bundle to the setup system. You are already spawning new entity there so add the bundle to that location entity.

Also your Location component is redundant because Transform and GlobalTransform, which are added by MaterialMesh2Bundle, are Bevy's default position components.

[edwardloveall]

Thanks for the advice! I took it and ended up using SpriteBundle instead of MaterialMesh2Bundle because it seems simpler. Here's where I ended up:

use bevy::prelude::*;

#[derive(Component)]
struct Worker;

fn setup(mut commands: Commands) {
    commands.spawn(Camera2dBundle::default());
    commands.spawn((
        SpriteBundle {
            sprite: Sprite {
                color: Color::TEAL,
                custom_size: Some(Vec2::new(10., 10.)),
                ..default()
            },
            transform: Transform::from_translation(Vec3::ZERO),
            ..default()
        },
        Worker,
    ));
}

fn update(mut query: Query<&mut Transform, With<Worker>>) {
    let mut location = query.single_mut();
    location.translation.x += 2.;
}

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .insert_resource(ClearColor(Color::WHITE))
        .add_systems(Startup, setup)
        .add_systems(Update, update)
        .run();
}