bevy/examples/ui/ghost_nodes.rs
Carter Anderson d8fa57bd7b
Switch ChildOf back to tuple struct (#18672)
# Objective

In #17905 we swapped to a named field on `ChildOf` to help resolve
variable naming ambiguity of child vs parent (ex: `child_of.parent`
clearly reads as "I am accessing the parent of the child_of
relationship", whereas `child_of.0` is less clear).

Unfortunately this has the side effect of making initialization less
ideal. `ChildOf { parent }` reads just as well as `ChildOf(parent)`, but
`ChildOf { parent: root }` doesn't read nearly as well as
`ChildOf(root)`.

## Solution

Move back to `ChildOf(pub Entity)` but add a `child_of.parent()`
function and use it for all accesses. The downside here is that users
are no longer "forced" to access the parent field with `parent`
nomenclature, but I think this strikes the right balance.

Take a look at the diff. I think the results provide strong evidence for
this change. Initialization has the benefit of reading much better _and_
of taking up significantly less space, as many lines go from 3 to 1, and
we're cutting out a bunch of syntax in some cases.

Sadly I do think this should land in 0.16 as the cost of doing this
_after_ the relationships migration is high.
2025-04-02 00:10:10 +00:00

126 lines
4.2 KiB
Rust

//! This example demonstrates the use of Ghost Nodes.
//!
//! UI layout will ignore ghost nodes, and treat their children as if they were direct descendants of the first non-ghost ancestor.
//!
//! # Warning
//!
//! This is an experimental feature, and should be used with caution,
//! especially in concert with 3rd party plugins or systems that may not be aware of ghost nodes.
//!
//! In order to use [`GhostNode`]s you must enable the `ghost_nodes` feature flag.
use bevy::{prelude::*, ui::experimental::GhostNode, winit::WinitSettings};
fn main() {
App::new()
.add_plugins(DefaultPlugins)
.insert_resource(WinitSettings::desktop_app())
.add_systems(Startup, setup)
.add_systems(Update, button_system)
.run();
}
#[derive(Component)]
struct Counter(i32);
fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
let font_handle = asset_server.load("fonts/FiraSans-Bold.ttf");
commands.spawn(Camera2d);
// Ghost UI root
commands.spawn(GhostNode).with_children(|ghost_root| {
ghost_root.spawn(Node::default()).with_child(create_label(
"This text node is rendered under a ghost root",
font_handle.clone(),
));
});
// Normal UI root
commands
.spawn(Node {
width: Val::Percent(100.0),
height: Val::Percent(100.0),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()
})
.with_children(|parent| {
parent
.spawn((Node::default(), Counter(0)))
.with_children(|layout_parent| {
layout_parent
.spawn((GhostNode, Counter(0)))
.with_children(|ghost_parent| {
// Ghost children using a separate counter state
// These buttons are being treated as children of layout_parent in the context of UI
ghost_parent
.spawn(create_button())
.with_child(create_label("0", font_handle.clone()));
ghost_parent
.spawn(create_button())
.with_child(create_label("0", font_handle.clone()));
});
// A normal child using the layout parent counter
layout_parent
.spawn(create_button())
.with_child(create_label("0", font_handle.clone()));
});
});
}
fn create_button() -> impl Bundle {
(
Button,
Node {
width: Val::Px(150.0),
height: Val::Px(65.0),
border: UiRect::all(Val::Px(5.0)),
// horizontally center child text
justify_content: JustifyContent::Center,
// vertically center child text
align_items: AlignItems::Center,
..default()
},
BorderColor(Color::BLACK),
BorderRadius::MAX,
BackgroundColor(Color::srgb(0.15, 0.15, 0.15)),
)
}
fn create_label(text: &str, font: Handle<Font>) -> (Text, TextFont, TextColor) {
(
Text::new(text),
TextFont {
font,
font_size: 33.0,
..default()
},
TextColor(Color::srgb(0.9, 0.9, 0.9)),
)
}
fn button_system(
mut interaction_query: Query<(&Interaction, &ChildOf), (Changed<Interaction>, With<Button>)>,
labels_query: Query<(&Children, &ChildOf), With<Button>>,
mut text_query: Query<&mut Text>,
mut counter_query: Query<&mut Counter>,
) {
// Update parent counter on click
for (interaction, child_of) in &mut interaction_query {
if matches!(interaction, Interaction::Pressed) {
let mut counter = counter_query.get_mut(child_of.parent()).unwrap();
counter.0 += 1;
}
}
// Update button labels to match their parent counter
for (children, child_of) in &labels_query {
let counter = counter_query.get(child_of.parent()).unwrap();
let mut text = text_query.get_mut(children[0]).unwrap();
**text = counter.0.to_string();
}
}