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

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

Точное размещение игровых объектов — фундаментальный навык в разработке игр. Phaser 3 предлагает несколько интуитивных способов задать позицию спрайта или изображения, каждый из которых подходит для разных сценариев. Понимание этих методов позволит вам гибко управлять визуальной сценой, создавать динамические композиции и писать более чистый, поддерживаемый код.

Версия 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('grid', 'assets/pics/debug-grid-1920x1920.png');
        this.load.image('atari', 'assets/sprites/atari130xe.png');
    }

    create ()
    {
        this.add.image(0, 0, 'grid').setOrigin(0);

        //  Images are positioned at x,y based on the center of the image

        const x = 320;
        const y = 100;

        this.add.image(x, y, 'atari');

        //  You can also use the x and y properties:

        const image2 = this.add.image(0, 0, 'atari');

        image2.x = 640;
        image2.y = 200;

        //  Or the setPosition method, which allows for chaining:

        this.add.image(0, 0, 'atari').setPosition(320, 320);
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

Базовое позиционирование при создании

Самый распространённый и прямой способ задать позицию объекта — передать координаты `xиyпрямо в метод, который создаёт этот объект. В нашем примере таким методом являетсяthis.add.image(x, y, key)`.

При создании изображения atari мы сразу указываем его будущие координаты.

const x = 320;
const y = 100;
this.add.image(x, y, 'atari');

Важно помнить, что в Phaser по умолчанию точка позиционирования (origin) любого объекта находится в его центре. Это значит, что переданные координаты (320, 100) будут указывать на центр изображения atari. Если изменить origin, то и точка привязки изменится.

Прямое изменение свойств x и y

Иногда объект нужно создать в одной позиции (например, в точке (0, 0)), а затем переместить в другую. Это полезно для организации кода или когда конечная позиция вычисляется позже. Для этого можно напрямую изменять свойства .x и .y объекта.

Сначала мы создаём изображение в начале координат.

const image2 = this.add.image(0, 0, 'atari');

Затем, в следующем шаге, присваиваем нужные значения его свойствам. Этот подход даёт больше гибкости и позволяет анимировать позицию, постепенно меняя эти значения.

image2.x = 640;
image2.y = 200;

Метод setPosition и цепочки вызовов

Phaser активно использует паттерн цепочки методов (chaining), который позволяет выполнять несколько операций над объектом в одной лаконичной строке. Метод .setPosition(x, y) предназначен именно для этого.

С его помощью можно создать объект и сразу задать ему позицию, не создавая промежуточную переменную. Метод возвращает ссылку на тот же объект, что позволяет «нанизывать» следующие методы, например, для установки масштаба или угла поворота.

this.add.image(0, 0, 'atari').setPosition(320, 320);

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

Итог и практические рекомендации

Все три метода приводят к одному результату — объект оказывается в нужной точке сцены. Выбор зависит от контекста и стиля кода.

* **Используйте аргументы this.add.image(x, y, key)**, когда позиция известна заранее и объект больше не будет перемещаться. Это самый читаемый вариант. * **Используйте прямое присваивание image.x/y**, когда позиция вычисляется динамически, объект анимируется или вам нужен явный контроль на разных этапах жизненного цикла. * **Используйте .setPosition()**, когда выстраиваете цепочку методов для конфигурации объекта. Это делает код более компактным.

// Пример гибридного подхода: создание, позиционирование и добавление физики в одной цепочке.
this.physics.add.image(100, 300, 'player')
    .setPosition(400, 300)
    .setCollideWorldBounds(true);

Помните, что система координат в Phaser начинается в левом верхнем углу холста (0, 0), а ось Y направлена вниз.

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

Умение выбирать подходящий метод позиционирования — ключ к написанию чистого и эффективного кода на Phaser. Для начала поэкспериментируйте: создайте несколько спрайтов, используя каждый из трёх способов, и понаблюдайте за результатом. Затем попробуйте анимировать объект, плавно изменяя его свойство .x внутри метода update(). Наконец, объедините .setPosition() с другими методами, например .setScale() или .setAlpha(), чтобы увидеть мощь цепочек вызовов в действии.