Создание вашей первой игры Phaser 3 на современном Javascript. Часть 1.

Игры могут быть одним из самых сложных видов программного обеспечения, которые вы можете создавать, и самым интересным. Данная статья поможет использовать современные передовые методы, чтобы избежать различных ошибок или более легко исправлять возникающие. Она сэкономит ваше время и избавит от головной боли. Но самое главное, она поможет вам сделать игру лучше. В этой статье мы покажем вам, как создавать игры в Phaser 3, используя современный JavaScript и лучшие практики. Мы будем создавать ту же игру, что создаем в официального руководстве Создание вашей первой игры в Phaser 3. Таким образом вы сможете сравнить и сопоставить различия. Здесь можно взять все исходные файлы проекта.

Мы начнем наш проект на базе шаблона phaser3-parcel-template. Данный шаблон настроит все, что нам нужно для запуска сервера разработки и создания готовых к публикации файлов. Если вам неизвестно как использовать шаблон phaser3-parcel-template, то перейдите сюда. В официальном руководстве Phaser все находится в одном HTML-файле, так что это точка входа или место, где начинается наш код. Наш код разделен на несколько файлов для лучшей организации, понимания и чтения. Для нас точкой входа является файл main.js.

import Phaser from 'phaser'

import HelloWorldScene from './scenes/HelloWorldScene'

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 200 }
        }
    },
    scene: [HelloWorldScene]
}

export default new Phaser.Game(config)

Он похож на файл part1.html в официальное руководстве Phaser. Мы переместили пример сцены, которая содержит функции preload(), create() и update(), в свой собственный файл с именем HelloWorldScene.js.

В современном JavaScript мы используем синтаксис import для ссылки на файлы проекта и внешние библиотеки. В приведенном выше примере Phaser - это внешняя библиотека, а HelloWorldScene.js - файл проекта. Расширение .js нам не нужно, потому что оно подразумевается.

Официальное руководство Phaser добавляет файлы библиотеки Phaser в виде отдельного тега <script> в файле index.html. Вся информация о свойствах конфигурации Phaser, описанная в официальном руководстве, по-прежнему применима и сейчас.

Свойство scene в нашем объекте config является массивом, а не объектом с функциями preload(), create() и update() как было в оригинальном руководстве.

При этом наш файл HelloWorldScene.js включает в себя только функции preload() и create(), но не содержит функцию update(), потому что мы не будем использовать ее в нашем новом более структурированном формате.

Мы используем классы, которые поддерживаются в современном JavaScript, а не просто создаем объекты или новые функции - не беспокойтесь, если вы не знаете, что это такое.

Все функции, которые вы могли бы поместить в объект-сцену вроде preload() и create(), могут быть помещены в классе сцены.

Давайте создадим класс GameScene для хранения нашей игровой логики. Используйте в качестве примера HelloWorldScene. Мы должны изменить уникальный ключ в constructor и удалить всю логику в методах preload и create.

import Phaser from 'phaser'

export default class GameScene extends Phaser.Scene
{
    constructor()
    {
        super('game-scene')
    }

    preload()
    {

    }

    create()
    {

    }
}

Мы будем использовать те же ресурсы, что использовались в официальном руководстве Phaser. Вы можете скачать их здесь.

Создайте в вашем проекте папку public (она должна быть на том же уровне, что и папка src). Скопируйте из архива папку assets в папку public вашего проекта.

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

import Phaser from 'phaser'

export default class GameScene extends Phaser.Scene
{
    constructor()
    {
        super('game-scene')
    }

    preload()
    {
        this.load.image('sky', 'assets/sky.png');
        this.load.image('ground', 'assets/platform.png');
        this.load.image('star', 'assets/star.png');
        this.load.image('bomb', 'assets/bomb.png');
        this.load.spritesheet('dude', 
            'assets/dude.png',
            { frameWidth: 32, frameHeight: 48 }
        );
    }

    create()
    {
        this.add.image(400, 300, 'sky');
        this.add.image(400, 300, 'star');
    }
}

Теперь нам нужно добавить нашу сцену GameScene в список scene. Обновите свой файл main.js следующим образом:

import Phaser from 'phaser'

import HelloWorldScene from './scenes/HelloWorldScene'
import GameScene from './scenes/GameScene'

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 300 }
        }
    },
    scene: [GameScene, HelloWorldScene]
}

export default new Phaser.Game(config)

Обратите внимание, что мы изменили значение gravity.y c 200 на 300, чтобы оно соответствовало официальному руководству Phaser.

Если хотите вы можете удалить ссылки на HelloWorldScene.

Теперь мы можем протестировать наши изменения, открыв терминал, перейдя в папку нашего проекта и выполнив эту команду:

npm run start

Примечание: не забудьте выполнить команду npm install после создания проекта, как указано в шаблоне phaser3-parcel-template.

Откройте окно браузера и перейдите по адресу http://localhost:8000/, и вы должны увидеть синий фон с желтой звездой посередине.

Мы преобразовали в современный JavaScript 1 и 2 части из официального руководства по игре Создание вашей первой игры в Phaser 3.

В следующей части мы займемся созданием платформ и персонажа игрока.

Оригинал.