HTML5 Phaser ECMAScript 6

Часть 14: Роковая ошибка, разница между sprite.left и sprite.x

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

Для сцены меню я написал класс анимации по принципу плагина, который в одном из постов мне посоветовал ВитринныйКапчеРобот. Теперь я могу одной строчкой эффектно вводить или выводить элемент со сцены или даже автоматизировать методом toggle (как это делает в jQuery):

object_slide.toggle('right', 1500, Phaser.Easing.Exponential.Out);

Также я начал работу над новой сценой — выбор урока. Но пока не могу придумать куда разместить панель с силой (если у вас есть идеи, пишите в комментарии). В новой сцене я также решил попробовать сделать элементы не на базе Phaser.Group() а Phaser.Sprite().

сцена с выбором урока

Мне удалось сделать составную панель на базе Phaser.Sprite(), а также анимировал ее иконку. Странно, что логика создания составного элемента не изменилась. Мне пока не совсем понятно, когда надо использовать Sprite, а когда Group (хотя есть различия в методах).

В меню у меня три панели: очков, сердечек и времени. При смене числового значения, иконка пульсирует. Пульсация с увеличением или уменьшением размера, в зависимости от направления изменений (увеличилось или уменьшилось число). Мне кажется такая анимация должна привлечь внимание игрока и подсказать ему: потерял он или заработал сердечко.

выравнивание элементов по горизонтали

Причиной внеплановой публикации поста стала необходимость «изобрести» велосипед, от изобретение которого я отказался в прошлом посте =) Причиной тому послужило разнообразие элементов нового меню. У каждого элемента свой размер, а значит использование равномерной таблицы метода alignt() не даст нужных результатов. Я написал класс, который по аналогии flex из css3, аккуратно выравнивает все элементы методами: start, end, center, between, around, evenly.

вертикальное выравнивание элементов

Позже подумал, раз мне удалось сделать align() метод, почему не поправить alignIn() и alingTo(), а исправлять было что. Мой метод align() выравнивал элементы по горизонтали и вертикали в заданном виртуальном прямоугольнике. Из за этого, по краям (слева, сверху, справа и снизу) появились невидимые отступы. Но методы alignIn() и alignTo() не собирались признавать эти отступы.

Если еще игнорирование правого или нижнего отступа я мог понять, то совсем не понятно было игнорирование левого и верхнего. Ведь первый элемент группы слева и сверху не имел нулевые координаты! Благодаря вот этой странности, я разобрал какая разница между x, y и left, top свойствами (а они могут сыграть злую шутку). Первые являются чистыми координатами элемента, а вторые уже расчетными (тут не только anchor, но и тот же bounds).

Теперь давайте посмотрим на наш пример. При позиционировании методами alignIn() и alignTo(), используется именно left/top/right/bottom свойства элемента. А для группы это значит вызов метода getBounds(), который сдвигает все наши элементы в координату 0х0. Вот почему мы теряем левый и верхний отступ =)

красным цветом обозначен наш виртуальный прямоугольник, в котором мы выровняли три кнопки по горизонтали, зеленым — реальный bounds Phaser-а; ниже предполагаемое выравнивание по левому верхнему углу, против реального.

Можно конечно перемещать свою группу через x, y координаты. Но остается не решенным задача определения реальный размеров и координат другого элемента, относительно которого мы выравниваем нашу группу (использовать x или left). Говоря совсем просто, Phaser не имеет поддержки margin. Нет даже возможности задать bounds() для группы. Теоретически у спраитов, для которых включена физика можно задать любой размер и даже сложности bounds()… но что-то мне подсказывает, что я совсем не на правильном пути.

Надо возвращаться к фиксированным координатам. А хорошая новость в том, что я смог создать кнопку/панель на базе спраита… это дает второй шанс программе Tiled. Завтра буду создавать карту сцены, посмотрим что из этого выйдет =)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *