О чем этот пример

Базовое перемещение объектов — один из первых навыков в разработке игр. В этом примере мы разберем, как заставить спрайт двигаться по горизонтали, создав бесконечный цикл патрулирования. Этот принцип лежит в основе анимации врагов, фоновых элементов и любых движущихся частей игры. Понимание работы метода `update()` и управления свойствами спрайта напрямую — фундаментально. Это открывает путь к более сложным системам движения с использованием физики или твинов.

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код


class Example extends Phaser.Scene
{
    bunny;

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('bunny', 'assets/sprites/bunny.png');
    }

    create ()
    {
        this.bunny = this.add.sprite(-150, 300, 'bunny');
    }

    update ()
    {
        this.bunny.x += 2;

        if (this.bunny.x > 950)
        {
            this.bunny.x = -150;
        }
    }
}

const config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: Example
};

const game = new Phaser.Game(config);

Структура класса сцены и загрузка

Код начинается с объявления класса сцены, наследуемого от Phaser.Scene. В нем определяется свойство bunny, которое позже будет хранить наш спрайт.

Метод preload() отвечает за загрузку ассетов. Здесь мы устанавливаем базовый URL и загружаем одно изображение.

this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('bunny', 'assets/sprites/bunny.png');

Создание и начальное позиционирование спрайта

В методе create(), который вызывается один раз после загрузки ресурсов, происходит создание игрового объекта. Мы используем this.add.sprite() для создания спрайта и помещаем его за левую границу экрана.

Ключевой момент: спрайт создается с начальной позицией x = -150. Это значит, что он изначально не виден на игровом поле (ширина которого 800 пикселей).

this.bunny = this.add.sprite(-150, 300, 'bunny');

Цикл обновления и логика движения

Сердцевина анимации находится в методе update(). Он вызывается на каждом кадре игры. Здесь мы напрямую изменяем свойство `x` (горизонтальную координату) нашего спрайта, увеличивая его на 2 пикселя за кадр.

Затем идет проверка условия: если координата `xспрайта превысила 950 (правый край экрана + запас), мы сбрасываем ее обратно в-150`. Это создает эффект бесконечного цикла: спрайт выезжает справа, исчезает и появляется снова слева.

this.bunny.x += 2;

if (this.bunny.x > 950)
{
    this.bunny.x = -150;
}

Конфигурация и запуск игры

За пределами класса определяется конфигурационный объект config. В нем задаются основные параметры игры: тип рендерера (WEBGL), элемент-контейнер на странице, размеры холста и класс основной сцены.

Игра инициализируется созданием нового экземпляра Phaser.Game, в который передается конфигурация. Это точка входа для всего приложения.

const config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: Example
};

const game = new Phaser.Game(config);

Что попробовать дальше

Вы освоили базовый принцип анимации в Phaser: изменение свойств объекта в методе update(). Для экспериментов попробуйте изменить скорость (число `2), направление (используйте-=), или добавьте движение по осиy. В качестве следующего шага изучите встроенные системы анимации спрайтов (this.anims.create) и физический движок (this.physics.add.sprite`), которые позволяют создавать более сложное и реалистичное поведение с меньшими усилиями.