I'm on the fence with the text positioning

[Guelakais]

That's the corresponding method:

fn setup_window(
    mut materials: ResMut<Assets<ColorMaterial>>,
    mut meshes: ResMut<Assets<Mesh>>,
    mut commands: Commands,
    windows: Query<&Window>,
) {
    let window = windows.single();
    let window_width = window.unwrap().width();
    let rect_height = 30.0;

    commands
        .spawn((
            Node {
                align_items: AlignItems::Center,
                justify_content: JustifyContent::Center,
                width: Val::Percent(0.0),
                height: Val::Percent(90.0),
                ..default()
            },
            Mesh2d(meshes.add(Rectangle::new(window_width, rect_height))),
            MeshMaterial2d(materials.add(Color::Srgba(Srgba::GREEN))),
            Pickable::IGNORE,
        ))
        .with_children(|parent| {
            // Spawn three pill-shaped buttons
            Buttons::iter().for_each(|button_name| {
                parent.spawn((
                    Node {
                        width: Val::Px(0.0),
                        height: Val::Px(0.0),
                        align_items: AlignItems::Center,
                        justify_content: JustifyContent::Center,
                        margin: UiRect::horizontal(Val::Px(60.0)),
                        ..default()
                    },
                    children![(
                        BorderColor(Color::BLACK),
                        BorderRadius::MAX,
                        Mesh2d(meshes.add(Capsule2d::new(20.0, 60.))),
                        MeshMaterial2d(materials.add(Color::Srgba(Srgba::BLUE))),
                        Pickable::IGNORE,
                        Transform::from_translation(Vec3::new(0.0, 0.0, 1.0))
                            .with_rotation(Quat::from_rotation_z(std::f32::consts::FRAC_PI_2)),
                        Text::new("new!"),
                        TextLayout::new(JustifyText::Center, bevy::text::LineBreak::NoWrap),
                    )],
                    button_name,
                ));
            });
        });
}

Somehow I can't get the text to appear on the meshes, but somewhere in the field. Can anyone see what I'm missing?

[rparrett]

A couple important points:

• A single entity can not be both a Mesh2d and a Node. (Ditto Mesh2d and Text.) Generally, it's one entity per rendered-thing.
• It is not possible to use non-UI components like Mesh2d inside of a UI layout hierarchy.
• Transform is generally not useful on Node or Text. You can use it for rotation as you have, but it's a bit of a hack, and the element may not be laid out properly. It's the only way to get vertical text right now, so "it is what it is."

It looks like you want to make some buttons that are round rectangles? You want a hierarchy like this:

- Node, Name::new("Container")
  - Button, Node, BackgroundColor, BorderRadius
    - Text
  - Button, Node, BackgroundColor, BorderRadius
    - Text
  - Button, Node, BackgroundColor, BorderRadius
    - Text

See the button example.

[Guelakais]

This solves part of the problem:

use bevy::{
    DefaultPlugins,
    app::{App, Startup},
    asset::Assets,
    color::{Color, Srgba},
    core_pipeline::core_2d::Camera2d,
    ecs::{change_detection::ResMut, component::Component, prelude::Commands},
    math::{
        Quat, Vec3,
        prelude::{Capsule2d, Rectangle},
    },
    picking::Pickable,
    prelude::{
        AlignItems, BorderColor, BorderRadius, BoxShadowSamples, Button, ColorMaterial,
        IsDefaultUiCamera, JustifyContent, JustifyText, Mesh, Mesh2d, MeshMaterial2d, Node, Query,
        SpawnRelated, Text, TextColor, TextFont, TextLayout, Transform, UiRect, Val, Window,
        children, default,
    },
};
use strum::{EnumIter, IntoEnumIterator};
#[derive(Debug, EnumIter, Component)]
enum Buttons {
    Home,
    Settings,
    Projects,
    About,
    Credits,
}
fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_systems(Startup, (setup_camera, setup_window))
        .run();
}

fn setup_camera(mut commands: Commands) {
    commands.spawn((Camera2d, IsDefaultUiCamera, BoxShadowSamples(6)));
}

fn setup_window(
    mut materials: ResMut<Assets<ColorMaterial>>,
    mut meshes: ResMut<Assets<Mesh>>,
    mut commands: Commands,
    windows: Query<&Window>,
) {
    let window = windows.single();
    let window_width = window.unwrap().width();
    let rect_height = 30.0;

    commands
        .spawn((
            Node {
                align_items: AlignItems::Center,
                justify_content: JustifyContent::Center,
                width: Val::Percent(100.0),
                height: Val::Percent(90.0),
                ..default()
            },
            children![(
                Node { ..default() },
                Mesh2d(meshes.add(Rectangle::new(window_width, rect_height))),
                MeshMaterial2d(materials.add(Color::Srgba(Srgba::GREEN))),
                Pickable::IGNORE,
                BorderColor(Color::BLACK),
                BorderRadius::MAX,
            )],
        ))
        .with_children(|parent| {
            // Spawn three pill-shaped buttons
            Buttons::iter().for_each(|button_name| {
                parent.spawn((
                    Button,
                    Node {
                        width: Val::Percent(55.),
                        bottom: Val::Percent(45.),
                        align_items: AlignItems::Center,
                        justify_content: JustifyContent::Center,
                        margin: UiRect::horizontal(Val::Px(80.0)),
                        ..default()
                    },
                    Mesh2d(meshes.add(Capsule2d::new(20.0, 60.))),
                    MeshMaterial2d(materials.add(Color::Srgba(Srgba::BLUE))),
                    children![(Text::new("new!"))],
                    button_name,
                ));
            });
        });
}

For - I don't really know why - reasons, my main bar, on which the buttons should be orientated, needs its own sub entity with its own node for orientation. I have also tried this with the other meshes. unfortunately, wild things then happen.

[rparrett]

Mesh2d and MeshMaterial2d are meaningless when combined with Node. Use BackgroundColor instead. It's possible that by some strange quirk of platform-specific behavior you're seeing some sort of result with those, but it isn't correct and the behavior will not be predictable.

If you're able to provide an illustration of the layout you're trying to achieve, I'm happy to help. This is something I haven't been able to determine based on what you've provided so far.

[Guelakais]

This does not solve the problem. I want to draw a rectangle on which several buttons are orientated. This is not possible with your suggestion. You can only clap some pills into the room with BackgroundColor.

[rparrett]

It solves a problem. It is a fundamental mistake that may be leading you astray and wasting your time. And fixing it means that we can continue the conversation while talking about valid Bevy code.

It sounds like maybe you want these buttons contained in a bar at the top of the screen? Here's a modification of the code I shared above that does that.

Expand Code

//! 19031

use bevy::prelude::*;

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

fn setup_window(mut commands: Commands) {
    commands.spawn(Camera2d);

    commands
        .spawn((
            Node {
                align_items: AlignItems::Center,
                justify_content: JustifyContent::Center,
                width: Val::Percent(100.0),
                column_gap: Val::Px(60.),
                padding: UiRect::vertical(Val::Px(10.)),
                ..default()
            },
            BackgroundColor(Srgba::GREEN.into()),
        ))
        .with_children(|parent| {
            // Spawn three pill-shaped buttons
            for text in ["Button 1", "Button 2", "Button 3"] {
                parent.spawn((
                    Button,
                    Node {
                        height: Val::Px(30.0),
                        width: Val::Px(120.0),
                        align_items: AlignItems::Center,
                        justify_content: JustifyContent::Center,
                        ..default()
                    },
                    BorderRadius::MAX,
                    BackgroundColor(Color::Srgba(Srgba::BLUE)),
                    children![Text::new(text)],
                ));
            }
        });
}