Phaser.js: всё об играх и разработке

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

Каждая игра – это непрерывное движение и изменение. Чтобы оживить статичное изображение, например, заставить его вращаться, нужно понимать жизненный цикл сцены в Phaser. В этой статье мы разберем, как работает метод `update` и свойство `rotation` на простом примере, который станет основой для любой анимации в ваших проектах. Вы научитесь создавать динамичные объекты, управляя их состоянием каждый кадр.

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

Живой запуск

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

Исходный код

class Demo extends Phaser.Scene
{
    eye;

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('eye', 'assets/pics/lance-overdose-loader-eye.png');
    }

    create ()
    {
        this.eye = this.add.image(Phaser.Math.Between(0, 800), Phaser.Math.Between(0, 600), 'eye');
    }

    update ()
    {
        this.eye.rotation += 0.02;
    }
}

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

В Phaser 3 логика каждой игровой сцены инкапсулирована в класс, расширяющий Phaser.Scene. Три ключевых метода определяют её жизненный цикл: preload, create и update.

class Demo extends Phaser.Scene
{
    eye;

    preload ()
    {
        // ... загрузка ресурсов
    }

    create ()
    {
        // ... инициализация объектов
    }

    update ()
    {
        // ... обновление состояния каждый кадр
    }
}

Объявление поля eye в начале класса делает эту переменную свойством экземпляра сцены. Это позволяет обращаться к объекту спрайта из любого метода класса, в частности, из update.

Загрузка и создание спрайта

Метод preload отвечает за предварительную загрузку изображений, звуков и других ресурсов. Здесь с помощью this.load.image мы загружаем картинку и назначаем ей текстовый ключ 'eye'.

this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('eye', 'assets/pics/lance-overdose-loader-eye.png');

Метод create выполняется один раз после успешной загрузки всех ресурсов. Здесь происходит создание и первоначальная настройка игровых объектов. Спрайт добавляется на сцену с помощью this.add.image. Его начальные координаты задаются случайным образом в пределах 800x600 пикселей.

this.eye = this.add.image(Phaser.Math.Between(0, 800), Phaser.Math.Between(0, 600), 'eye');

Функция Phaser.Math.Between возвращает случайное целое число в заданном диапазоне, что позволяет спрайту появляться в разных местах при каждом запуске сцены.

Анимация в реальном времени через метод update

Сердце любой динамики в игре – метод update. Он вызывается автоматически на каждом кадре отрисовки (до 60 раз в секунду). Любая логика, связанная с непрерывным изменением состояния игры, должна находиться здесь.

update ()
{
    this.eye.rotation += 0.02;
}

В данном коде каждые 16.6 миллисекунд (при 60 FPS) к свойству rotation спрайта this.eye прибавляется значение 0.02. Свойство rotation определяет угол поворота спрайта в радианах. Таким образом, спрайт равномерно вращается со скоростью примерно 0.02 радиана за кадр.

Важно: изменение свойства rotation напрямую влияет на трансформацию объекта при его отрисовке. Phaser 3 использует правостороннюю систему координат, где положительное значение вращает спрайт по часовой стрелке.

Почему именно так? Практические аспекты

Использование метода update для анимации – стандартный и наиболее производительный подход в игровых циклах. Это предсказуемо и даёт полный контроль над процессом.

* **Детерминированность:** Изменение на фиксированную величину за кадр (+= 0.02) даёт равномерное вращение, не зависящее от абсолютного времени, но зависящее от частоты кадров. На мощном и слабом компьютерах спрайт сделает один полный оборот за разное *реальное* время, но визуально анимация будет плавной в обоих случаях. * **Производительность:** Операция сложения и присваивания значения свойству – одна из самых простых. В update можно выполнять десятки тысяч таких операций без потери производительности. * **Гибкость:** Логику внутри update можно легко усложнить. Например, изменить скорость вращения в зависимости от действий игрока или внешних событий.

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

Комбинация метода update и свойства rotation – фундамент для создания плавной анимации вращения в Phaser 3. Этот паттерн распространяется на любые другие непрерывные изменения: перемещение (`x,y), масштабирование (scale), прозрачность (alpha). Для экспериментов попробуйте: заменить константу0.02на переменную и менять её по клику мыши; использоватьthis.eye.angle += 1для работы в градусах; или привязать скорость вращения к прошедшему времени с помощьюthis.eye.rotation += 0.001 * delta, гдеdelta– аргумент методаupdate(time, delta)`.