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

В первой части мы создали новый проект и добавили сцену GameScene. Если вы еще этого не сделали, то перейдите к первой части и выполните указания в ней.

Создание платформ

Чтобы добавить землю и платформы в нашу игру, мы будем использовать ресурс ground, который мы предварительно загрузили в 1 части. Код будет помещен в новый метод, а не как в официальном руководстве в метод create(). Организация кода в виде функций и методов для многократного использования помогает писать лучший код.

import Phaser from 'phaser'

export default class GameScene extends Phaser.Scene
{
    //Методы constructor() и preload() остались без изменений
    // ....

    create()
    {
        this.add.image(400, 300, 'sky');
        //this.add.image(400, 300, 'star');
        this.createPlatforms();
    }
    createPlatforms()
    {
        const platforms = this.physics.add.staticGroup();

        platforms.create(400, 568, 'ground').setScale(2).refreshBody();

        platforms.create(600, 400, 'ground');
        platforms.create(50, 250, 'ground');
        platforms.create(750, 220, 'ground');
    }
}

Строка добавления звезды закомментирована (строка 11), чтобы показать, что она нам больше не нужна. Вы можете удалить ее.

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

Вы должны увидеть зеленые платформы, добавленные в вашу игру по адресу http://localhost:8000/. Он должен обновиться автоматически, если вы оставили браузер открытым в 1 части.

Не повторяйся

Возможно вы слышали о принципе DRY (не повторяйся) в разработке программного обеспечения. Это замечательный метод. Мы собираемся применить его к нашим строковым литералам.

Вы можете видеть, что мы использовали строку 'ground' 4 раза в методе createPlatforms() и 1 раз в preload(). Но люди склонны делать опечатки. Лучший способ избежать опечаток - не печатать. 😂 Мы можем избежать ввода, используя константу.

import Phaser from 'phaser'

const GROUND_KEY = 'ground'

export default class GameScene extends Phaser.Scene
{

    // ....

    preload()
    {
        this.load.image('sky', 'assets/sky.png');
        this.load.image(GROUND_KEY, '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 }
        );
    }

    //...

    createPlatforms()
    {
        const platforms = this.physics.add.staticGroup();

        platforms.create(400, 568, GROUND_KEY).setScale(2).refreshBody();

        platforms.create(600, 400, GROUND_KEY);
        platforms.create(50, 250, GROUND_KEY);
        platforms.create(750, 220, GROUND_KEY);
    }
}

Создание персонажа

Персонаж будет создан с использованием файла dude.png, загруженного в спрайт-лист в методе preload(). Код создания персонажа разместим в методе createPlayer(), который аналогичен тому, что мы сделали для платформ.

import Phaser from 'phaser'

const GROUND_KEY = 'ground'
const DUDE_KEY = 'dude'

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

        this.player = undefined;
    }

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

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

        this.createPlatforms();
        this.createPlayer();
    }

    //...

    createPlayer()
    {
        this.player = this.physics.add.sprite(100, 450, DUDE_KEY);
        this.player.setBounce(0.2);
        this.player.setCollideWorldBounds(true);

        this.anims.create({
            key: 'left',
            frames: this.anims.generateFrameNumbers(DUDE_KEY, { start: 0, end: 3 }),
            frameRate: 10,
            repeat: -1
        });

        this.anims.create({
            key: 'turn',
            frames: [ { key: DUDE_KEY, frame: 4 } ],
            frameRate: 20
        });

        this.anims.create({
            key: 'right',
            frames: this.anims.generateFrameNumbers(DUDE_KEY, { start: 5, end: 8 }),
            frameRate: 10,
            repeat: -1
        });
    }
}

Обратите внимание, что мы применили принцип DRY к строковому литералу 'dude' в виде констатнты DUDE_KEY.

Мы добавили свойство player в классе GameScene и установили его в undefined в конструкторе. Это не обязательно, но объявление всех свойств экземпляра перед их использованием упрощает просмотр всех свойств с первого взгляда.

Экземпляр персонажа создается в методе createPlayer(), который вызывается из create().

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

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

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

Оригинал.