Bevy中如何正确绑定非UI实体与UI实体实现联动销毁

报错来自Bevy UI系统的强校验规则：所有带UI组件（NodeBundle、Style、UI节点计算相关组件）的实体，必须处于合法UI层级下——也就是父节点要么是UI根节点，要么是其他带UI组件的实体。你直接把UI节点设为带碰撞、Sprite的普通游戏实体的子节点，UI渲染遍历的时候找不到合法的UI层级链，就会抛这个错，同时UI无法正常渲染。

不要用内置的Parent/Children层级关系做游戏实体和UI实体的关联，跨逻辑域的绑定直接用自定义组件存实体ID即可，实现分三步：

1. 定义关联标记组件 #

用来存储实体间的绑定关系，不需要改动UI的原生父层级。如果是单触发器对应单UI的场景，反过来给触发器存UI的ID效率更高：

#[derive(Component)]
struct Tutorial {
    /// 当前触发器绑定的UI实体ID
    bind_ui: Entity,
}

如果是一对多的绑定场景（一个触发器对应多个UI元素），就给UI实体加绑定组件：

#[derive(Component)]
struct TutorialUiBind {
    /// 当前UI绑定的教程触发器实体ID
    trigger: Entity,
}

2. 生成实体时正确绑定 #

生成实体时保持UI节点在合法UI层级下，不要手动给UI设置非UI实体作为父节点：

// 先创建UI实体，拿到实体ID
let tutorial_ui = commands
    .spawn_bundle(NodeBundle {
        // 你的UI节点配置
        ..Default::default()
    })
    .id();

// 再创建教程触发器实体，把UI ID存在组件里
commands
    .spawn(Sensor(true))
    .insert(Collider::cuboid(8.0, 8.0))
    .insert(ActiveEvents::COLLISION_EVENTS)
    .insert_bundle(SpriteBundle {
        sprite: Sprite {
            color: Color::rgb(0.1, 0.1, 0.1),
            custom_size: Some(Vec2::new(16.0, 16.0)),
            ..Default::default()
        },
        transform: *tutorial_transform,
        ..Default::default()
    })
    .insert(Tutorial { bind_ui: tutorial_ui });

3. 触发碰撞时同步销毁 #

检测到玩家和触发器碰撞需要销毁实体时，先销毁绑定的UI，再销毁触发器本身即可：

// 碰撞处理系统示例
fn handle_tutorial_collision(
    mut commands: Commands,
    mut collision_events: EventReader<CollisionEvent>,
    tutorial_query: Query<(Entity, &Tutorial)>,
    player_query: Query<&Player>, // 你的玩家标记组件
) {
    for event in collision_events.iter() {
        if let CollisionEvent::Started(e1, e2, _) = event {
            // 判断碰撞双方是不是玩家+教程触发器
            let (trigger_entity, tutorial_comp) = 
                if let Ok(t) = tutorial_query.get(*e1) && player_query.get(*e2).is_ok() {
                    t
                } else if let Ok(t) = tutorial_query.get(*e2) && player_query.get(*e1).is_ok() {
                    t
                } else {
                    continue;
                };
            
            // 先销毁绑定的UI
            commands.entity(tutorial_comp.bind_ui).despawn();
            // 再销毁触发器本身
            commands.entity(trigger_entity).despawn();
        }
    }
}

额外说明 #

如果需要实现UI跟随游戏实体移动（比如触发器头顶的操作提示），也不需要把UI设为游戏实体的子节点，只需要每帧把游戏实体的世界坐标通过相机投影转成屏幕坐标，赋值给UI节点的Style里的位置属性即可，同样用上面的绑定组件拿到对应UI实体更新坐标就行。

内容的提问来源于stack exchange，提问作者MadMed677