Назад Вперед

Создание шаблона проекта с помощью Интерфейса командной строки (CLI).

В прошлом материале я разобрал способ создания шаблона проекта с помощью встроенного в редакторе кода инструмента Terminal и менеджера пакетов npm. Но есть способ, который позволяет делать это еще быстрее, а именно создание проекта со встроенным фреймворком Phaser3, игровыми настройками, несколькими сценами разбитыми на классы в отдельных файлах и многими другими полезностями, которые нужно каждый раз делать заново при создании нового проекта.

Для этого будет использоваться Интерфейс командной строки (CLI) написанный для фреймворка Phaser3. Называется он phaser3-cli-gamma, разработанный одним испанским программистом и доступен на сайте npmjs.com для использования.

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

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

Сайт Интерфейса

Первым делом нужно установить CLI на компьютер. Делается это с помощью Командной строки. Открываю ее через меню Пуск. Для того, чтобы установить этот пакет, уже должна быть установлена платформа Node.js вместе со встроенным менеджером пакетов (npm), так как будет использован именно он для установки (про эти инструменты описывал в этом материале).

Командная строка

В командной строке ввожу команду npm i -g phaser3-cli-gamma для установки Интерфейса. При чем указываю, что установка будет происходить глобально -g (т.е. этот пакет можно будет использовать в любом проекте).

Установка Интерфейса

Чтобы убедиться, что пакет установлен правильно, запишу команду pg --version. Мне покажет, какая установлена версия CLI.

Проверка версии Интерфейса

Теперь перехожу к созданию проекта. Для начала нужно перейти в то место на компьютере, где нужно создать проект. После чего ввести одну команду: pg --new NewProject. NewProject — любое имя проекта.

Создание нового проекта

Следующий шаг — заполнение полей Интерфейса, которые являются основными настройками игры. Ввожу имя игры, затем выбираю способ отрисовки игры, ширину и высоту, нужна ли пиксельная графика и нужен ли физический движок arcade. После каждого ввода нажимаю Enter. В конце создается структура нового проекта со всеми необходимыми файлами.

Заполнение полей интерфейса

Нахожу папку NewProject и открываю ее с помощью редактора кода VSCode. Все файлы проекта созданы и размещены где нужно.

Проект в редакторе кода

Фреймворк Phaser3 расположен в папке node_modules и подключен в документе index.html. В этом же документе прописан тег для игры с idcontainer и с помощью стилей выровнен по центру.

Создана папка assets для загружаемых ресурсов, папка src для скриптов, где уже расположен файл main.js с основными настройками игры и предзагрузочная сцена Bootloader.js.

Главный файл игры

Чтобы быстро создать новую сцену и подключить ее к проекту, нужно открыть инструмент Terminal и прописать одну команду с названием новой сцены: pg --scene StartScene. Создается новый файл в папке scene сразу со всеми игровыми функциями и конструктором. Также сцена импортируется в файле main.js и указывается в настройках игры.

Новая сцена

Можно запустить локальный сервер и проверить, что проект уже работает и отображает игровую сцену правильно.

Проверка в браузере

Вот так быстро, в пару команд можно создать шаблон нового проекта, который уже можно настроить под себя, удалив или изменив файлы или строки кода. Все же быстрее удалить ненужное, чем создавать папки и прописывать каждый раз заново все настройки игры, функции и html-документ.

Спасибо за внимание!

Назад Вперед