HTML5 Phaser ECMAScript 6, Утилиты и Программы

Часть 27: Конвертация SVG в PNG и Image Resize

Скелет игры готов: главное меню, экран с выбором уроков, непосредственно сцена с игрой (изучения слов) и отображение результата урока (level complete). Кстати, именно он мне подсказал, что в моей диаграмме рассчета баланса игры допущена одна ошибка. Изначально я планировал давать за урок от 4 до 8 монеток, но у этого плана есть недостатки: 1) Это…

Continue Reading
HTML5 Phaser ECMAScript 6

Часть 26: Закончена игровая сцена изучения слов

Мне очень хотелось показать вам полнофункциональную модель игровой сцены. С одной стороны, я сдержал слово и все, что у меня было запланировано я успел сделать. Но с другой стороны, я мог еще закончить сцену с результатами урока, у меня даже были целые сутки на это НО… Вчера с утра начал по немного разгружать TODO лист…

Continue Reading
Phaser - полезные советы

Часть 25: Хранение состояния игры в самих объектах

Создание игры в framework-е требует смену мышления. Для примера я возьму принцип хранения данных в играх. При проектировании не игровой программы, вы храните данные в базе, массивах и сложных структурах. А ваша задача, написать код, который будет манипулировать этими данными и выводить результат на экран, обрабатывать входящие события (то рекомендую почитать о MVC модели проектирования…

Continue Reading
Phaser - полезные советы

Часть 24: Как реализовать overflow:hidden в Phaser

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

Continue Reading
Phaser - полезные советы

Часть 23: Полезные свойства Tween анимации

Как оказалось, в Phaser довольно продуманный механизм реализации анимации. Но есть ряд недостатков, оригинальное решение которых я пока не нашел. Вот некоторые фишки которые мне понравились больше всего: Два типа цепочки анимации Используйте цепочка анимациq в случае если вы хотите последовательно анимировать разные свойства объекта. Но если анимировать нужно одно и тоже свойство но несколько…

Continue Reading
Phaser - полезные советы

Часть 22: Все что надо знать о классе Group в Phaser

Написать игру не использовав Phaser.Group невозможно. Но перед тем как вы решили им воспользоваться, важно знать его возможности и особенности. Изначально я воспринимал Phaser.Group как div блок в HTML, который не только хранит в себе элементы, но сам является физическим объектом. На самом деле, Group это структура данных, список элементов над которыми можно одновременно проводить…

Continue Reading
HTML5 Phaser ECMAScript 6

Часть 21: Последовательная tween анимация карточек

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

Continue Reading
HTML5 Phaser ECMAScript 6

Часть 20: Подготовка данных для игровой сцены

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

Continue Reading
HTML5 Phaser ECMAScript 6

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

Часть 34: Как разбить код и бесплатная альтернатива TexturePacker — ShoeBox Часть 33: Как быстро создавать элементы интерфейса в игре Часть 32: GIF игрового процесса и ошибки проектирования Часть 31: Создание аудио спраита программой audiosprite Часть 30: onTap который не срабатывает при swipe жесте Часть 29: Неверное событие onInputUp при scale=0 Часть 28: Создание атласа…

Continue Reading
HTML5 Phaser ECMAScript 6

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

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

Continue Reading