Use circle for breakout example (#5657)

# Objective

- Replace the square with a circle in the breakout example.
- Fixes #4324, adopted from #4682 by @shaderduck.

## Solution
- Uses the Mesh2D APIs to draw a circle. The collision still uses the AABB algorithm, but it seems to be working fine, and I haven't seen any odd looking cases.

examples/games/breakout.rs

@@ -3,6 +3,7 @@
 use bevy::{
     prelude::*,
     sprite::collide_aabb::{collide, Collision},
+    sprite::MaterialMesh2dBundle,
     time::FixedTimestep,
 };
 
@@ -171,7 +172,12 @@ struct Scoreboard {
 }
 
 // Add the game's entities to our world
-fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+fn setup(
+    mut commands: Commands,
+    mut meshes: ResMut<Assets<Mesh>>,
+    mut materials: ResMut<Assets<ColorMaterial>>,
+    asset_server: Res<AssetServer>,
+) {
     // Camera
     commands.spawn_bundle(Camera2dBundle::default());
 
@@ -203,16 +209,10 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     commands
         .spawn()
         .insert(Ball)
-        .insert_bundle(SpriteBundle {
+        .insert_bundle(MaterialMesh2dBundle {
-            transform: Transform {
+            mesh: meshes.add(shape::Circle::default().into()).into(),
-                scale: BALL_SIZE,
+            material: materials.add(ColorMaterial::from(BALL_COLOR)),
-                translation: BALL_STARTING_POSITION,
+            transform: Transform::from_translation(BALL_STARTING_POSITION).with_scale(BALL_SIZE),
-                ..default()
-            },
-            sprite: Sprite {
-                color: BALL_COLOR,
-                ..default()
-            },
             ..default()
         })
         .insert(Velocity(INITIAL_BALL_DIRECTION.normalize() * BALL_SPEED));