HTML5 Phaser ECMAScript 6

Часть 18: Прокрутка с инерцией и резиновым стартом

Для реализации прокрутки с инерцией надо было подсчитать скорость swipe жеста. А для этого нужно расстояние и время. Расстояние это дельта, а вот продолжительность нажатия храниться в свойстве input.activePointer.duration: Как только палец отжат, я высчитываю скорость и прокручиваю на расстояние, эквивалентное расстоянию которое пользователь успел бы прокрутить не отпустив палец еще 300 миллисекунд (число подобрал…

Continue Reading
HTML5 Phaser ECMAScript 6

Часть 17: Реализация swipe жеста и равномерная прокрутка

Сегодня я хочу вам рассказать о том, как решил задачу плавной прокрутки swipe жестом. Перед тем как начинать решать задачу, надо что бы на сцене было достаточно контента, а это, 80 кнопок уроков. Конечно их можно было расположить программно (процедурная генерация интерфейса), но мне надо было привыкать к Tiled редактору сцен. Вся работа заняла не…

Continue Reading
HTML5 Phaser ECMAScript 6

Часть 16: Tiled и генерация кнопки тремя строчками (шаг 2)

Разбирая как работает метод createFromObjects() в исходниках, я обратил внимание, что класс, который ему передается не обязательно делать на базе Sprite =) Также я определил, что числовое значение спраита можно заменить на имя объекта (это улучшало читабельность кода). А так как первые 3 параметра (game, x, y, которые использует createFromObjects() при создании объекта) подходят для…

Continue Reading
HTML5 Phaser ECMAScript 6

Часть 15: Используем карту Tilemap для интерфейса (шаг 1)

Начну пост с позитивной ноты — мне удалось создать интерфейс сцены с помощью Tiled редактора. Кому нетерпится посмотреть на результат, последний вариант игры тут. Сложность не заключалась в использовании tilemap для генерации интерфейса. Надо было все сделать так, что бы визуальное редактирование сцены не требовало изменений самого кода. Получилось сделать это не сразу, от части…

Continue Reading
HTML5 Phaser ECMAScript 6

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

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

Continue Reading
HTML5 Phaser ECMAScript 6

Часть 13: Позиционирование элементов aling, alignTo, alignIn

Впервой версии Game.js все элементы интерфейса были расположены на фиксированных координатах. А мне хотелось по возможности динамичности! Я начал думать о создании класса на базе Phaser.Group, у которого была бы возможность располагать все child (помогите с переводом этого термина) равномерно, как например flex в css3. Вот тут я чуть не изобрел велосипед. Опыт заставил перепроверить…

Continue Reading
HTML5 Phaser ECMAScript 6

Часть 12: Редакторы сцен для Phaser и как их не надо создавать

На момент написания этого поста, я уже два раза кардинально обновил содержимое Game.js файла. Но не смотря на то, что пост будет опираться на его последнюю версию, я упомяну все мои неудачные попытки решить ту или иную задачу, что бы вы в будущем не повторили их. Перед тем как начинать разработку интерфейса программы, я нашел…

Continue Reading
HTML5 Phaser ECMAScript 6

Часть 11: Обрезка спраита sprite.crop и tween анимация прогресса (шаг 2)

Настоятельно рекомендую прочитать 10 часть, где я подробно разобрал сложности сделать prefeb на базе sprite и обнаружил, что group как нельзя лучше подходит по эти цели. После создания группы, расположение спрайтов в нужной последовательности на заведомо известных координатах задача тривиальная. Главное тут учесть вот такой момент. После добавления в группу новых спраитов, размер (ширина и…

Continue Reading
HTML5 Phaser ECMAScript 6

Часть 10: Создаем свой prefab/компонент в Phaser (шаг 1)

В предыдущем посте мы в месте разобрали Boot.js и Preload.js. Перед тем как приступить к разбору следующей Game сцены, я хотел бы вас познакомить с понятием prefeb, цель которых упростить разработку игры. prefeb это часть интерфейса с набором функций. Лучшим аналогом в HTML-е будет элемент select. Он состоит из: текстового поля, кнопки открытия списка, списка…

Continue Reading
HTML5 Phaser ECMAScript 6

Часть 9: Игровые сцены в Phaser и зачем они нужны

Для того что бы начать создавать игры с помощью Phaser, надо понимать как они устроены. Тема довольно большая, по этому я расскажу только самое необходимое для старта. Разбираться в деталях мы будем по мере продвижения. Лучше всего игру представить как спектакль из нескольких действий. По мере развития сюжета, одна сцена заменяется другой. Это очень практично,…

Continue Reading