# Objective Continue improving the user experience of our UI Node API in the direction specified by [Bevy's Next Generation Scene / UI System](https://github.com/bevyengine/bevy/discussions/14437) ## Solution As specified in the document above, merge `Style` fields into `Node`, and move "computed Node fields" into `ComputedNode` (I chose this name over something like `ComputedNodeLayout` because it currently contains more than just layout info. If we want to break this up / rename these concepts, lets do that in a separate PR). `Style` has been removed. This accomplishes a number of goals: ## Ergonomics wins Specifying both `Node` and `Style` is now no longer required for non-default styles Before: ```rust commands.spawn(( Node::default(), Style { width: Val::Px(100.), ..default() }, )); ``` After: ```rust commands.spawn(Node { width: Val::Px(100.), ..default() }); ``` ## Conceptual clarity `Style` was never a comprehensive "style sheet". It only defined "core" style properties that all `Nodes` shared. Any "styled property" that couldn't fit that mold had to be in a separate component. A "real" style system would style properties _across_ components (`Node`, `Button`, etc). We have plans to build a true style system (see the doc linked above). By moving the `Style` fields to `Node`, we fully embrace `Node` as the driving concept and remove the "style system" confusion. ## Next Steps * Consider identifying and splitting out "style properties that aren't core to Node". This should not happen for Bevy 0.15. --- ## Migration Guide Move any fields set on `Style` into `Node` and replace all `Style` component usage with `Node`. Before: ```rust commands.spawn(( Node::default(), Style { width: Val::Px(100.), ..default() }, )); ``` After: ```rust commands.spawn(Node { width: Val::Px(100.), ..default() }); ``` For any usage of the "computed node properties" that used to live on `Node`, use `ComputedNode` instead: Before: ```rust fn system(nodes: Query<&Node>) { for node in &nodes { let computed_size = node.size(); } } ``` After: ```rust fn system(computed_nodes: Query<&ComputedNode>) { for computed_node in &computed_nodes { let computed_size = computed_node.size(); } } ```
		
			
				
	
	
		
			208 lines
		
	
	
		
			8.0 KiB
		
	
	
	
		
			Rust
		
	
	
	
	
	
			
		
		
	
	
			208 lines
		
	
	
		
			8.0 KiB
		
	
	
	
		
			Rust
		
	
	
	
	
	
//! This example illustrates how to run a winit window in a reactive, low power mode.
 | 
						|
//!
 | 
						|
//! This is useful for making desktop applications, or any other program that doesn't need to be
 | 
						|
//! running the event loop non-stop.
 | 
						|
 | 
						|
use bevy::{
 | 
						|
    prelude::*,
 | 
						|
    utils::Duration,
 | 
						|
    window::{PresentMode, RequestRedraw, WindowPlugin},
 | 
						|
    winit::{EventLoopProxyWrapper, WakeUp, WinitSettings},
 | 
						|
};
 | 
						|
 | 
						|
fn main() {
 | 
						|
    App::new()
 | 
						|
        // Continuous rendering for games - bevy's default.
 | 
						|
        .insert_resource(WinitSettings::game())
 | 
						|
        // Power-saving reactive rendering for applications.
 | 
						|
        .insert_resource(WinitSettings::desktop_app())
 | 
						|
        // You can also customize update behavior with the fields of [`WinitSettings`]
 | 
						|
        .insert_resource(WinitSettings {
 | 
						|
            focused_mode: bevy::winit::UpdateMode::Continuous,
 | 
						|
            unfocused_mode: bevy::winit::UpdateMode::reactive_low_power(Duration::from_millis(10)),
 | 
						|
        })
 | 
						|
        .insert_resource(ExampleMode::Game)
 | 
						|
        .add_plugins(DefaultPlugins.set(WindowPlugin {
 | 
						|
            primary_window: Some(Window {
 | 
						|
                // Turn off vsync to maximize CPU/GPU usage
 | 
						|
                present_mode: PresentMode::AutoNoVsync,
 | 
						|
                ..default()
 | 
						|
            }),
 | 
						|
            ..default()
 | 
						|
        }))
 | 
						|
        .add_systems(Startup, test_setup::setup)
 | 
						|
        .add_systems(
 | 
						|
            Update,
 | 
						|
            (
 | 
						|
                test_setup::cycle_modes,
 | 
						|
                test_setup::rotate_cube,
 | 
						|
                test_setup::update_text,
 | 
						|
                update_winit,
 | 
						|
            ),
 | 
						|
        )
 | 
						|
        .run();
 | 
						|
}
 | 
						|
 | 
						|
#[derive(Resource, Debug)]
 | 
						|
enum ExampleMode {
 | 
						|
    Game,
 | 
						|
    Application,
 | 
						|
    ApplicationWithRequestRedraw,
 | 
						|
    ApplicationWithWakeUp,
 | 
						|
}
 | 
						|
 | 
						|
/// Update winit based on the current `ExampleMode`
 | 
						|
fn update_winit(
 | 
						|
    mode: Res<ExampleMode>,
 | 
						|
    mut winit_config: ResMut<WinitSettings>,
 | 
						|
    event_loop_proxy: Res<EventLoopProxyWrapper<WakeUp>>,
 | 
						|
    mut redraw_request_events: EventWriter<RequestRedraw>,
 | 
						|
) {
 | 
						|
    use ExampleMode::*;
 | 
						|
    *winit_config = match *mode {
 | 
						|
        Game => {
 | 
						|
            // In the default `WinitSettings::game()` mode:
 | 
						|
            //   * When focused: the event loop runs as fast as possible
 | 
						|
            //   * When not focused: the app will update when the window is directly interacted with
 | 
						|
            //     (e.g. the mouse hovers over a visible part of the out of focus window), a
 | 
						|
            //     [`RequestRedraw`] event is received, or one sixtieth of a second has passed
 | 
						|
            //     without the app updating (60 Hz refresh rate max).
 | 
						|
            WinitSettings::game()
 | 
						|
        }
 | 
						|
        Application => {
 | 
						|
            // While in `WinitSettings::desktop_app()` mode:
 | 
						|
            //   * When focused: the app will update any time a winit event (e.g. the window is
 | 
						|
            //     moved/resized, the mouse moves, a button is pressed, etc.), a [`RequestRedraw`]
 | 
						|
            //     event is received, or after 5 seconds if the app has not updated.
 | 
						|
            //   * When not focused: the app will update when the window is directly interacted with
 | 
						|
            //     (e.g. the mouse hovers over a visible part of the out of focus window), a
 | 
						|
            //     [`RequestRedraw`] event is received, or one minute has passed without the app
 | 
						|
            //     updating.
 | 
						|
            WinitSettings::desktop_app()
 | 
						|
        }
 | 
						|
        ApplicationWithRequestRedraw => {
 | 
						|
            // Sending a `RequestRedraw` event is useful when you want the app to update the next
 | 
						|
            // frame regardless of any user input. For example, your application might use
 | 
						|
            // `WinitSettings::desktop_app()` to reduce power use, but UI animations need to play even
 | 
						|
            // when there are no inputs, so you send redraw requests while the animation is playing.
 | 
						|
            // Note that in this example the RequestRedraw winit event will make the app run in the same
 | 
						|
            // way as continuous
 | 
						|
            redraw_request_events.send(RequestRedraw);
 | 
						|
            WinitSettings::desktop_app()
 | 
						|
        }
 | 
						|
        ApplicationWithWakeUp => {
 | 
						|
            // Sending a `WakeUp` event is useful when you want the app to update the next
 | 
						|
            // frame regardless of any user input. This can be used from outside Bevy, see example
 | 
						|
            // `window/custom_user_event.rs` for an example usage from outside.
 | 
						|
            // Note that in this example the Wakeup winit event will make the app run in the same
 | 
						|
            // way as continuous
 | 
						|
            let _ = event_loop_proxy.send_event(WakeUp);
 | 
						|
            WinitSettings::desktop_app()
 | 
						|
        }
 | 
						|
    };
 | 
						|
}
 | 
						|
 | 
						|
/// Everything in this module is for setting up and animating the scene, and is not important to the
 | 
						|
/// demonstrated features.
 | 
						|
pub(crate) mod test_setup {
 | 
						|
    use crate::ExampleMode;
 | 
						|
    use bevy::{
 | 
						|
        color::palettes::basic::{LIME, YELLOW},
 | 
						|
        prelude::*,
 | 
						|
        window::RequestRedraw,
 | 
						|
    };
 | 
						|
 | 
						|
    /// Switch between update modes when the mouse is clicked.
 | 
						|
    pub(crate) fn cycle_modes(
 | 
						|
        mut mode: ResMut<ExampleMode>,
 | 
						|
        button_input: Res<ButtonInput<KeyCode>>,
 | 
						|
    ) {
 | 
						|
        if button_input.just_pressed(KeyCode::Space) {
 | 
						|
            *mode = match *mode {
 | 
						|
                ExampleMode::Game => ExampleMode::Application,
 | 
						|
                ExampleMode::Application => ExampleMode::ApplicationWithRequestRedraw,
 | 
						|
                ExampleMode::ApplicationWithRequestRedraw => ExampleMode::ApplicationWithWakeUp,
 | 
						|
                ExampleMode::ApplicationWithWakeUp => ExampleMode::Game,
 | 
						|
            };
 | 
						|
        }
 | 
						|
    }
 | 
						|
 | 
						|
    #[derive(Component)]
 | 
						|
    pub(crate) struct Rotator;
 | 
						|
 | 
						|
    /// Rotate the cube to make it clear when the app is updating
 | 
						|
    pub(crate) fn rotate_cube(
 | 
						|
        time: Res<Time>,
 | 
						|
        mut cube_transform: Query<&mut Transform, With<Rotator>>,
 | 
						|
    ) {
 | 
						|
        for mut transform in &mut cube_transform {
 | 
						|
            transform.rotate_x(time.delta_secs());
 | 
						|
            transform.rotate_local_y(time.delta_secs());
 | 
						|
        }
 | 
						|
    }
 | 
						|
 | 
						|
    #[derive(Component)]
 | 
						|
    pub struct ModeText;
 | 
						|
 | 
						|
    pub(crate) fn update_text(
 | 
						|
        mut frame: Local<usize>,
 | 
						|
        mode: Res<ExampleMode>,
 | 
						|
        text: Single<Entity, With<ModeText>>,
 | 
						|
        mut writer: TextUiWriter,
 | 
						|
    ) {
 | 
						|
        *frame += 1;
 | 
						|
        let mode = match *mode {
 | 
						|
            ExampleMode::Game => "game(), continuous, default",
 | 
						|
            ExampleMode::Application => "desktop_app(), reactive",
 | 
						|
            ExampleMode::ApplicationWithRequestRedraw => {
 | 
						|
                "desktop_app(), reactive, RequestRedraw sent"
 | 
						|
            }
 | 
						|
            ExampleMode::ApplicationWithWakeUp => "desktop_app(), reactive, WakeUp sent",
 | 
						|
        };
 | 
						|
        *writer.text(*text, 2) = mode.to_string();
 | 
						|
        *writer.text(*text, 4) = frame.to_string();
 | 
						|
    }
 | 
						|
 | 
						|
    /// Set up a scene with a cube and some text
 | 
						|
    pub fn setup(
 | 
						|
        mut commands: Commands,
 | 
						|
        mut meshes: ResMut<Assets<Mesh>>,
 | 
						|
        mut materials: ResMut<Assets<StandardMaterial>>,
 | 
						|
        mut event: EventWriter<RequestRedraw>,
 | 
						|
    ) {
 | 
						|
        commands.spawn((
 | 
						|
            Mesh3d(meshes.add(Cuboid::new(0.5, 0.5, 0.5))),
 | 
						|
            MeshMaterial3d(materials.add(Color::srgb(0.8, 0.7, 0.6))),
 | 
						|
            Rotator,
 | 
						|
        ));
 | 
						|
 | 
						|
        commands.spawn((
 | 
						|
            DirectionalLight::default(),
 | 
						|
            Transform::from_xyz(1.0, 1.0, 1.0).looking_at(Vec3::ZERO, Vec3::Y),
 | 
						|
        ));
 | 
						|
        commands.spawn((
 | 
						|
            Camera3d::default(),
 | 
						|
            Transform::from_xyz(-2.0, 2.0, 2.0).looking_at(Vec3::ZERO, Vec3::Y),
 | 
						|
        ));
 | 
						|
        event.send(RequestRedraw);
 | 
						|
        commands
 | 
						|
            .spawn((
 | 
						|
                Text::default(),
 | 
						|
                Node {
 | 
						|
                    align_self: AlignSelf::FlexStart,
 | 
						|
                    position_type: PositionType::Absolute,
 | 
						|
                    top: Val::Px(12.0),
 | 
						|
                    left: Val::Px(12.0),
 | 
						|
                    ..default()
 | 
						|
                },
 | 
						|
                ModeText,
 | 
						|
            ))
 | 
						|
            .with_children(|p| {
 | 
						|
                p.spawn(TextSpan::new("Press space bar to cycle modes\n"));
 | 
						|
                p.spawn((TextSpan::default(), TextColor(LIME.into())));
 | 
						|
                p.spawn((TextSpan::new("\nFrame: "), TextColor(YELLOW.into())));
 | 
						|
                p.spawn((TextSpan::new(""), TextColor(YELLOW.into())));
 | 
						|
            });
 | 
						|
    }
 | 
						|
}
 |