#bevy #ui-elements #gamedev #bevy-plugin #element

bevy_round_ui

A simple rounded-rect material shader for bevy_ui

6 releases (3 stable)

2.0.0 Jul 5, 2024
1.1.0 Jun 16, 2024
1.0.0 May 26, 2024
0.2.0 Feb 19, 2024
0.1.0 Nov 30, 2023

#417 in Game dev

MIT/Apache

40KB
462 lines

Bevy Round UI

This Bevy plugin contains a shader for rendering rounded rect UI elements, with an adjustable offset that can be used to add borders or make the node appear 3D.

Examples

Screenshot of the buttons example

The simple example shows how to use it in its simplest form. The buttons example shows how to use it with interactive buttons and a panel. The autosize example demonstrates what it looks like when nodes resize. The circle example shows how to make a circle shape. The shapes example shows a number of possible shapes. The superellipse example shows how to use the superellipse material. The compare example allows you to toggle between the round_rect and superellipse materials to see the difference between them. The compare example demonstrates the superellipse material working with transparency.

Features

The following cargo features (all enabled by default) can be used to control which materials are enabled:

  • round_rect - Enables the RoundRectUiMaterial.
  • superellipse - Enables the SuperellipseUiMaterial.

Basic Usage

  1. Add the BevyRoundUiDefaultPlugins plugin to the app.
  2. Create a RoundRectUiMaterial material.
  3. Spawn a MaterialNodeBundle using that material.
use bevy::prelude::*;
use bevy_round_ui::prelude::*;

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

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

    commands.spawn(MaterialNodeBundle {
        material: materials.add(RoundRectUiMaterial {
            background_color: Color::hex("#F76161").unwrap().into(),
            border_color: Color::hex("#A53A3D").unwrap().into(),
            border_radius: RoundUiBorder::all(20.0).into(),
            offset: RoundUiOffset::bottom(10.0).into(),
        }),
        style: Style {
            width: Val::Px(200.),
            height: Val::Px(200.),
            ..default()
        },
        ..default()
    });
}

Shapes

The shapes example demonstrates a number of possible shapes that can be achieved by changing the RoundRectUiMaterial::border_radius property.

NOTE: Bordered circles are not perfect.

Screenshot of the shapes example

Superellipse

The superellipse example demonstrates using the SuperellipseUiMaterial material, which renders an approximate superellipse shape with an optional border.

Also see the compare example, which allows you to toggle between the superellipse and round-rect materials to easily see their difference.

Screenshot of the superellipse example

Compatible Bevy versions

bevy_round_ui bevy
1.x - 2.x 0.13
0.2 0.13
0.1 0.12

License

Dual-licensed under either of

at your option.

Contribution

Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in the work by you, as defined in the Apache-2.0 license, shall be dual licensed as above, without any additional terms or conditions.

Dependencies

~18–45MB
~734K SLoC