HTML5 Phaser ECMAScript 6, Phaser - полезные советы

Часть 29: Неверное событие onInputUp при scale=0

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

Continue Reading
Утилиты и Программы

Часть 28: Создание атласа изображений TexturePacker

Разумно найти готовое решение создания атласа изображений и возобновить работу над игрой. Таким готовым решением оказалась программа TexturePacker. Ее можно использовать бесплатно, но есть и платный вариант, с дополнительными функциями. Цена платной версии не большая, исходя из расчета, что это одноразовое вложение, а планы не ограничиваются созданием одной игры. Пока я решил не покупать лицензию,…

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