Bevy UI (0.11)

Подготовка(Окно)

Создаёт окно, свой плагин в новом модуле, и подключает инспектор от egui.

1. Создать заголовок окна - достаточно подключить DefaultPlugins или WindowPlugin, который и определяет интерфейс окна. (Под капотом использует crate winit)

2. Создать содержимое окна, нужно добавить Camera2dBundle или Camera3dBundle - для 2D и 3D графики соответственно.

После применения функции, содержимое окна изменится с чёрного цвета на серый цвет фона по-умолчанию.

3. Рекомендую подключить crate bevy-inspector-egui, это позволит просматривать создание сущности и компоненты.

4. Создал плагин для нашего графического интерфейса.

UI

Bevy для создания интерфейсов использует крейт bevy_ui, который уже встроен в движок.

UI-Элементы: NodeBundle, ButtonBundle, TextBundle, ImageBundle.

Каждый тип содержит Style - который использует шаблоны макета Flexbox и CSS Grid - Это позволяет быстро создать гибкий и сложный макет.

Первая система создания интерфейса.

Система в Bevy, которая порождает UI-элемент, Node (Ноду).

Для начала, создаём систему default_layout(), в которой будет происходить создание странницы интерфейса.

Самое простое что можно сделать - это создавать одну сущность из UI-элементов, через метод spawn().

NodeBundle - Базовая нода пользовательского интерфейса. Полезен в качестве контейнера для множества дочерних UI-элементов, таких как Кнопка, Текст, Изображение.

Мы получили окно, которое изменила фон. Далее можно усложнять страницу, с помощью дочерних элементов.

Страница.

Страница интерфейса - Это одна сущность, к которой связаны другие сущности как дочерние.

1. Первый слой.

Порождение сущности

Контейнер NodeBundle, который мы уже создали, занимает 100% пространства страницы.

2. Второй и третий слой и т.д.

Порождение сущности и его дочерних сущностей.

У нас есть Главный элемент, у которого 2 дочерних элемента [1] и [2], у второго элемента, есть свои дочерние элементы [2.1] и [2.2].

3. Изменение Макета.

Родительский элемент, например NodeBundle с помощью Style, будет влиять на дочерние элементы на расположение, порядок, заполнения пространства, отступы.

Дочернему элементу достаточно указать размер, относительно родительского элемента.

Более подробно, изучим шаблон макета Flexbox (по умолчанию) или CSS Grid. тут, тут.

Для чего-то простого достаточно этого

4. Последний слой.

Пример

Последний элемент займет виджет. Если макет не видим (если не использовать фон), то виджет заполняет видимую область макета.
Это может быть кнопки, текст, изображение. а также другие страницы.