Game Developer и WEB. Знакомство с Phaser
Доброго времени суток! Прежде чем читать данную статью позволь мне задать тебе несколько вопросов. Нравится ли тебе игры? Играешь ли ты в них? Мечтал ли ты когда нибудь написать свою собственную игру?
Уже несколько лет я переодически пишу игры ( в основном на JS ). Игры для мобильных приложений, игры для браузеров, десктопные игры. Я не являюсь профессиональным разработчика игр, данное занятие это мое хобби в не рабочее время.
В данной статье я хочу немного поговорить о базе начинающего game developer’a. Пройтись по структуре создания игры. И вкратце поговорить о выборе фреймворка для разработки игр в web. Поехали.
Game Developer
Данное понятие в наше время очень обширно. Игры могут быть как коммерческими, созданные большими коллективами с огромным бюджетом и возможностями, так и одним человеком ( как правило их называют инди-разработчиками ). Разработчик может быть как программистом так и дизайнором, креативным композитором, специалистом по звуку и т.д. Все эти специальности включают в себя понятие game developer
Как работает фэйзер (phaser), что это такое
Phaser
На данный момент имеется большое количество опенсорсных движков, фремворков для разработки любит игр для браузером. Все движки делятся на два типа по поддерживавию графики. Это 2D и 3D. В данной статье я буду говорить о движках заточенных в первую очередь под 2D рендеринг графики.
Во всех этих движках можно выделить такие как Construct 2 , ImpactJS , EaselJS , Phaser , pixi.js . Среди тех которых я исползала наиболее простой и гибкий является Phaser. Почему Phaser? Он беспалтный, опенсорсный, имеет огромное комьюнити, а так же прекрасную документацию с большим количеством примеров. В общем, рекомендую)
Структура создания игры
Создание любой игры начинается с идеи. Чем круче идея тем больше вероятность того что игра будет признана большим количеством людей и обречена на успех.
Когда мы говорим о разработки на фреймворке Phaser то создание любой игры можно условно разбить на несколько этапов.
1. Отрисовка игры на Canvas
Первое что нужно сделать это инициализровать нашу игру ( начальную сцену в браузере). Что бы в дальнейшем мы могли рендерит нудные объекты на canvas.
2. Загрузка необходимых файлов ( картинки, звуки и т.д.)
Загружаем все необходимые файлы которые мы будем использовать в самой игре. Например фон неба, части земли, изображение главного персонажа, враги, части интерефейса и т.д.
3. Анимирование объектов
Здесь следует получить все необходимые анимации для объектов что бы игра стала более динамической и привлекательной для игрока.
4. Отслеживание клавиатуры и мыши
События персонажа, мехика движений и управления персонажей одна из самых интересных и более сложных задач в разработки. Здесь нужно продумать как будет вести себя объекты при движении.
5. Проигрывание звуков
Игра станет более приятной когда проявятся звуки. На начальном этапе можно их не использовать, но в дальнейшем для придания нужной атмосферы она обязательно понадобятся.
Урок по Java 86: Многопоточность 21: Phaser
6. Создание физики
Физика в играх это наиболее сложная часть. Продумать как должны вести себя игровые объекты , описать случаи их столкновения ( коллизии ) и их последствия для игрового процесса.
7. Управление сценами
Каждая игра имеет несколько сцен. Начало игры, предыстория ( необязательна ), основная часть ( здесь проходить основное процесс игры ), заключение ( выиграл или прошивал ). Каждая сцена связывается на прямую с идеей игры и общим ее стилем.
Заключение
Сегодня я постарался дать вам направление в понимание общей структуры создания любой игры на базе фремворка Phaser. Немного моих размышлений на тему game developer. В следующих статьях я буду касаться уже практической составляющей работы с самим Phaser на конкретных примерах разработки игр. Оставляйте свои комментарии в описании к статье. Если у вас есть предложения по теме следующей статьи то пиши их тоже. Удачно вам покодить)
Источник: webtricks-master.ru
Phaser что это за программа
Приведенный выше код будет перемещать препятствие1 вниз по экрану и препятствие2 по игровой области на 4 пикселя за каждый кадр. Когда квадрат выходит за пределы экрана, он перемещается обратно на противоположную сторону в новое случайное место. Это гарантирует, что у игрока всегда будет новое препятствие.
Обнаружение столкновений
Но мы еще не закончили. Вы могли заметить, что наш игрок может проходить сквозь препятствия. Нам нужно заставить игру обнаруживать, когда игрок сталкивается с препятствием, и завершать игру.
В библиотеке физики Phaser есть детектор коллайдеров. Все, что нам нужно сделать, это инициализировать его в функции создания.
this.physics.add.collider(gamePiece, obstacle1, function(gamePiece, obstacle1)gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
>);
this.physics.add.collider(gamePiece, obstacle2, function(gamePiece, obstacle2)gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
>);
Метод коллайдера требует трех параметров. Первые два параметра определяют, какие объекты сталкиваются. Итак, выше мы установили два коллайдера. Первый обнаруживает, когда игровой элемент сталкивается с препятствием1, а второй коллайдер ищет столкновения между игровым элементом и препятствием2.
Третий параметр сообщает коллайдеру, что делать, когда он обнаруживает столкновение. В этом примере есть функция. При столкновении все игровые элементы уничтожаются; это останавливает игру. Теперь игрок завершит игру, если столкнется с препятствием.
Попробуйте разработку игр с Phaser
Есть много разных способов улучшить и сделать эту игру более сложной. Мы создали только одного игрока, но можно добавить второго игрового персонажа и управлять им с помощью элементов управления «awsd». Точно так же вы можете поэкспериментировать с добавлением дополнительных препятствий и изменением скорости их движения.
Это введение поможет вам начать работу, но еще многое предстоит узнать. В Phaser замечательно то, что большая часть игровой физики сделана за вас. Это отличный простой способ начать разрабатывать 2D-игры. Продолжайте развивать этот код и улучшать свою игру.
Если вы столкнетесь с какими-либо ошибками, отладчик вашего браузера — отличный способ обнаружить проблему.
Как использовать Chrome DevTools для устранения проблем с веб-сайтом
Узнайте, как использовать встроенные инструменты разработки браузера Chrome для улучшения своих веб-сайтов.
Об авторе
Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)
Источник: okdk.ru