bevy/examples/2d/wireframe_2d.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

148 lines
4.5 KiB
Rust

//! Showcases wireframe rendering for 2d meshes.
//!
//! Wireframes currently do not work when using webgl or webgpu.
//! Supported platforms:
//! - DX12
//! - Vulkan
//! - Metal
//!
//! This is a native only feature.
use bevy::{
color::palettes::basic::{GREEN, RED, WHITE},
prelude::*,
render::{
render_resource::WgpuFeatures,
settings::{RenderCreation, WgpuSettings},
RenderPlugin,
},
sprite::{NoWireframe2d, Wireframe2d, Wireframe2dColor, Wireframe2dConfig, Wireframe2dPlugin},
};
fn main() {
App::new()
.add_plugins((
DefaultPlugins.set(RenderPlugin {
render_creation: RenderCreation::Automatic(WgpuSettings {
// WARN this is a native only feature. It will not work with webgl or webgpu
features: WgpuFeatures::POLYGON_MODE_LINE,
..default()
}),
..default()
}),
// You need to add this plugin to enable wireframe rendering
Wireframe2dPlugin,
))
// Wireframes can be configured with this resource. This can be changed at runtime.
.insert_resource(Wireframe2dConfig {
// The global wireframe config enables drawing of wireframes on every mesh,
// except those with `NoWireframe2d`. Meshes with `Wireframe2d` will always have a wireframe,
// regardless of the global configuration.
global: true,
// Controls the default color of all wireframes. Used as the default color for global wireframes.
// Can be changed per mesh using the `Wireframe2dColor` component.
default_color: WHITE.into(),
})
.add_systems(Startup, setup)
.add_systems(Update, update_colors)
.run();
}
/// Set up a simple 3D scene
fn setup(
mut commands: Commands,
mut meshes: ResMut<Assets<Mesh>>,
mut materials: ResMut<Assets<ColorMaterial>>,
) {
// Triangle: Never renders a wireframe
commands.spawn((
Mesh2d(meshes.add(Triangle2d::new(
Vec2::new(0.0, 50.0),
Vec2::new(-50.0, -50.0),
Vec2::new(50.0, -50.0),
))),
MeshMaterial2d(materials.add(Color::BLACK)),
Transform::from_xyz(-150.0, 0.0, 0.0),
NoWireframe2d,
));
// Rectangle: Follows global wireframe setting
commands.spawn((
Mesh2d(meshes.add(Rectangle::new(100.0, 100.0))),
MeshMaterial2d(materials.add(Color::BLACK)),
Transform::from_xyz(0.0, 0.0, 0.0),
));
// Circle: Always renders a wireframe
commands.spawn((
Mesh2d(meshes.add(Circle::new(50.0))),
MeshMaterial2d(materials.add(Color::BLACK)),
Transform::from_xyz(150.0, 0.0, 0.0),
Wireframe2d,
// This lets you configure the wireframe color of this entity.
// If not set, this will use the color in `WireframeConfig`
Wireframe2dColor {
color: GREEN.into(),
},
));
// Camera
commands.spawn(Camera2d);
// Text used to show controls
commands.spawn((
Text::default(),
Node {
position_type: PositionType::Absolute,
top: Val::Px(12.0),
left: Val::Px(12.0),
..default()
},
));
}
/// This system lets you toggle various wireframe settings
fn update_colors(
keyboard_input: Res<ButtonInput<KeyCode>>,
mut config: ResMut<Wireframe2dConfig>,
mut wireframe_colors: Query<&mut Wireframe2dColor>,
mut text: Single<&mut Text>,
) {
text.0 = format!(
"Controls
---------------
Z - Toggle global
X - Change global color
C - Change color of the circle wireframe
Wireframe2dConfig
-------------
Global: {}
Color: {:?}",
config.global,
config.default_color.to_srgba(),
);
// Toggle showing a wireframe on all meshes
if keyboard_input.just_pressed(KeyCode::KeyZ) {
config.global = !config.global;
}
// Toggle the global wireframe color
if keyboard_input.just_pressed(KeyCode::KeyX) {
config.default_color = if config.default_color == WHITE.into() {
RED.into()
} else {
WHITE.into()
};
}
// Toggle the color of a wireframe using `Wireframe2dColor` and not the global color
if keyboard_input.just_pressed(KeyCode::KeyC) {
for mut color in &mut wireframe_colors {
color.color = if color.color == GREEN.into() {
RED.into()
} else {
GREEN.into()
};
}
}
}