Challenges with Reliable Component Event Tracking in Bevy: Seeking Guidance and Solutions

[myrpg-fun]

I've got a question about how to properly and logically create, manage, and interact with object structures in Bevy.

The idea I tried to implement is to create simple Components responsible for simple tasks. These components know how they should look like. When added to the world, they automatically add all the necessary components.

But, it didn't quite work out. Here's a simple code example:

#[derive(Debug, Component)]
pub struct StrengthBar {
    pub max_strength: u32,
    pub current_strength: u32,
}

// Initialization of UI
pub fn setup_ui(mut commands: Commands, asset_server: Res<AssetServer>) {
    ...
    parent.spawn((
        StrengthBar{
            max_strength: 10,
            current_strength: 8,
        },
        ...
    ));
    ...
}

// After spawn, create UI for StrengthBar
pub fn on_create_strength_bar(
    query: Query<(Entity, &StrengthBar), Added<StrengthBar>>,
    mut commands: Commands,
) {
    for (entity, strength_bar) in query.iter() {
        let mut parent = commands.entity(entity);

        parent
            .insert(NodeBundle {
                style: Style {
                    width: Val::Auto,
                    height: Val::Auto,
                    flex_direction: FlexDirection::Row,
                    column_gap: Val::Px(4.0),
                    padding: UiRect::all(Val::Px(2.0)),
                    border: UiRect::all(Val::Px(1.0)),
                    ..default()
                },
                background_color: BackgroundColor(...),
                border_color: BorderColor(...),
                border_radius: BorderRadius::all(Val::Px(8.0)),
                ..default()
            })
            .with_children(|parent| {
                for i in 0..strength_bar.max_strength {
                    // we spawn StrengthIndicator whom will create NodeBundle by itself
                    parent.spawn(StrengthIndicator {
                          visible: i < strength_bar.current_strength
                    });
                }
            });
    }
}

// After change, we just update indicator parameters, without access to its Visibility
pub fn on_change_strength_bar(
    query: Query<(&StrengthBar, &Children), Changed<StrengthBar>>,
    mut query_indicators: Query<&mut StrengthIndicator>,
) {
    for (strength_bar, child_indicator) in &mut query.iter() {
        let mut strength = strength_bar.current_strength;

        for child_i in child_indicator.iter() {
            if let Ok(mut child_indicator) = query_indicators.get_mut(*child_i) {
                child_indicator.visible = strength > 0;
                strength = strength.saturating_sub(1);
            }
        }
    }
}

I'm trying to work with the indicators in a similar way:

#[derive(Debug, Component)]
pub struct StrengthIndicator {
    pub visible: bool,
}

pub fn on_create_strength_indicator(
    query: Query<(Entity, &StrengthIndicator), Added<StrengthIndicator>>,
    mut commands: Commands,
) {
    // Length of the indicator
    for (entity, indicator) in query.iter() {
        let mut parent = commands.entity(entity);

        parent
            .insert(NodeBundle {
                style: Style {
                    width: Val::Px(28.0),
                    height: Val::Px(28.0),
                    border: UiRect::all(Val::Px(2.0)),
                    ..default()
                },
                border_color: BorderColor(...),
                border_radius: BorderRadius::all(Val::Px(5.5)),
                background_color: BackgroundColor(...),
                visibility: if indicator.visible {
                                Visibility::Visible
                            } else {
                                Visibility::Hidden
                            },
                ..default()
            });
    }
}

pub fn on_change_strength_indicator(
    mut query: Query<
        (&StrengthIndicator, &mut Visibility),
        Changed<StrengthIndicator>,
    >,
) {
    for (indicator, mut visibility) in &mut query.iter_mut() {
        *visibility = if indicator.visible {
            Visibility::Visible
        } else {
            Visibility::Hidden
        };
    }
}

The main idea of this approach is that the component is responsible for rendering itself. It monitors its state and only changes its appearance when it's updated. Other components only change this component's parameters. The component itself modifies how it looks on the screen based on its parameters.

The real issues start when I try to find the right sequence for .add_systems.
The first problem I encountered is that an object doesn't always trigger Added or Changed.
For example, when running in parallel, Added<StrengthIndicator> doesn't trigger at all (probably disappears by the frame's end):

app.add_systems(
    Update,
    (
        on_create_strength_bar,
        on_create_strength_indicator,
        on_change_strength_bar,
        on_change_strength_indicator,
    )
)

It's necessary to specify .chain(), for example, in this example:

app.add_systems(
    Update,
    (
        on_create_strength_bar,
        on_change_strength_bar,
        on_create_strength_indicator,
        on_change_strength_indicator,
    ).chain()
)

Only then everything renders correctly.

A few questions come to mind:

• Is it possible that I'm heading in the wrong direction since I'm a beginner? Can you suggest a better approach?
• I understand that it's possible to specify dependencies for each component using .before(). In a large project, there could be a lot of such dependencies, and you might end up with a recursive dependency, which would not end well. Manually specifying each dependency is also quite tedious.
• In general, I would like a reliable system for tracking Added and Changed. Perhaps I just have lack of experience...