Блог

Главная - Вопросы по программированию - Как явно описать Z-порядок элементов пользовательского интерфейса с абсолютным позиционированием в bevy?

Как явно описать Z-порядок элементов пользовательского интерфейса с абсолютным позиционированием в bevy?

#user-interface #bevy

#пользовательский интерфейс #набор

Вопрос:

У меня следующая ситуация:

  • Родительский элемент Node , занимающий все пространство экрана.
    • Дочерний элемент для верхней панели.
    • Дочерний элемент для игровой области.
    • Дочерний элемент для нижней панели.
    • Дочерний элемент с абсолютным расположением для наложения, который не должен быть привязан к трем вышеупомянутым.

Я не могу заставить вышеупомянутое работать, потому что я не могу найти способ определить z-порядок дочерних элементов, по крайней мере, используя компоненты UiCameraComponents по умолчанию. Вот что я пробовал:

  • Добавление Translation компонента к дочернему элементу с абсолютным позиционированием и перемещение его вверх по оси Z.
  • Предоставление дочернему элементу абсолютного позиционирования преобразования выше по оси Z.
  • Создайте узлы в разных порядках.

Похоже, что дочерний элемент overlay последовательно отображается за относительно расположенными братьями и сестрами.

Комментарии:

1. Можете ли вы опубликовать минимально воспроизводимый пример? Ранее у меня был проект, в котором я управлял z-порядком с помощью перевода. Мне было бы любопытно посмотреть, что у вас было и где произошел сбой.

Ответ №1:

Z-порядок в Bevy UI в настоящее время неявно определяется иерархией. Узлы «складываются» поверх своих родителей и поверх братьев и сестер, которые находятся перед ними в списке дочерних элементов их родителей.

Функционально z-порядок определяется с использованием z-значения преобразования объекта. Для обычных спрайтов вы можете установить это напрямую. Для компонентов пользовательского интерфейса существует базовая система, которая устанавливает это для вас.

В конце концов, я хотел бы сделать возможным необязательное переопределение поведения z-порядка Bevy UI в Bevy UI. Это должно заключаться в добавлении нового поля для «отказа», а затем в том, чтобы позволить людям напрямую устанавливать z-перевод преобразования.

Ответ №2:

В качестве обходного пути для текущего стабильного набора (0.7) я использую фиксированный z для узлов пользовательского интерфейса.

 #[derive(Debug, Component)]
pub(crate) struct UiFixedZ {
    pub z: f32,
}

pub(crate) fn ui_apply_fixed_z(
    mut node_query: Query<(amp;mut Transform, amp;mut GlobalTransform, amp;UiFixedZ), With<Node>>,
) {
    for (mut transform, mut global_transform, fixed) in node_query.iter_mut() {
        transform.translation.z = fixed.z;
        global_transform.translation.z = fixed.z;
    }
}

Я размещаю систему на последнем этапе сразу после системы z-порядка группы.

 ...
app.add_system_to_stage(CoreStage::Last, ui_apply_fixed_z)
...

при вставке компонентов UiFixedZ имейте в виду, что вам нужно позаботиться обо всех потомках вручную.

 ...
// inserting with manual z order
.insert(UiFixedZ { z: 101. })
...

   // inserting children with increased z order
   .insert(UiFixedZ { z: 102. })

надеюсь, что обходной путь кому-то поможет. Я лично использую его для всплывающих подсказок.
Скопировал мой собственный комментарий с github😛

Bevy молод, и ситуация может измениться в будущем.