HTML5 Phaser ECMAScript 6

Публичная разработка обучающей игры с целью заработать 1000 долларов в месяц

Часть 39: Динамическая работа с графикой на низком уровне Часть 38: Отчет за октябрь и игра Language Learning Flashcards Часть 37: Сцена правописания готова и рассуждения о «достижениях» в игре Часть 36: Мини игра «Правда или Ложь» за один день! Часть 35: Динамическая формула роста награды за уровень (очков) Часть 34: Как разбить код и…

Continue Reading
HTML5 Phaser ECMAScript 6

Часть 19: Анимация видимого элемента и польза ООП

Как вы уже заметили, всю логику игры я разбиваю на элементы интерфейса. У меня нет необходимости держать весь код программы в памяти, достаточно решать мелкие задачи, а после собирать все в одну большую рабочую машину. Но ООП имеет еще и другое преимущество. Как вы помните, метод createFromObjects() только подготавливал объекты, а реальное создание происходило в…

Continue Reading
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