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

Физика — это сердце любой динамичной игры, и Phaser предоставляет мощный, но интуитивно понятный инструмент для её реализации: систему Arcade Physics. В этой статье мы разберем, как создать физическое тело на основе спрайта и задать ему базовое поведение. Этот фундаментальный навык открывает путь к созданию падающих платформ, отскакивающих мячей и любых других объектов, подчиняющихся законам физики.

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('block', 'assets/sprites/block.png');
    }

    create ()
    {
        const block = this.physics.add.image(400, 100, 'block');

        block.setVelocity(100, 200);
        block.setBounce(1, 1);
        block.setCollideWorldBounds(true);
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    parent: 'phaser-example',
    physics: {
        default: 'arcade',
        arcade: {
            debug: true,
            gravity: { y: 200 }
        }
    },
    scene: Example
};

const game = new Phaser.Game(config);

Подготовка сцены и загрузка ассетов

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

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

Первая строка устанавливает базовый URL для загрузки ресурсов, что удобно при использовании внешних ассетов. Вторая — непосредственно загружает спрайт с ключом 'block'. Этот ключ мы будем использовать для создания объекта.

Создание физического тела

Основная магия происходит в методе create(). Именно здесь мы создаем объект, который будет взаимодействовать с физическим миром.

const block = this.physics.add.image(400, 100, 'block');

Метод this.physics.add.image() делает три вещи: создает стандартный игровой объект Image, добавляет к нему тело Arcade Physics и регистрирует это тело в физическом мире. Первые два аргумента — это начальные координаты X и Y на сцене, третий — ключ загруженного изображения.

Настройка поведения тела

После создания тело — это просто статичный спрайт в физическом мире. Чтобы оно начало двигаться, нам нужно задать его свойства.

block.setVelocity(100, 200);
block.setBounce(1, 1);
block.setCollideWorldBounds(true);

- setVelocity(100, 200) задает начальную скорость тела: 100 пикселей в секунду по оси X и 200 — по оси Y. Тело сразу начнет движение вниз и вправо. - setBounce(1, 1) определяет упругость (коэффициент восстановления). Значение 1 означает идеально упругий удар без потерь энергии. Первый аргумент — для горизонтальных столкновений, второй — для вертикальных. - setCollideWorldBounds(true) включает столкновение тела с границами игрового мира (установленными в конфигурации игры). Без этого тело просто улетело бы за экран.

Конфигурация физического мира

Ключевой момент — активация и настройка физики в конфигурации игры. Без этого наш block был бы обычным спрайтом.

physics: {
    default: 'arcade',
    arcade: {
        debug: true,
        gravity: { y: 200 }
    }
}

В этом блоке: - default: 'arcade' включает систему Arcade Physics по умолчанию. - debug: true — опция для отладки. Она рисует контуры физических тел и векторы скорости, что невероятно полезно при разработке. - gravity: { y: 200 } задает гравитацию, действующую на все тела в мире. Значение y: 200 означает, что каждую секунду скорость тела по оси Y будет увеличиваться на 200 пикселей, имитируя падение. Именно гравитация заставляет наше тело, которому задана вертикальная скорость, в итоге падать вниз быстрее.

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

Всего несколько строк кода — и в вашей игре оживает физический объект, который падает, отскакивает от границ и подчиняется заданным законам. Это основа для тысяч игровых механик. Поэкспериментируйте: измените силу гравитации на отрицательную, чтобы объект «падал» вверх; задайте bounce значение 0 для абсолютно неупругого столкновения; создайте несколько тел с разными скоростями и наблюдайте за их взаимодействием под действием общих сил.