#Best way to create a game board using bevy_ui?

9 messages · Page 1 of 1 (latest)

urban moat
#

Hello people!

I'm trying to make a game that's played on a backgammon board, and I'm running into some difficulties on how to best draw the board to the screen and make it responsive and fit within the ui.

The UI is a flex column.

fn setup_ui(...) {
    // Spawn board first
    spawn_board(&mut commands, &mut meshes, &mut materials);

    // Then spawn UI
    commands
        .spawn((
            Node {
                width: Val::Percent(100.0),
                height: Val::Percent(100.0),
                flex_direction: FlexDirection::Column,
                justify_content: JustifyContent::Stretch,
                ..default()
            },
            PickingBehavior::IGNORE,
        ))
        .with_children(|parent| {
            //top horizontal fill
            parent.spawn(...)

            // center horizontal fill - board container
            parent.spawn((
                Node {
                    width: Val::Percent(100.0),
                    height: Val::Percent(100.0),
                    flex_direction: FlexDirection::Column,
                    align_items: AlignItems::Center,
                    justify_content: JustifyContent::Center,
                    ..default()
                },
                PickingBehavior::IGNORE,
            ));

            // bottom horizontal fill
            parent.spawn(...);
}

The board is a 2d mesh

pub fn spawn_board(...) {
    commands
        .spawn((
            Mesh2d(meshes.add(Rectangle::from_size(BOARD_SIZE))),
            Transform::default(),
            MeshMaterial2d(materials.add(BOARD_COLOR)),
        ))
        .with_children(|parent| {
            spawn_board_triangles(parent, meshes, &triangle_materials);
        });
}

But this isn't responsive and, the UI covers the board if we resize the window. I tried to parent the UI to the board, but then it showed "behind".

Could anyone point me in the right direction?

Screenshot_2025-01-11_at_10.22.48.png Screenshot_2025-01-11_at_10.22.53.png
#

Should I try to draw the board and the triangles as bevy UI elements? Should they be meshes or sprites that I update to make them responsive?

raven idol
#

The center height should be Auto and you should use flex_grow: 1.0. That way the center node will always fill the available space. Then your image should be in a MaterialNode (if you want 100% of your game to be in ui).

#

Beyond that you'll need to be more specific about what exactly you want to accomplish.

urban moat
#

Thanks for your answer, @raven idol I didn't know about MaterialNode, I'll see if that works for me.

My question was more about how to integrate what I had done until now with meshes (board rect, triangles and checkers) with bevy UI. Say, for example, that I want to draw a checker on top of a triangle, and animate it to another one. With meshes it's quite easy because I can just parent a checker to a triangle. With UI I'm not sure if that's the best way to do it.

#

Would it be a good idea to have the board and triangles be drawn using bevy ui, and the checkers just be sprites or meshes that I can position on top of it? Could I, for example, parent the checkers to the triangles if they are ui nodes?

raven idol
raven idol
urban moat
#

What would the best way forward be, then?