В этой статье я покажу Вам быстрый и удобный способ настройки среды и установки Phaser 3, для разработки игр. Локальный сервер, на котором будет "крутиться" Ваша игра будет работать в node.js среде, поэтому прежде всего убедитесь, что у Вас установлен Node и npm менеджер. Каким образом сделать это для Вашей операционной среды расписано подробнейшим образом в других статьях, а также десятки youtube роликов посвящены данному вопросу, поэтому мы не будем останавливаться каким-либо образом на этом.
Также стоит позаботиться о том, чтобы у Вас был установлен git, для того чтобы склонировать удалённый открытый репозиторий себе на компьютер. Итак, давайте создадим готовый шаблон для разработки игр на Phaser 3, склонировав его из репозитория. Откройте консоль и вбейте следующие команды:
Предварительно создайте удобную для Вас папку с проектами, чтобы потом долго не искать, где расположена Ваша среда для разработки и проект с игрой. Вы должны будете увидеть что-то вроде следующего:
Затем необходимо установить сам Phaser 3 и все зависимости (node_modules)
Это практически всё, что необходимо для установки и настройки среды, где Вы будете разрабатывать свои будущие игры. Видите, как всё просто и легко. Создатели фреймворка также позаботились о том, чтобы нам упростить задачу как новичкам, как говориться для быстрого старта.
Вам осталось лишь запустить сервер и открыть в браузере http://localhost:8000. Чтобы запустить http-server выполните команду:
Давайте проверим работоспособность Phaser и вообще всей платформы. Для этого сначала рассмотрим структуру папок. Если Вы зайдёте в корневую папку проекта, Вы заметите директорию src. Это то место, где расположен весь исходный код Вашей игры. Далее, на одном уровне с папкой src, находится директория node_modules со всеми зависимостями, в том числе и самим Phaser 3. Эта папка появится у Вас только после установки npm install. И наконец папка webpack, нужная для сборки Вашего проекта на лету и обновлению страницы в браузере, как только Вы что-то измените у себя в исходных кодах (так называемая технология hot run).
Точка вхождения при запуске в браузере Вашей игры является index.html, который находится в корне проекта. Эта html страница к себе подключает код на javascript - index.js, который находится в папке src. Если Вы откроете Index.js Вы увидите непосредственно демо-код написанный на Phaser:
Результат Вы увидите, если отроете страницу в браузере по URL: http://localhost:8000 (страница откроется автоматически, как только Вы наберёте команду в консоле npm start).
Ещё пару слов о сборке игры для production. После того как Вы написали свою игру, отладили её и тщательно оттестировали, пора поделиться с внешним миром Вашим творением. Вы можете это сделать развернув на своём личном домене собранную игру (разумеется, если Ваши хостеры установили node.js, запустили http-server или какой-то другой http сервер). Для того чтобы "сбилдить" готовую игру для production, выполните команду:
И заливайте себе на сервер папку dist, которая автоматически создастся в корневой директории проекта (либо если Вы работаете с git, зафиксируйте у себя в мастер ветке весь код и выполните git push, и если у Вас настроены хуки для авторазвёртывания проекта на удалённом сервере, Ваша игра окажется на production).
P.S. Это всё, чем я хотел поделиться с Вами в этой части цикла статей про создание игр на Phaser 3. В следующей статье мы изучим очень полезный инструмент для создания Tilemap, в замечательной программе Tiled. Следует изучить эту программу основательно, ведь 50-60% всего времени и трудозатрат при создании игры связано именно с этим инструментом, если не больше, откровенно говоря.