bevy/examples/mobile/src/lib.rs
Carter Anderson 015f2c69ca
Merge Style properties into Node. Use ComputedNode for computed properties. (#15975)
# 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();
    }
}
```
2024-10-18 22:25:33 +00:00

186 lines
5.9 KiB
Rust

//! A 3d Scene with a button and playing sound.
use bevy::{
color::palettes::basic::*,
input::{gestures::RotationGesture, touch::TouchPhase},
log::{Level, LogPlugin},
prelude::*,
window::{AppLifecycle, WindowMode},
};
// the `bevy_main` proc_macro generates the required boilerplate for iOS and Android
#[bevy_main]
fn main() {
let mut app = App::new();
app.add_plugins(
DefaultPlugins
.set(LogPlugin {
// This will show some log events from Bevy to the native logger.
level: Level::DEBUG,
filter: "wgpu=error,bevy_render=info,bevy_ecs=trace".to_string(),
..Default::default()
})
.set(WindowPlugin {
primary_window: Some(Window {
resizable: false,
mode: WindowMode::BorderlessFullscreen(MonitorSelection::Primary),
// on iOS, gestures must be enabled.
// This doesn't work on Android
recognize_rotation_gesture: true,
..default()
}),
..default()
}),
)
.add_systems(Startup, (setup_scene, setup_music))
.add_systems(Update, (touch_camera, button_handler, handle_lifetime))
.run();
}
fn touch_camera(
window: Single<&Window>,
mut touches: EventReader<TouchInput>,
mut camera_transform: Single<&mut Transform, With<Camera3d>>,
mut last_position: Local<Option<Vec2>>,
mut rotations: EventReader<RotationGesture>,
) {
for touch in touches.read() {
if touch.phase == TouchPhase::Started {
*last_position = None;
}
if let Some(last_position) = *last_position {
**camera_transform = Transform::from_xyz(
camera_transform.translation.x
+ (touch.position.x - last_position.x) / window.width() * 5.0,
camera_transform.translation.y,
camera_transform.translation.z
+ (touch.position.y - last_position.y) / window.height() * 5.0,
)
.looking_at(Vec3::ZERO, Vec3::Y);
}
*last_position = Some(touch.position);
}
// Rotation gestures only work on iOS
for rotation in rotations.read() {
let forward = camera_transform.forward();
camera_transform.rotate_axis(forward, rotation.0 / 10.0);
}
}
/// set up a simple 3D scene
fn setup_scene(
mut commands: Commands,
mut meshes: ResMut<Assets<Mesh>>,
mut materials: ResMut<Assets<StandardMaterial>>,
) {
// plane
commands.spawn((
Mesh3d(meshes.add(Plane3d::default().mesh().size(5.0, 5.0))),
MeshMaterial3d(materials.add(Color::srgb(0.1, 0.2, 0.1))),
));
// cube
commands.spawn((
Mesh3d(meshes.add(Cuboid::default())),
MeshMaterial3d(materials.add(Color::srgb(0.5, 0.4, 0.3))),
Transform::from_xyz(0.0, 0.5, 0.0),
));
// sphere
commands.spawn((
Mesh3d(meshes.add(Sphere::new(0.5).mesh().ico(4).unwrap())),
MeshMaterial3d(materials.add(Color::srgb(0.1, 0.4, 0.8))),
Transform::from_xyz(1.5, 1.5, 1.5),
));
// light
commands.spawn((
PointLight {
intensity: 1_000_000.0,
// Shadows makes some Android devices segfault, this is under investigation
// https://github.com/bevyengine/bevy/issues/8214
#[cfg(not(target_os = "android"))]
shadows_enabled: true,
..default()
},
Transform::from_xyz(4.0, 8.0, 4.0),
));
// camera
commands.spawn((
Camera3d::default(),
Transform::from_xyz(-2.0, 2.5, 5.0).looking_at(Vec3::ZERO, Vec3::Y),
// MSAA makes some Android devices panic, this is under investigation
// https://github.com/bevyengine/bevy/issues/8229
#[cfg(target_os = "android")]
Msaa::Off,
));
// Test ui
commands
.spawn((
Button,
Node {
justify_content: JustifyContent::Center,
align_items: AlignItems::Center,
position_type: PositionType::Absolute,
left: Val::Px(50.0),
right: Val::Px(50.0),
bottom: Val::Px(50.0),
..default()
},
))
.with_child((
Text::new("Test Button"),
TextFont {
font_size: 30.0,
..default()
},
TextColor::BLACK,
TextLayout::new_with_justify(JustifyText::Center),
));
}
fn button_handler(
mut interaction_query: Query<
(&Interaction, &mut BackgroundColor),
(Changed<Interaction>, With<Button>),
>,
) {
for (interaction, mut color) in &mut interaction_query {
match *interaction {
Interaction::Pressed => {
*color = BLUE.into();
}
Interaction::Hovered => {
*color = GRAY.into();
}
Interaction::None => {
*color = WHITE.into();
}
}
}
}
fn setup_music(asset_server: Res<AssetServer>, mut commands: Commands) {
commands.spawn((
AudioPlayer::<AudioSource>(asset_server.load("sounds/Windless Slopes.ogg")),
PlaybackSettings::LOOP,
));
}
// Pause audio when app goes into background and resume when it returns.
// This is handled by the OS on iOS, but not on Android.
fn handle_lifetime(
mut lifecycle_events: EventReader<AppLifecycle>,
music_controller: Query<&AudioSink>,
) {
let Ok(music_controller) = music_controller.get_single() else {
return;
};
for event in lifecycle_events.read() {
match event {
AppLifecycle::Idle | AppLifecycle::WillSuspend | AppLifecycle::WillResume => {}
AppLifecycle::Suspended => music_controller.pause(),
AppLifecycle::Running => music_controller.play(),
}
}
}