HTML5 Phaser ECMAScript 6

Часть 32: GIF игрового процесса и ошибки проектирования

Я сдержал свои обещания и рассказал вам про программы и утилиты которые использовал при разработке. Осталось только рассказать вам еще про Git (не стоит его путать с GitHub). Git был изобретен еще в 80-ые, а GitHub это красивая разрекламированная ПЛАТНАЯ обертка. Git можно за несколько минут настроить на своем сервере бесплатно. На GitHub нет ничего,…

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

Часть 30: onTap который не срабатывает при swipe жесте

После решения проблемы с событиями, я приступил к реализации события onTap. Погуглимв немного я нашел, что Phaser его реализовал, но не для объектов, а для сцены: game.input.onTap. Этот недостаток мне удалось очень просто устранить. Достаточно в обработчик события onTap добавить проверку координат нажатия: Такое решение работает, если пользователь прокручивает список более 500 миллисекунд. Но на…

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

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

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

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
HTML5 Phaser ECMAScript 6

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

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

Continue Reading
HTML5 Phaser ECMAScript 6

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

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

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