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 долларов в месяц

Часть 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