Назад Вперед

Часть 9. Phaser3. Фреймворк для создания браузерных 2D игр и не только…

Вот и пришел к самому основному инструменту для разработки браузерных и мобильных 2D игр на языке JavaScript. Разрешите представить — игровой фреймворк Phaser.js, а если быть точнее, то его относительно новая версия (дата выхода: февраль 2018 года) — Phaser3. С помощью его и буду создавать проекты, опубликованные на сайте и описанные в блоге.

Логотип Phaser3

Phaser используется для отрисовки (рендеринга) графики игры, есть встроенные физические движки (например Arcade Physics), загрузки различных ассетов всего лишь одной строчкой кода (спрайты, спрайтлисты, аудиофайлы, tilemap'ы, JSON и XML файлы), позволяет создавать анимацию, группировать объекты, работать с камерой и системой частиц, обрабатывает пользовательский ввод (клавиатура, мышь, сенсорное касание и другие) и еще много, очень много всего, что буду разбирать постепенно шаг за шагом.

Еще одно преимущество отмечу, что игры, сделанные с помощью фреймворка, можно запускать и на мобильных браузерах и адаптировать под различные размеры экрана, что сейчас очень немаловажно.

Чтобы начать работать с Phaser3, необходимо подключить библиотеку к своему проекту. Можно сделать это несколькими способами. Один из них — подключить, как и все скрипты в HTML-документе, но путь можно указать как на интернет-ресурс (репозиторий на GitHub'е), так и на скачанный файл в самом проекте. Об этом подробнее дальше.

Сайт фреймворка Phaser

Для старта захожу на официальный сайт фреймворка Phaser3 в раздел Download. Там есть несколько гайдов, как подключить его к своему проекту. Я выбираю пункт JavaScript Guide, а дальше — Getting Started with Phaser 3.

Гайд по установке Гайд по установке

Перекидывает на тот самый туториал. В первом вступлении объясняется, почему проект можно запускать только на локальном сервере. Если в двух словах, то в целях безапасности. Нажимаю Next внизу статьи.

Вступление в гайд

Теперь предлагают несколько вариантов, как же создать локальный сервер на своем компьютере. Один из них с помощью Node.js и пакета http-server (этим вариантом я пользовался раньше, до использования плагина Live Server в редакторе кода VSCode). Других вариантов по созданию локального сервера достаточно, использовать можно любой. Нажимаю Next.

Гайд по локальному серверу

На этой странице сайт предлагает выбрать редактор кода. Я уже это сделал в одной из первых статей. Сделал свой выбор на VSCode, который на сайте тоже включили в список. Довольный тем, что не прогадал с выбором, нажимаю Далее.

Выбор редактора кода

Вот та самая страница, где размещена ссылка на скачивание фреймворка. Нахожу в тексте ссылку download page и нажимаю. Если остаться и нажать Next, то дальше пойдет пример демо-страницы Hello World. На следующей странице — где найти примеры и шаблоны различных решений, а дальше, что делать дальше, ссылки на форум и призыв делиться своими готовыми играми.

Гайд по скачиванию фреймворка

Вернусь к скачиванию библиотеки. Разработчики предлагают, как я и писал, несколько вариантов подключения фреймворка самой актуальной версии (у меня была 3.15.1). Рассмотрю по порядку все варианты. Clone — это ссылка на GitHub и подключение библиотеки через этот сайт. Следующие 2 значка позволят скачать файлы в .js формате и подключить их как обычные скрипты к документу. Отличие лишь в том, что это полная и минимальная версия. Следующие 2 — скачать полный архив фреймворка со всеми файлами, примерами и стартовой страницей.

Варианты установки фреймворка

Ниже указаны еще 2 способа. Один из них — с помощью менеджера пакетов npm (о нем писал, когда разбирал Node.js), второй — через CDN, как обычный скрипт с указанием пути на внешний ресурс файла.

Варианты установки фреймворка

Сам я пользовался несколькими вариантами, устанавливал с помощью npm прямо в редакторе кода через встроенный терминал и скачивал файл с расширением .js и подключал его уже в самом документе. На сайте на данные момент используется второй способ. В каталоге лежит файл phaser.js и проект подключен к нему через главную страницу мини-игры PingPong.

Скачанный файл phaser.js

На данный момент использовать буду тот же способ. Скачав файл, можно приступать к разработке тестовой страницы.

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

Для начала создам новую папку проекта TestPhaser. Открываю папку с помощью редактора кода VSCode и прямо в корне создам стандартный файл — index.html. На этот раз основу html-документа создаю с помощью самого редактора (! и Enter). В документе появились основные теги. Можно изменить название страницы и язык с en на ru.

Новый файл index.html

Мне понадобится еще одна папка в проекте, создам ее прямо в редакторе с помощью значка New Folder и назову src. В этой папке будут хранится все файлы, подключаемые к документу (для более крупных проектов обычно делаю определенную иерархию для удобства поиска файлов). В эту папку перетаскиваю скачанный с сайта файл phaser.js (сразу использую полную версию фреймворка).

Новая папка с ресурсами

Теперь необходимо подключить этот файл. В html-документе, под тегам title, прописываю следующее <script src='./src/phaser.js'></script>. Фреймворк подключен, и нужно это теперь проверить.

Файл index.html:


    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset='UTF-8'>
            <title>
                Test Phaser
            </title>

            <script src='./src/phaser.js'></script>
                          
        </head>
        <body>
  
        </body>  
    </html>
 

Новый файл test.js

В папке src создаю еще один файл test.js, где будет написан код для тестирования фреймворка. И его подключаю уже в другом месте документа. Перед закрытым тегом </body> пишу практически тоже самое, только путь уже на новый файл указываю: <script src='./src/test.js'></script>.

Файл index.html:


    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset='UTF-8'>
            <title>
                Test Phaser
            </title>

            <script src='./src/phaser.js'></script>
                          
        </head>
        <body>

            <script src='./src/test.js'></script>
  
        </body>  
    </html>
 

В файле index.html осталось добавить только тег <main></main>, указав ему id=''container'. Таким образом скрипт будет находить место, куда ему вставлять игру. На самом деле это можно и не делать, но если публиковать игру уже на сайте, то лучше это сделать, чтобы можно было легко управлять расположением элементов на странице.

Файл index.html:


    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset='UTF-8'>
            <title>
                Test Phaser
            </title>

            <script src='./src/phaser.js'></script>
                          
        </head>
        <body>

            <main id=''container'></main>
            
            <script src='./src/test.js'></script>
  
        </body>  
    </html>
 

Перехожу к файлу test.js и приступаю к написанию основы основ для каждого проекта на этом фрейморке — указания главных настроек игры (на будущее, весь код можно записывать в функции window.onload = {} , которая запускает скрипт, когда страница загружена, но для маленьких и легковесных проектов это не актуально).

Первым делом указываю переменную, которая будет хранить данные о настройках игры. Во всех примерах и уроках имя переменной используется config и я не буду нарушать традицию. Что касается ключевого слова для объявления переменной, то есть 2 варианта: или var, или const (константы нельзя изменять). Выбрав любой, записываю следующую конструкцию:

Файл test.js:


    var config = {

    };
 

Как видно, переменная будет хранить в себе объект, где будут записаны данные в виде ключ-значение. Приступаю к их написанию. Первым идет на очереди свойство type, который указывает каким образом будет производиться отрисовка (рендеринг), а точнее на чем. Есть три варианта, которые можно указать: Phaser.AUTO, Phaser.CANVAS, Phaser.WEBGL. Последние выбирают одну из технологий отрисовки, а первый автоматически определяет, какую из них использовать. Что мне и подходит, так как позволяет без опасений запускать проект и на обычном браузере, и на мобильном.

Файл test.js:


    var config = {
        type: Phaser.AUTO
    };
 

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

Указав как будет происходить отрисовка, можно указать где в документе будет расположена игра. Для этого я и указывал id у тега main. Поэтому прописываю свойство parent: и указываю в кавычках id тега 'container'.

Файл test.js:


    var config = {
        type: Phaser.AUTO,
        parent: 'container'
    };
 

Вообще порядок записи свойств не имеет значение, их можно записывать как самому удобнее. Дальше я буду указывать ширину и высоту игрового окна (width: и height:). По умолчанию числа воспринимаются в пикселях.

Файл test.js:


    var config = {
        type: Phaser.AUTO,
        parent: 'container',
        width: 600,
        height: 400
    };
 

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

Но сейчас создам одну сцену и прямо при создании пропишу ключевые функции, которые необходимо использовать. Записывается все следующим образом:

Файл test.js:


    var config = {
        type: Phaser.AUTO,
        parent: 'container',
        width: 600,
        height: 400,
        scene: {
            preload: preload,
            create: create,
            update: update
        }
    };
 

Т.е. сцена сама по себе тоже является объектом, у которой прописываются имена основных функций, которые будут использоваться при создании проекта. Уже даже по их названию можно догадаться для чего каждая из них. В этих функциях будет записан весь код игры. Ну а пока закончу с настройками. На самом деле можно прописывать еще другие параметры, например, цвет фона, и тип используемого движка для физики. Для тестового примера физику использовать не буду.

Закончив с указанием настроек игры, перехожу к следующему важному моменту. Создание нового экземпляра игры с указанными настройками. Выглядит это так:

Файл test.js:


    var config = {
        type: Phaser.AUTO,
        parent: 'container',
        width: 600,
        height: 400,
        scene: {
            preload: preload,
            create: create,
            update: update
        }
    };

    var game = new Phaser.Game(config); 
 

Создается новая переменная, которая является экземпляром класса Phaser с методом Game, а в скобках указываются настройки, т.е. созданная до этого переменная config (для этого и выносится в отдельную переменную, для удобства).

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

Файл test.js:


    var config = {
        type: Phaser.AUTO,
        parent: 'container',
        width: 600,
        height: 400,
        scene: {
            preload: preload,
            create: create,
            update: update
        }
    };

    var game = new Phaser.Game(config); 

    function preload () {

    }
    
    function create () {
    
    }
    
    function update () {
    
    }
 

Весь код игры будет распределен между этими функциями. Подробнее о каждой из них и основные методах поговорю уже в следующем материале. А уже сейчас можно проверить, что код работает, запустив локальный сервер через плагин Live Server. В браузере отобразится черный прямоугольник и в среде разработчика, посмотрев структуру html-документа, можно увидеть созданный тег canvas.

Запуск тестовой страницы

Продолжение следует...

Назад Вперед