UI (User Interface) / Feathers Counter

Back to examples View in GitHub

This example shows how to setup a basic counter app using feathers

To use feathers in your bevy app, you need to use the bevy_feathers feature

use bevy::{
    feathers::{
        controls::FeathersButton,
        dark_theme::create_dark_theme,
        theme::{ThemeBackgroundColor, ThemedText, UiTheme},
        tokens, FeathersPlugins,
    },
    prelude::*,
    ui_widgets::Activate,
};

#[derive(Resource)]
struct Counter(i32);

#[derive(Component, Default, Clone)]
struct CounterText;

fn main() {
    App::new()
        .add_plugins((
            DefaultPlugins,
            // Don't forget to add the plugin.
            // Make sure you are using FeathersPlugins with an `s`
            FeathersPlugins,
        ))
        // Configure feathers to use the dark theme
        .insert_resource(UiTheme(create_dark_theme()))
        .insert_resource(Counter(0))
        .add_systems(Startup, scene.spawn())
        .add_systems(
            Update,
            update_counter_text.run_if(resource_changed::<Counter>),
        )
        .run();
}

fn scene() -> impl SceneList {
    bsn_list![Camera2d, demo_root()]
}

fn demo_root() -> impl Scene {
    bsn! {
        Node {
            width: percent(100),
            height: percent(100),
            align_items: AlignItems::Center,
            justify_content: JustifyContent::Center,
        }
        ThemeBackgroundColor(tokens::WINDOW_BG)
        Children[(
            Node {
                align_items: AlignItems::Center,
                justify_content: JustifyContent::Center,
            }
            Children [
                (
                    @FeathersButton
                    on(|_activate: On<Activate>, mut counter: ResMut<Counter>| {
                        counter.0 -= 1;
                    })
                    Children [ (Text("-1") ThemedText) ]
                ),
                (
                    Node {
                        margin: UiRect::horizontal(px(10.0)),
                    }
                    Text("0") ThemedText CounterText
                ),
                (
                    @FeathersButton
                    on(|_activate: On<Activate>, mut counter: ResMut<Counter>| {
                        counter.0 += 1;
                    })
                    Children [ (Text("+1") ThemedText) ]
                )
            ]
        )]
    }
}

fn update_counter_text(
    counter: Res<Counter>,
    mut counter_text: Single<&mut Text, With<CounterText>>,
) {
    info!("Counter updated");
    counter_text.0 = format!("{}", counter.0);
}