Привет! В этом руководстве мы узнаем, как получить Phaser 3 и настроить нашу среду для создания и запуска игр Phaser.

* Что такое Phaser 3
* Необходимые условия
* Настройка и запуск среды
* Изменение кода для новой игры

Что такое Фазер 3?

Phaser 3 — это фреймворк для создания игр Html5. Это бесплатно и с открытым исходным кодом, и многие игры были созданы с использованием Phaser. Для получения дополнительной информации посетите официальный веб-сайт: https://phaser.io/phaser3

Предпосылки

Этот учебник предназначен для начинающих, поэтому не требуется никакого опыта работы с кодом. Просто следуйте этому руководству. В этом уроке я не буду учить, как использовать Phaser, я создам отдельный урок для этого, используя этот шаблон, который мы настроим здесь.

Настройка нашей среды

Чтобы настроить и запустить Phaser, нам потребуются следующие загруженные и установленные программы:

1. Node.js
2. Код Visual Studio
3. Шаблон Phaser 3

Установите Node.js

Чтобы запустить нашу среду и опубликовать ее, нам нужно скачать Node.js. Перейдите на https://nodejs.org и загрузите и установите версию с надписью LTS.

Установите код Visual Studio

Мы будем использовать Visual Studio Code для написания и редактирования нашего кода. Скачайте и установите с https://code.visualstudio.com/.

Получить шаблон Phaser 3

Мы будем использовать готовый шаблон для запуска нашей игры. Как только мы все настроим, мы сможем использовать этот шаблон для других игр, которые мы будем делать. Сначала создайте папку для своего шаблона Phaser 3. для этого урока я буду использовать

D:\Documents\Phaser3\Шаблон Phaser

но не стесняйтесь использовать любую другую папку. Затем перейдите на https://github.com/photonstorm/phaser3-project-template и нажмите Клонировать или Загрузить, чтобы получить файл. Распакуйте zip-файл в каталог шаблона Phaser.

Теперь, когда у нас есть все необходимые файлы, мы можем приступить к настройке нашего шаблона.

Настройка среды

Затем в Visual Studio Code откройте каталог, в который вы извлекли проект шаблона Phaser.

Откройте терминал, нажав

Terminal -> New Terminal или нажмите Ctrl+Shift+`

Мы должны установить все зависимости в проекте, чтобы это запустилось. Вот почему мы установили Node.js. Введите в командной строке:

установка нпм

После завершения установки введите

запуск нпм

Это откроет ваш браузер и запустит игру.

Изменить код для новой игры

Как я уже сказал в начале урока, я пока не буду заниматься программированием в Phaser. Я сделаю для этого отдельный туториал, и мы сделаем полноценную игру от начала до конца, используя этот шаблон.
Я только отмечу, что для изменения деталей игры, таких как название игры, автора описания и т. д., можно найти в файле package.json.

Спасибо за прочтение. Надеюсь, это помогло вам настроить и запустить среду Phaser 3.