Дерево узлов и порядок рендеринга

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

Знакомство с панелью Дерево узлов

При создании и позиционировании узлов в панели Сцена вы получаете удобство редактирования в стиле WYSIWYG. В то время как Дерево узлов предоставляет организованное древовидное представление, где вы можете легко выбирать и упорядочивать узлы независимо от того, являются ли они большими, маленькими или невидимыми. Пожалуйста, прочтите Дерево узлов, чтобы узнать основную инструкцию интерфейса.

Дерево узлов (График сцены)

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

Вы можете прочитать главу Основная концепция руководства по программированию в cocos2d-x, она очень хорошо описывает дерево узлов с некоторыми изображениями ниже.

Вот простая игровая сцена с фоновым изображением, 3 персонажами, текстом и кнопкой запуска игры:

Каждый визуальный элемент является узлом, когда дело доходит до разработки игры, мы обычно не помещаем все узлы в сцену, а упорядочиваем их в соответствии с их категорией и порядком визуализации.

Каждые из двух узлов, связанных стрелкой, имеют отношения родитель-потомок. Мы называем верхний родителем, а нижний - ребенок. Этот график выглядит так на панели дерева узлов:

Мы используем родительские узлы для хранения похожих узлов вместе. В реальных проектах у нас есть еще много вариантов, которые могут соответствовать конкретным потребностям. Давайте рассмотрим детали отношений родитель-ребенок и как их использовать в реальном проекте.

Локальная система координат для узла

В предыдущем разделе Локальная система координат мы поняли, что одной из ключевых особенностей родительских отношений является преобразование дочернего узла в локальную систему координат.

Начало глобальной системы координат находится в нижней левой части экрана. Если родительских отношений нет, и все узлы используют Глобальные координаты, когда мы хотим, чтобы два узла были в центре фонового узла, у нас будут такие координаты:

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

Теперь давайте получим помощь от локальной системы координат, перетащите наши два персонажных узла под родительским узлом, теперь их свойство Position будет выглядеть так:

Поскольку якорная точка родительского узла находится в точке (0,5, 0,5) (ее центр), локальная система координат использует центр как начало. Позиция двух персонажных узлов становится (-100, 0) и (100, 0). Очень легко получить относительное положение между этими двумя узлами и фоновым узлом. Сделайте его более дружелюбным к дизайнеру. Также легче получить положение заднего края фона, например, правая часть x позиции основного родительского узла будет (parentNode.width / 2, 0).

Если мы хотим, чтобы несколько узлов перемещались / масштабировались / вращались в целом, родительские дочерние отношения позволяют нам заботиться только о преобразовании родительского узла. На изображении ниже показано применение преобразования масштаба и вращения на родительском узле, после чего последуют дети.

В реальном игровом проекте у нас будет много персонажей из комбинированных узлов. Давайте посмотрим, как мы можем управлять нашим деревом узлов на основе логики.

Управление узлами по логической категории

Ниже это типичный герой-персонаж, состоящий из нескольких узлов:

У нас есть компонент Sprite и Animation на узле body, чтобы контролировать основной визуальный внешний вид персонажа. Спрайт тени нужно отображать под другими персонажами, поэтому мы выделяем это как узел тени. Наконец, в игровой хитпоинт UI есть собственная группа узлов, родительский узел называется HPBar.

Это типичный случай организации дерева узлов на основе логики. Мы можем контролировать body, чтобы воспроизводить анимацию и переворачивать, как мы хотим; мы можем обновить HPBar на основе текущего хитпоинта; их взаимный родительский player, используемый для управления движением персонажа, и может быть вставлен как группа в другой слой или сцену.

Управление порядком рендеринга

В приведенном выше примере давайте обратим внимание на порядок body и узла shadow в панели Дерева узлов и их фактический порядок визуализации в панели Сцена. Движок отобразит все узлы в соответствии с порядком в Дереве узлов, сверху вниз. Так что узел внизу будет нарисован поверх узла сверху.

В родительском дочернем отношении родительский узел всегда находится сверху, поэтому дочерний узел будет отображаться последним. Вот почему мы делаем отдельный узел body в примере, чтобы мы могли указать точный порядок shadow и body.

Оптимизация подсчета узлов

Обратите внимание, хотя удобно использовать родительский узел в качестве контейнера для группировки других узлов, но общее количество узлов в сцене будет влиять на время инициализации дерева узлов. Мы должны избегать добавления ненужных узлов только для того, чтобы «держать вещи организованными». Постарайтесь объединить функции нескольких узлов на столько, на сколько сможете.