Настройка проекта с phaser.js
Phaser - это удивительная платформа, которая делает создание игр очень простым, вместе с поддержкой физики, и она достаточно популярна, чтобы вы могли найти плагины и инструменты для создания игр (один из таких примеров - мой туториал для создания клона игра с динозавром).
Phaser основан на технологиях HTML5, что означает, что вы можете создавать игры, которые можно распространять на веб-страницах, а также упаковывать в виде настольных или мобильных приложений, если хотите.
Программирование игр - большая тема, и в этом введении я хочу поговорить об основах, которых будет достаточно для создания простых игр.
В этом уроке я хочу подробно описать оптимальную настройку, чтобы начать создавать игру с использованием Phaser 3.
Для начала давайте создадим проект и установим phaser при помощи npm:
npm init -y npm install phaser
Теперь давайте настроим Parcel для сборки нашей игры:
npm install -g parcel-bundler
Теперь создайте src/game.js файл с таким содержимым:
import Phaser from 'phaser'; new Phaser.Game();
parcel watch src/game.js
после этого Parcel упакует наш код в game.js файл.
Теперь создайте шаблонный index.html файл с таким содержимым:
<!DOCTYPE html>
<html>
<head>
<script src="./dist/game.js"></script>
</head>
</html>Установите browser-sync для запуска HTTP-сервера с содержимым этой папки:
npm install -g browser-sync
browser-sync start --server --files "."
Приведенная выше команда проверяет все файлы в текущей папке (и все вложенные папки) на предмет изменений и запускает веб-сервер на порту 3000, автоматически открывая окно браузера.
Каждый раз, когда вы будете изменять файлы, браузер будет обновляеться.
Это будет очень полезно, когда мы будем создавать прототипы наших игр.
Теперь вы должны увидеть пустой экран в вашем браузере, потому что мы произвели инициализацию Phaser:
Это вводный пост к серии постов по основам Phaser, так что дальше мы с вами оживим этот черный квадрат и научимся работать с разными элементами, которые есть в данной библиотеке.
Чтобы не пропустить новые части - не забывай подписаться на телеграм канал!