Uncategorized

Часть 13: Позиционирование элементов aling, alignTo, alignIn

Впервой версии Game.js все элементы интерфейса были расположены на фиксированных координатах. А мне хотелось по возможности динамичности! Я начал думать о создании класса на базе Phaser.Group, у которого была бы возможность располагать все child (помогите с переводом этого термина) равномерно, как например flex в css3. Вот тут я чуть не изобрел велосипед. Опыт заставил перепроверить…

Continue Reading
HTML5 Phaser ECMAScript 6

Часть 12: Редкаторы сцен для Phaser и как их не надо создавать

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

Continue Reading
HTML5 Phaser ECMAScript 6

Часть 11: Обрезка спраита sprite.crop и tween анимация прогресса (шаг 2)

Настоятельно рекомендую прочитать 10 часть, где я подробно разобрал сложности сделать prefeb на базе sprite и обнаружил, что group как нельзя лучше подходит по эти цели. После создания группы, расположение спрайтов в нужной последовательности на заведомо известных координатах задача тривиальная. Главное тут учесть вот такой момент. После добавления в группу новых спраитов, размер (ширина и…

Continue Reading
HTML5 Phaser ECMAScript 6

Часть 10: Создаем свой prefeb/компонент в Phaser (шаг 1)

В предыдущем посте мы в месте разобрали Boot.js и Preload.js. Перед тем как приступить к разбору следующей Game сцены, я хотел бы вас познакомить с понятием prefeb, цель которых упростить разработку игры. prefeb это часть интерфейса с набором функций. Лучшим аналогом в HTML-е будет элемент select. Он состоит из: текстового поля, кнопки открытия списка, списка…

Continue Reading
HTML5 Phaser ECMAScript 6

Часть 9: Игровые сцены в Phaser и зачем они нужны

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

Continue Reading
HTML5 Phaser ECMAScript 6

Часть 8: Как увеличить доход в игре вводом валюты

Сегодня я должен был описать как работает Phaser, но есть весомая причина почему я воспользовался пидстопом. Я скачал себе на мобильный игру Tower to Space Clicker Idle. Особенность этой игры в том, что я просмотрел три рекламных ролика, пока разобрался как в нее играть. А за вечер я добровольно просмотрел рекламу 8 раз (экономил расходы…

Continue Reading
HTML5 Phaser ECMAScript 6

Часть 7: Сборка игры на Phaser: grunt, browserify, babel

Я знаю об отрицательном воздействии (на производительность) большого количества JavaScript файлов. Поэтому, я использую утилиту Browserify, которая все мои файлы будет собирать в один. Шестая версия JavaScript-а пока не поддерживается всеми браузерами, по этому на помощь нам приходит утилита Babel, которая переводит код из 6 в 5 версию. А что бы все это автоматизировать, мы…

Continue Reading
HTML5 Phaser ECMAScript 6

Часть 6: Как создать одну игру для Android и iOS

Я всегда уделяю большое внимание подготовке рабочего места. Очень важно, иметь возможность увидеть результат внесеных изменений в считанные секунды. Для разработки игры я решил воспользоваться grunt утилитой. На ее конфигурацию у меня ушло несколько дней, но потраченное время оправдало себя и вы в этом сами убедитесь. Игра разработанная на HTML и JavaScript гарантирует ее работоспособность…

Continue Reading
HTML5 Phaser ECMAScript 6

Часть 5: Как плавно влить игрока в процесс игры

Мне очень понравился термин «порог входа» — насколько плавно игрок вливается в процесс игры. Это очень важный момент не только в игре но и в любом сервисе. Например в моей игре я заметил, что пользователь сразу не понимает, что сверху у него вопрос, а ниже пять возможных ответов и он должен выбрать правильный. Конечо, после…

Continue Reading
HTML5 Phaser ECMAScript 6

Часть 4: Три этапа разработки игры

Давайте представим проект из трех логических частей: идея, цели и сам процесс. С идеей у нас все понятно, переходим сразу к цели. Если смотреть на первую версию моей игры с этой перспективы, сразу понятно, она была обречена. Мне казалось я исправил эту ошибку во второй версии, добавив цель «вскрытия новых уровней», но Элспер рекомендует иметь…

Continue Reading