Системы координат и атрибут трансформации узла

В редакторе сцен и файлах узлов и компонентов мы представили, что мы можем изменить поведение отображения узла с помощью инструментов изменения и редактирования атрибутов узла на панели Properties. Мы узнаем в этом разделе больше о системе координат, где находится узел, и о принципах работы четырех атрибутов трансформации узла Position, Rotation, Scale и Size.

Системы координат Cocos Creator coordinates

Мы узнали, что мы можем установить атрибут position для узла, так где будет отображаться узел с определенным атрибутом позиции на экране, когда игра работает? Подобно карте в реальной жизни, мы можем управлять спутниковым позиционированием, используя как долготу, так и широту. Нам также нужно узнать о системе координат Cocos Creator, чтобы понять смысл позиционирования узла.

Декартова система координат

Система координат Cocos Creator точно такая же, как система координат cocos2d-x. Системы координат cocos2d-x и OpenGL возникли из декартовой системы координат. В декартовой системе координат начало правосторонней системы находится в левом нижнем углу с направлением x, идущим вправо, y идет вверх и z выходит наружу. Эта система координат, которую мы используем, называется декартовой правосторонней системой координат.

Система координат экрана и система координат cocos2d-x

Стандартная система координат экрана использует другую систему координат из OpenGL. Она сильно отличается от системы координат cocos2d-x.

Система координат, используемая при разработке приложений с родным SDK в iOS, Android, Windows Phone и других платформах, является стандартной системой координат экрана. Начало находится в верхнем левом углу экрана, а x идет вправо и y идет вниз.

Система координат cocos2d-x совпадает с системой координат OpenGL, начало координат находится в левом нижнем углу, а x идет вправо и y вверх.

Глобальные координаты и локальные координаты

Глобальная система координат также называется абсолютной системой координат. Это единая система координат для отображения пространства сцены во время разработки игры Cocos Creator. 「World」 используется для обозначения сцены в нашей игре.

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

Узлы в Cocos Creator могут иметь иерархическую структуру установленного членства. Позиция узла, которую мы изменили в настройке атрибута Position узла, - это локальные координаты относительно родительского узла, а не глобальные координаты. Наконец, при рисовании всей сцены Cocos Creator будет отображать локальные координаты этих узлов в глобальных координатах.

Чтобы определить режим функции системы координат для каждого узла, нам также необходимо понять концепцию якоря (anchor).

Якорь

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

Якорь выражается через anchorX и anchorY, которые являются коэффициентами умножения в диапазоне от 0 до 1. Они вычисляют положение якоря, используя размер узла. (0.5, 0.5) указывает, что якорь расположен в том месте, где длина и ширина узла умножаются на 0,5, то есть на центр узла.

Когда атрибут якорь задан как (0, 0), якорь расположен в начале локальных координат узла, то есть в левом нижнем углу кадра ограничения узла.

Локальные координаты дочернего узла

После определения положения якоря все дочерние узлы будут занимать положение якоря в качестве начала координат. Следует отметить, что это действие не то же самое, что действие по умолчанию в движке cocos2d-x; это особенность системы координат Cocos Creator!

Гипотетически, структура узла в сцене выглядит следующим образом:

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

1. Обработать каждый узел с корневого уровня сцены. NodeA в приведенном выше изображении является узлом корневого уровня. Сначала определите положение отображения и положение начала координат (то же, что и положение якоря) в соответствии с атрибутами Position и Anchor узла NodeA.
2. Затем обрабатывают все прямые дочерние узлы NodeA, т. е. NodeB и его одноуровневые узлы. В локальной системе координат узла NodeA определите положение узла NodeB в пространстве сцены и положение начала координат.
3. Независимо от того, сколько уровней у узлов есть, мы обрабатываем их все от самого высокого уровня до самого низкого. Каждый узел должен использовать координаты родительского узла и собственный атрибут позиции якоря для определения положения внутри пространства сцены.

Свойства трансформации

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

Позиция

Position состоит из x и y свойств, которые устанавливают координаты узла по осям x и y текущих координат.

NodeA в приведенном выше изображении находится на корневом уровне сцены. Его позиция (507, 354) (см. масштаб на фоне редактора сцены), положение его дочернего узла NodeC (345, 0). Вы можете видеть, что позиция дочернего узла была перенесена на якорь родительского узла.

Значение по умолчанию для свойства position (0, 0)означает, что вновь добавленный узел всегда будет отображаться в исходной позиции координат родительского узла. По умолчанию позиция узлов в Cocos Creator равна (0, 0), а якорь по умолчанию устанавливается как (0,5, 0,5). Узлы под этой настройкой по умолчанию будут располагаться в центральном положении родительского узла, чтобы все содержимое можно было использовать при создании пользовательского интерфейса или в комбинации персонажа игрока.

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

Вращение

Вращение - еще одно важное свойство, которое будет влиять на локальные координаты узла. Свойство rotate имеет только одно значение, указывающее текущий угол поворота узла. Когда значение угла положительно, узел вращается по часовой стрелке; когда значение угла отрицательное, узел вращается против часовой стрелки.

Иерархическая взаимосвязь узла в изображении выше такая же, как и в предыдущем изображении, только с атрибутом узла Rotation, установленным в 30 градусов. Как и сам NodeA, вращающийся на 30 градусов по часовой стрелке, его дочерний узел NodeC также поворачивается на 30 градусов по часовой стрелке, беря якорь NodeA в качестве центра.

В редакторе сцены вы всегда можете использовать инструменты поворота, чтобы изменить поворот узла.

Масштаб

Свойство Scale представляет собой набор коэффициентов умножения, которые состоят из scaleX и scaleY, чтобы представить процентное соотношение масштаба узла по осям x и y.

Свойство масштабирования NodeA в приведенном выше изображении задается как (0,5, 1,0). Это означает, что узел уменьшается в 0,5 раза по оси x и остается неизменным на оси y. Вы можете видеть, как изображение его дочернего узла NodeC также уменьшается по оси x, поэтому свойство scale будет влиять на все дочерние узлы.

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

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

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

Размер

Свойство Size состоит из Width и Height, чтобы указать размер кадра ограничения. Для узла Sprite размер кадра ограничения - это размер отображаемого изображения.

Поэтому свойство size можно легко спутать со свойством scale. Они оба могут влиять на размер изображения Sprite, но они влияют на него по-разному. Свойство size вместе с положением и якорем регулирует четыре конечных положения узла и определяет диапазон отображения изображений ограничений этих четырех точек в соответствии с его результатом. Свойство size играет важную роль в рендеринге нарезанных Sliced Sprite.

Между тем, свойство scale получает ширину и высоту узла после масштабирования на основе умножения значения размера. При определении размера изображения размер является основой, а масштаб - переменной, так сказать. Кроме того, свойство size не влияет на размер дочернего узла (но может оказывать косвенное влияние через Widget), что сильно отличается от свойства scale.

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