colors.md

Colors

In the previous tutorials, we create a Mesh (such as Circle) and add it to both resource Assets and ColorMesh2dBundle in order to add a shape to our app. To add a color to a shape, we take a similar approach.

We create a Color and add it to both resource Assets and ColorMesh2dBundle, too. The differences are that the assets now is Assets<ColorMaterial> (instead of Assets<Mesh>) and the component we targeted in ColorMesh2dBundle is material (instead of mesh).

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

    commands.spawn(ColorMesh2dBundle {
        mesh: meshes.add(Circle::new(50.).into()).into(),
        material: materials.add(Color::hsl(210., 1., 0.8).into()),
        ..default()
    });
}

The full code is as follows:

use bevy::{
    app::{App, Startup},
    asset::Assets,
    core_pipeline::core_2d::Camera2dBundle,
    ecs::system::{Commands, ResMut},
    prelude::default,
    render::{
        color::Color,
        mesh::{shape::Circle, Mesh},
    },
    sprite::{ColorMaterial, ColorMesh2dBundle},
    DefaultPlugins,
};

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_systems(Startup, setup)
        .run();
}

fn setup(
    mut commands: Commands,
    mut meshes: ResMut<Assets<Mesh>>,
    mut materials: ResMut<Assets<ColorMaterial>>,
) {
    commands.spawn(Camera2dBundle::default());

    commands.spawn(ColorMesh2dBundle {
        mesh: meshes.add(Circle::new(50.).into()).into(),
        material: materials.add(Color::hsl(210., 1., 0.8).into()),
        ..default()
    });
}

Result:

We use Circle in the example. The method applies to other shapes.

➡️ Next: Textures

📘 Back: Table of contents