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,
display::caption,
theme::{ThemeBackgroundColor, 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 [ @caption("-1") ]
--
Node {
margin: UiRect::horizontal(px(10.0)),
}
@caption("0") CounterText
--
@FeathersButton
on(|_activate: On<Activate>, mut counter: ResMut<Counter>| {
counter.0 += 1;
})
Children [ @caption("+1") ]
]
]
}
}
fn update_counter_text(
counter: Res<Counter>,
mut counter_text: Single<&mut Text, With<CounterText>>,
) {
info!("Counter updated");
counter_text.0 = format!("{}", counter.0);
}