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