Game Developer и WEB. Знакомство с Phaser

Доброго времени суток! Прежде чем читать данную статью позволь мне задать тебе несколько вопросов. Нравится ли тебе игры? Играешь ли ты в них? Мечтал ли ты когда нибудь написать свою собственную игру? Уже несколько лет я переодически пишу игры ( в основном на JS ). Игры для мобильных приложений, игры для браузеров, десктопные игры. Я не являюсь профессиональным разработчика игр, данное занятие это мое хобби в не рабочее время.

В данной статье я хочу немного поговорить о базе начинающего game developer’a. Пройтись по структуре создания игры. И вкратце поговорить о выборе фреймворка для разработки игр в web. Поехали.

Game Developer

Данное понятие в наше время очень обширно. Игры могут быть как коммерческими, созданные большими коллективами с огромным бюджетом и возможностями, так и одним человеком ( как правило их называют  инди-разработчиками ). Разработчик может быть как программистом так и дизайнором, креативным композитором, специалистом по звуку и т.д. Все эти специальности включают в себя понятие game developer

Phaser

На данный момент имеется большое количество опенсорсных движков, фремворков для разработки любит игр для браузером. Все движки делятся на два типа по поддерживавию графики. Это 2D и 3D. В данной статье я буду говорить о движках заточенных в первую очередь под 2D рендеринг графики. Во всех этих движках можно выделить такие как Construct 2, ImpactJS, EaselJS, Phaser, pixi.js. Среди тех которых я исползала наиболее простой и гибкий является Phaser. Почему Phaser? Он беспалтный, опенсорсный, имеет огромное комьюнити, а так же прекрасную документацию  с большим количеством примеров. В общем, рекомендую) 

Структура создания игры

Создание любой игры начинается с идеи. Чем круче идея тем больше вероятность того что игра будет признана большим количеством людей и обречена на успех.

Когда мы говорим о разработки на фреймворке Phaser то создание любой игры можно условно разбить на несколько этапов.

1.  Отрисовка игры на Canvas

Первое что нужно сделать это инициализровать нашу игру ( начальную сцену в браузере). Что бы в дальнейшем мы могли рендерит нудные объекты на canvas.

2. Загрузка необходимых файлов ( картинки, звуки и т.д.)

Загружаем все необходимые файлы которые мы будем использовать в самой игре. Например фон неба, части земли, изображение главного персонажа, враги, части интерефейса и т.д.

3. Анимирование объектов

Здесь следует получить все необходимые анимации для объектов что бы игра стала более динамической и привлекательной для игрока.

4. Отслеживание клавиатуры и мыши

События персонажа, мехика движений и управления персонажей одна из самых интересных и более сложных задач в разработки. Здесь нужно продумать как будет вести себя объекты при движении.

5. Проигрывание звуков

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

6. Создание физики

Физика в играх это наиболее сложная часть. Продумать как должны вести себя игровые объекты, описать случаи их столкновения ( коллизии ) и их последствия для игрового процесса.

7. Управление сценами

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

Заключение

Сегодня я постарался дать вам направление в понимание общей структуры создания любой игры на базе фремворка Phaser. Немного моих размышлений на тему game developer. В следующих статьях я буду касаться уже практической составляющей работы с самим Phaser на конкретных примерах разработки игр. Оставляйте свои комментарии в описании к статье. Если у вас есть предложения по теме следующей статьи то пиши их тоже. Удачно вам покодить)

Полезные материалы

Официальный сайт https://phaser.io/

Статистика по веб движкам игр https://html5gameengine.com/

Форум для разработчиков игр в вебе http://www.html5gamedevs.com/