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