Updated the 2D examples to make them uniform (#17237)

# Objective

Make the examples look more uniform and more polished.
following the issue #17167

## Solution

- [x] Added a minimal UI explaining how to interact with the examples
only when needed.
- [x] Used the same notation for interactions ex : "Up Arrow: Move
Forward \nLeft / Right Arrow: Turn"
- [x] Set the color to
[GRAY](#17237 (comment))
when it's not visible enough
- [x] Changed some colors to be easy on the eyes
- [x] removed the //camera comment
- [x] Unified the use of capital letters in the examples.
- [x] Simplified the mesh2d_arc offset calculations.

...

---------

Co-authored-by: Alice Cecile <[email protected]>
Co-authored-by: Rob Parrett <[email protected]>

Author: 3 people

examples/2d/2d_viewport_to_world.rs

@@ -31,4 +31,15 @@ fn draw_cursor(
 
 fn setup(mut commands: Commands) {
     commands.spawn(Camera2d);
+
+    // Create a minimal UI explaining how to interact with the example
+    commands.spawn((
+        Text::new("Move the mouse to see the circle follow your cursor."),
+        Node {
+            position_type: PositionType::Absolute,
+            top: Val::Px(12.0),
+            left: Val::Px(12.0),
+            ..default()
+        },
+    ));
 }

examples/2d/bloom_2d.rs

@@ -63,7 +63,7 @@ fn setup(
         Text::default(),
         Node {
             position_type: PositionType::Absolute,
-            bottom: Val::Px(12.0),
+            top: Val::Px(12.0),
             left: Val::Px(12.0),
             ..default()
         },

examples/2d/bounding_2d.rs

@@ -201,6 +201,7 @@ const OFFSET_Y: f32 = 75.;
 
 fn setup(mut commands: Commands) {
     commands.spawn(Camera2d);
+
     commands.spawn((
         Transform::from_xyz(-OFFSET_X, OFFSET_Y, 0.),
         Shape::Circle(Circle::new(45.)),
@@ -259,7 +260,7 @@ fn setup(mut commands: Commands) {
         Text::default(),
         Node {
             position_type: PositionType::Absolute,
-            bottom: Val::Px(12.0),
+            top: Val::Px(12.0),
             left: Val::Px(12.0),
             ..default()
         },

examples/2d/cpu_draw.rs

@@ -38,10 +38,9 @@ struct MyProcGenImage(Handle<Image>);
 struct SeededRng(ChaCha8Rng);
 
 fn setup(mut commands: Commands, mut images: ResMut<Assets<Image>>) {
-    // spawn a camera
     commands.spawn(Camera2d);
 
-    // create an image that we are going to draw into
+    // Create an image that we are going to draw into
     let mut image = Image::new_fill(
         // 2D image of size 256x256
         Extent3d {
@@ -57,31 +56,31 @@ fn setup(mut commands: Commands, mut images: ResMut<Assets<Image>>) {
         RenderAssetUsages::MAIN_WORLD | RenderAssetUsages::RENDER_WORLD,
     );
 
-    // to make it extra fancy, we can set the Alpha of each pixel
-    // so that it fades out in a circular fashion
+    // To make it extra fancy, we can set the Alpha of each pixel,
+    // so that it fades out in a circular fashion.
     for y in 0..IMAGE_HEIGHT {
         for x in 0..IMAGE_WIDTH {
             let center = Vec2::new(IMAGE_WIDTH as f32 / 2.0, IMAGE_HEIGHT as f32 / 2.0);
             let max_radius = IMAGE_HEIGHT.min(IMAGE_WIDTH) as f32 / 2.0;
             let r = Vec2::new(x as f32, y as f32).distance(center);
             let a = 1.0 - (r / max_radius).clamp(0.0, 1.0);
 
-            // here we will set the A value by accessing the raw data bytes
+            // Here we will set the A value by accessing the raw data bytes.
             // (it is the 4th byte of each pixel, as per our `TextureFormat`)
 
-            // find our pixel by its coordinates
+            // Find our pixel by its coordinates
             let pixel_bytes = image.pixel_bytes_mut(UVec3::new(x, y, 0)).unwrap();
-            // convert our f32 to u8
+            // Convert our f32 to u8
             pixel_bytes[3] = (a * u8::MAX as f32) as u8;
         }
     }
 
-    // add it to Bevy's assets, so it can be used for rendering
+    // Add it to Bevy's assets, so it can be used for rendering
     // this will give us a handle we can use
     // (to display it in a sprite, or as part of UI, etc.)
     let handle = images.add(image);
 
-    // create a sprite entity using our image
+    // Create a sprite entity using our image
     commands.spawn(Sprite::from_image(handle.clone()));
     commands.insert_resource(MyProcGenImage(handle));
 
@@ -95,7 +94,7 @@ fn setup(mut commands: Commands, mut images: ResMut<Assets<Image>>) {
 fn draw(
     my_handle: Res<MyProcGenImage>,
     mut images: ResMut<Assets<Image>>,
-    // used to keep track of where we are
+    // Used to keep track of where we are
     mut i: Local<u32>,
     mut draw_color: Local<Color>,
     mut seeded_rng: ResMut<SeededRng>,

examples/2d/custom_gltf_vertex_attribute.rs

@@ -63,7 +63,6 @@ fn setup(
         Transform::from_scale(150.0 * Vec3::ONE),
     ));
 
-    // Add a camera
     commands.spawn(Camera2d);
 }
 

examples/2d/mesh2d.rs

@@ -15,6 +15,7 @@ fn setup(
     mut materials: ResMut<Assets<ColorMaterial>>,
 ) {
     commands.spawn(Camera2d);
+
     commands.spawn((
         Mesh2d(meshes.add(Rectangle::default())),
         MeshMaterial2d(materials.add(Color::from(PURPLE))),

examples/2d/mesh2d_arcs.rs

@@ -5,7 +5,7 @@
 use std::f32::consts::FRAC_PI_2;
 
 use bevy::{
-    color::palettes::css::{BLUE, DARK_SLATE_GREY, RED},
+    color::palettes::css::{BLUE, GRAY, RED},
     math::{
         bounding::{Bounded2d, BoundingVolume},
         Isometry2d,
@@ -42,16 +42,14 @@ fn setup(
     commands.spawn((
         Camera2d,
         Camera {
-            clear_color: ClearColorConfig::Custom(DARK_SLATE_GREY.into()),
+            clear_color: ClearColorConfig::Custom(GRAY.into()),
             ..default()
         },
     ));
 
-    const UPPER_Y: f32 = 50.0;
-    const LOWER_Y: f32 = -50.0;
-    const FIRST_X: f32 = -450.0;
-    const OFFSET: f32 = 100.0;
     const NUM_SLICES: i32 = 8;
+    const SPACING_X: f32 = 100.0;
+    const OFFSET_X: f32 = SPACING_X * (NUM_SLICES - 1) as f32 / 2.0;
 
     // This draws NUM_SLICES copies of the Bevy logo as circular sectors and segments,
     // with successively larger angles up to a complete circle.
@@ -70,7 +68,7 @@ fn setup(
             Mesh2d(meshes.add(sector_mesh)),
             MeshMaterial2d(material.clone()),
             Transform {
-                translation: Vec3::new(FIRST_X + OFFSET * i as f32, 2.0 * UPPER_Y, 0.0),
+                translation: Vec3::new(SPACING_X * i as f32 - OFFSET_X, 50.0, 0.0),
                 rotation: Quat::from_rotation_z(sector_angle),
                 ..default()
             },
@@ -94,7 +92,7 @@ fn setup(
             Mesh2d(meshes.add(segment_mesh)),
             MeshMaterial2d(material.clone()),
             Transform {
-                translation: Vec3::new(FIRST_X + OFFSET * i as f32, LOWER_Y, 0.0),
+                translation: Vec3::new(SPACING_X * i as f32 - OFFSET_X, -50.0, 0.0),
                 rotation: Quat::from_rotation_z(segment_angle),
                 ..default()
             },

examples/2d/mesh2d_manual.rs

@@ -115,7 +115,6 @@ fn star(
         Mesh2d(meshes.add(star)),
     ));
 
-    // Spawn the camera
     commands.spawn(Camera2d);
 }
 
@@ -126,7 +125,7 @@ pub struct ColoredMesh2d;
 /// Custom pipeline for 2d meshes with vertex colors
 #[derive(Resource)]
 pub struct ColoredMesh2dPipeline {
-    /// this pipeline wraps the standard [`Mesh2dPipeline`]
+    /// This pipeline wraps the standard [`Mesh2dPipeline`]
     mesh2d_pipeline: Mesh2dPipeline,
 }
 

examples/2d/mesh2d_vertex_color_texture.rs

@@ -32,7 +32,6 @@ fn setup(
 
     let mesh_handle = meshes.add(mesh);
 
-    // Spawn camera
     commands.spawn(Camera2d);
 
     // Spawn the quad with vertex colors

examples/2d/move_sprite.rs

@@ -12,16 +12,17 @@ fn main() {
 
 #[derive(Component)]
 enum Direction {
-    Up,
-    Down,
+    Left,
+    Right,
 }
 
 fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     commands.spawn(Camera2d);
+
     commands.spawn((
         Sprite::from_image(asset_server.load("branding/icon.png")),
-        Transform::from_xyz(100., 0., 0.),
-        Direction::Up,
+        Transform::from_xyz(0., 0., 0.),
+        Direction::Right,
     ));
 }
 
@@ -30,14 +31,14 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 fn sprite_movement(time: Res<Time>, mut sprite_position: Query<(&mut Direction, &mut Transform)>) {
     for (mut logo, mut transform) in &mut sprite_position {
         match *logo {
-            Direction::Up => transform.translation.y += 150. * time.delta_secs(),
-            Direction::Down => transform.translation.y -= 150. * time.delta_secs(),
+            Direction::Right => transform.translation.x += 150. * time.delta_secs(),
+            Direction::Left => transform.translation.x -= 150. * time.delta_secs(),
         }
 
-        if transform.translation.y > 200. {
-            *logo = Direction::Down;
-        } else if transform.translation.y < -200. {
-            *logo = Direction::Up;
+        if transform.translation.x > 200. {
+            *logo = Direction::Left;
+        } else if transform.translation.x < -200. {
+            *logo = Direction::Right;
         }
     }
 }

examples/2d/pixel_grid_snap.rs

@@ -1,6 +1,7 @@
 //! Shows how to create graphics that snap to the pixel grid by rendering to a texture in 2D
 
 use bevy::{
+    color::palettes::css::GRAY,
     prelude::*,
     render::{
         camera::RenderTarget,
@@ -50,18 +51,18 @@ struct OuterCamera;
 struct Rotate;
 
 fn setup_sprite(mut commands: Commands, asset_server: Res<AssetServer>) {
-    // the sample sprite that will be rendered to the pixel-perfect canvas
+    // The sample sprite that will be rendered to the pixel-perfect canvas
     commands.spawn((
         Sprite::from_image(asset_server.load("pixel/bevy_pixel_dark.png")),
-        Transform::from_xyz(-40., 20., 2.),
+        Transform::from_xyz(-45., 20., 2.),
         Rotate,
         PIXEL_PERFECT_LAYERS,
     ));
 
-    // the sample sprite that will be rendered to the high-res "outer world"
+    // The sample sprite that will be rendered to the high-res "outer world"
     commands.spawn((
         Sprite::from_image(asset_server.load("pixel/bevy_pixel_light.png")),
-        Transform::from_xyz(-40., -20., 2.),
+        Transform::from_xyz(-45., -20., 2.),
         Rotate,
         HIGH_RES_LAYERS,
     ));
@@ -76,7 +77,7 @@ fn setup_mesh(
     commands.spawn((
         Mesh2d(meshes.add(Capsule2d::default())),
         MeshMaterial2d(materials.add(Color::BLACK)),
-        Transform::from_xyz(40., 0., 2.).with_scale(Vec3::splat(32.)),
+        Transform::from_xyz(25., 0., 2.).with_scale(Vec3::splat(32.)),
         Rotate,
         PIXEL_PERFECT_LAYERS,
     ));
@@ -89,7 +90,7 @@ fn setup_camera(mut commands: Commands, mut images: ResMut<Assets<Image>>) {
         ..default()
     };
 
-    // this Image serves as a canvas representing the low-resolution game screen
+    // This Image serves as a canvas representing the low-resolution game screen
     let mut canvas = Image {
         texture_descriptor: TextureDescriptor {
             label: None,
@@ -106,29 +107,30 @@ fn setup_camera(mut commands: Commands, mut images: ResMut<Assets<Image>>) {
         ..default()
     };
 
-    // fill image.data with zeroes
+    // Fill image.data with zeroes
     canvas.resize(canvas_size);
 
     let image_handle = images.add(canvas);
 
-    // this camera renders whatever is on `PIXEL_PERFECT_LAYERS` to the canvas
+    // This camera renders whatever is on `PIXEL_PERFECT_LAYERS` to the canvas
     commands.spawn((
         Camera2d,
         Camera {
-            // render before the "main pass" camera
+            // Render before the "main pass" camera
             order: -1,
             target: RenderTarget::Image(image_handle.clone().into()),
+            clear_color: ClearColorConfig::Custom(GRAY.into()),
             ..default()
         },
         Msaa::Off,
         InGameCamera,
         PIXEL_PERFECT_LAYERS,
     ));
 
-    // spawn the canvas
+    // Spawn the canvas
     commands.spawn((Sprite::from_image(image_handle), Canvas, HIGH_RES_LAYERS));
 
-    // the "outer" camera renders whatever is on `HIGH_RES_LAYERS` to the screen.
+    // The "outer" camera renders whatever is on `HIGH_RES_LAYERS` to the screen.
     // here, the canvas and one of the sample sprites will be rendered by this camera
     commands.spawn((Camera2d, Msaa::Off, OuterCamera, HIGH_RES_LAYERS));
 }