Use a circle for the ball in Breakout

[shaderduck]

Objective

Fixes #4324

Solution

Used circle from shapes example in #3730

---

Changelog

Changed

Circle shape instead of square shape sprite for ball.
AABB collision unchanged.

[alice-i-cecile]

Nice work :) Some small suggestions for comments to help this example teach beginners the basic terminology.

[alice-i-cecile]

bors try

[bors]

try

Build succeeded:

• build-wasm (stable, ubuntu-latest)
• markdownlint
• ci
• build-wasm (nightly, ubuntu-latest)
• build (stable, ubuntu-latest)
• check-markdown-links
• build (stable, macos-latest)
• build (stable, windows-latest)
• build (nightly, ubuntu-latest)
• build-android
• check-unused-dependencies
• check-missing-examples-in-docs
• check-compiles
• check-doc
• miri
• run-examples

[Nilirad]

Is the z value in BALL_STARTING_POSITION (or at least the comment above the constant) still relevant now that we have a potential 2D Mesh/Sprite overlap, instead of a sprite/sprite overlap?

[alice-i-cecile]

Unsure 🤔 I haven't played with the mesh / sprite overlap rules.

[Nilirad]

I found out that the order in which sprites and 2D meshes are drawn is undefined, just like sprites, so the z layering should remain.

Example code

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

const PADDLE_SIZE: Vec3 = const_vec3!([120.0, 20.0, 0.0]);

const BALL_STARTING_POSITION: Vec3 = const_vec3!([0.0, -50.0, 1.0]);
const BALL_SIZE: Vec3 = const_vec3!([30.0, 30.0, 0.0]);

const PADDLE_COLOR: Color = Color::rgb(0.3, 0.3, 0.7);
const BALL_COLOR: Color = Color::rgb(1.0, 0.5, 0.5);

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_startup_system(setup)
        .run();
}

fn setup(
    mut commands: Commands,
    mut meshes: ResMut<Assets<Mesh>>,
    mut materials: ResMut<Assets<ColorMaterial>>,
) {
    // Camera
    commands.spawn_bundle(OrthographicCameraBundle::new_2d());

    // Paddle
    commands.spawn().insert_bundle(SpriteBundle {
        transform: Transform {
            translation: BALL_STARTING_POSITION,
            scale: PADDLE_SIZE,
            ..default()
        },
        sprite: Sprite {
            color: PADDLE_COLOR,
            ..default()
        },
        ..default()
    });

    // Ball
    commands.spawn().insert_bundle(MaterialMesh2dBundle {
        mesh: meshes.add(shape::Circle::default().into()).into(),
        material: materials.add(ColorMaterial::from(BALL_COLOR)),
        transform: Transform {
            scale: BALL_SIZE,
            translation: BALL_STARTING_POSITION,
            ..default()
        },
        ..default()
    });
}

So the only thing to do is to change the comment above BALL_STARTING_POSITION to something like:

// We set the z-value of the ball to 1 so it renders on top in the case of overlap.
const BALL_STARTING_POSITION: Vec3 = const_vec3!([0.0, -50.0, 1.0]);

[alice-i-cecile]

@shaderduck can you rebase this? This would be nice to merge in.

[alice-i-cecile]

Closing in favor of #5657 :) Thanks for getting this started!