use bevy::prelude::*; /// This example illustrates how to create a button that changes color and text based on its interaction state. fn main() { App::build() .add_default_plugins() .init_resource::() .add_startup_system(setup.system()) .add_system(button_system.system()) .run(); } struct ButtonMaterials { normal: Handle, hovered: Handle, pressed: Handle, } impl FromResources for ButtonMaterials { fn from_resources(resources: &Resources) -> Self { let mut materials = resources.get_mut::>().unwrap(); ButtonMaterials { normal: materials.add(Color::rgb(0.15, 0.15, 0.15).into()), hovered: materials.add(Color::rgb(0.25, 0.25, 0.25).into()), pressed: materials.add(Color::rgb(0.35, 0.75, 0.35).into()), } } } fn button_system( button_materials: Res, mut interaction_query: Query<( &Button, Mutated, &mut Handle, &Children, )>, mut text_query: Query<&mut Text>, ) { for (_button, interaction, mut material, children) in interaction_query.iter_mut() { let mut text = text_query.get_mut::(children[0]).unwrap(); match *interaction { Interaction::Clicked => { text.value = "Press".to_string(); *material = button_materials.pressed.clone(); } Interaction::Hovered => { text.value = "Hover".to_string(); *material = button_materials.hovered.clone(); } Interaction::None => { text.value = "Button".to_string(); *material = button_materials.normal.clone(); } } } } fn setup( mut commands: Commands, asset_server: Res, button_materials: Res, ) { commands // ui camera .spawn(UiCameraComponents::default()) .spawn(ButtonComponents { style: Style { size: Size::new(Val::Px(150.0), Val::Px(65.0)), // center button margin: Rect::all(Val::Auto), // horizontally center child text justify_content: JustifyContent::Center, // vertically center child text align_items: AlignItems::Center, ..Default::default() }, material: button_materials.normal.clone(), ..Default::default() }) .with_children(|parent| { parent.spawn(TextComponents { text: Text { value: "Button".to_string(), font: asset_server.load("fonts/FiraSans-Bold.ttf"), style: TextStyle { font_size: 40.0, color: Color::rgb(0.9, 0.9, 0.9), }, }, ..Default::default() }); }); }