В прошлый четверг HackDavis сотрудничал с Game Development & Arts Club @ UC Davis и провел семинар о том, как сделать игру с помощью Javascript-фреймворка Phaser. Ниже приведены некоторые ключевые факты и концепции, которые мы использовали при создании игры.
Что такое Фазер?
Phaser — это игровой фреймворк Javascript, набор полезных библиотек и функций, используемых для создания игры. Это один файл Javascript, и для его использования нужно просто включить его в сценарий, который они пишут. Чтобы использовать Phaser, мы создаем игровой объект с тремя функциями: preload(), create() и update() (объяснено ниже), которые Phaser вызывает для запуска игры.
Почему Фазер?
В большинстве случаев игры создаются с помощью игровых движков (таких как Unity или Unreal Engine 4) или игровых фреймворков (таких как libGDX или Phaser). Мы решили использовать Phaser, потому что не было длительной загрузки, а был только один JS-файл. К тому же нет необходимости собирать под разные операционные системы игру с JS, так как браузер для запуска игры есть у всех.
Ключевые идеи
Игровой цикл
Все игры следуют приведенной ниже диаграмме, и игровые фреймворки структурированы соответствующим образом.
Этап «старт» — это открытие игры, этап «загрузка» — загрузка изображений и аудиофайлов, этап «инициализация» — инициализация переменных, этап «цикл» — запуск игры, этап « выход» этап, когда игра закрыта. Загрузка, инициализация и цикл соответствуют функциям Phaser «предварительная загрузка, создание и обновление», которые вызываются фреймворком.
Выровненные по осям ограничивающие рамки
Простая система обнаружения столкновений между объектами в игре — предоставление им «ограничивающих рамок, выровненных по осям» или AABB. Границы этих прямоугольников обычно являются внешними границами спрайта объекта (или «изображения, которое его представляет»), как показано ниже с уткой. Обнаружить коллизии так же просто, как проверить, не перекрываются ли два поля.
Группы
Группы — это просто форма синтаксического сахара. Если один объект одинаково реагирует на многие другие объекты (например, космический корабль, поражающий лазером, или водопроводчик, собирающий монету), другие объекты можно поместить в «групповой» объект. При обнаружении коллизий, вместо перебора каждого объекта в цикле, многие фреймворки позволяют проверять коллизии между одним объектом и группой, сокращая код, как в строке, показанной ниже (игрок — это объект, а itemGroup — это группа предметов коллекционирования). .
Инструменты
Поскольку браузеры ограничивают загрузку локальных файлов, таких как активы, для тестирования игры обычно приходится использовать веб-сервер. Чтобы обойти это, рекомендуется скачать текстовый редактор Brackets, который запускает веб-сервер для обслуживания игры. Кроме этого, все, что нужно, это браузер для запуска игры.
Игра
Мы сделали простую игру, состоящую из одного объекта игрока и одной группы коллекционных объектов. Игрок перемещается с помощью клавиш со стрелками, и когда он сталкивается с членом группы предметов, предмет «убивается» (встроенная функция Phaser), а счет увеличивается на 10. Расширения этой игры могут включать добавление начальный экран, добавление ограничения по времени или добавление элементов, которых следует избегать.
Ресурсы
Семинар, написанный Сэмом, президентом Клуба разработчиков игр.
Следите за новостями от HackDavis! Поставьте лайк нашей странице в Facebook facebook.com/HackDavis и следите за нами в Twitter по адресу @hack_davis. Заинтересованы в подаче заявки / спонсорстве? Перейдите на hackdavis.io для получения более подробной информации.
