Stick UI Element to Entity (2D)

[cliedelt]

Hello everybody,

I'm trying to display UI elements over a specific ingame entity. (for a example a store dialog over the sprite for the store). While the store is open the player can still move the camera and zoom.

This is my current implementation:

#[derive(Component)]
pub struct StayInPlace {
    pub desired_position: Vec2,
    pub offset: Vec2,
}

// custom implementation for unusual values
impl Default for StayInPlace {
    fn default() -> Self {
        Self {
            desired_position: Vec2::ZERO,
            offset: Vec2::ZERO,
        }
    }
}

pub(super) fn update_stay_in_place(
    mut button_query: Query<(&mut Style, &StayInPlace)>,
    camera: Query<(&Camera, &GlobalTransform)>,
) {
    let Ok((camera, camera_global_transform)) = camera.get_single() else {
        return;
    };
    for (mut style, stay_in_place) in button_query.iter_mut() {
        if let Some(viewport_position) = camera.world_to_viewport(
            camera_global_transform,
            stay_in_place.desired_position.extend(0.),
        ) {
            style.top = Val::Px(viewport_position.y + stay_in_place.offset.y);
            style.left = Val::Px(viewport_position.x + stay_in_place.offset.x);
        }
    }
}

You set desired_position to the translation of the entity and offset to center the dialog on the center of the sprite...

The UI Element is staying in place if I move the camera. But when I zoom the distance between UI and entity is off.

Maybe somebody has an idea?

[Akryum]

Maybe use the global transform of the target sprite?

[cliedelt]

I set desired_position to the translation of the entity. The entity has no parent, so global_position should not be different. And as far as I know global_position should not change only if the camera moves/zooms