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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

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

    create ()
    {
        const image1 = this.add.image(100, 100, 'block');
        const image2 = this.add.image(100, 200, 'block');
        const image3 = this.add.image(100, 300, 'block');

        this.tweens.add({
            targets: image1,
            duration: 4000,
            x: [ 100, 300, 200, 600 ]
        });

        this.tweens.add({
            targets: image2,
            duration: 4000,
            x: [ 100, 300, 200, 600 ],
            interpolation: 'bezier'
        });

        this.tweens.add({
            targets: image3,
            duration: 4000,
            x: [ 100, 300, 200, 600 ],
            interpolation: 'catmull'
        });
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

Базовый пример: линейная интерполяция

В исходном примере создаются три одинаковых спрайта "block" и для каждого запускается твин, меняющий свойство `x(горизонтальную позицию). Массив значений[100, 300, 200, 600]` определяет ключевые точки, которые объект посетит за 4 секунды.

По умолчанию, если параметр interpolation не указан, Phaser использует линейную интерполяцию. Это означает, что объект будет двигаться от одной точки к другой по прямой линии. Визуально это выглядит как резкие повороты в ключевых точках.

this.tweens.add({
    targets: image1,
    duration: 4000,
    x: [100, 300, 200, 600]
});

Кривые Безье: плавные изгибы

Чтобы сделать движение более плавным и изогнутым, можно использовать интерполяцию 'bezier'. При этом Phaser будет рассчитывать промежуточные позиции объекта по кривой Безье, которая проходит через все указанные ключевые точки. Это создает более органичную и менее угловатую траекторию.

Ключевая точка — это добавление всего одного свойства interpolation в конфигурацию твина.

this.tweens.add({
    targets: image2,
    duration: 4000,
    x: [100, 300, 200, 600],
    interpolation: 'bezier'
});

Спрайт image2 пройдет по тому же набору точек, но его путь будет гладкой кривой, что визуально смягчит резкие изменения направления.

Сплайны Catmull-Rom: профессиональная плавность

Интерполяция 'catmull' использует алгоритм Catmull-Rom для построения сплайна. Этот тип интерполяции часто используется в компьютерной графике и создает особенно гладкую кривую, которая гарантированно проходит через все контрольные точки. Движение получается очень естественным, без резких скачков скорости на поворотах.

this.tweens.add({
    targets: image3,
    duration: 4000,
    x: [100, 300, 200, 600],
    interpolation: 'catmull'
});

Если сравнить три спрайта в примере, движение image3 с 'catmull' будет самым плавным и визуально приятным при прохождении сложного маршрута.

Практическое применение в играх

Эти типы интерполяции — не просто визуальный трюк. Вот несколько идей, где их можно применить:

* **Движение врагов:** Заставьте противников патрулировать по извилистому маршруту, а не по ломаной линии. * **Траектория снаряда:** Создайте эффект полета магического шара или гранаты по дуге. * **Полет птицы/самолета:** Сымитируйте естественное, волнообразное движение в воздухе. * **Камера:** Плавное проведение камеры по сложной траектории в кат-сценах или при переходе между локациями.

Важно помнить, что интерполяция работает с любым числовым свойством, которое можно твинить, например, `y,scale,angleилиalpha`.

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

Параметр interpolation в системе твинов Phaser — это простой, но мощный инструмент для повышения качества анимации. Заменив линейные движения на 'bezier' или 'catmull', вы сделаете игру визуально привлекательнее и динамичнее. Поэкспериментируйте: примените интерполяцию к движению по оси Y, чтобы создать волнообразные полеты. Попробуйте скомбинировать интерполяцию для свойств `xиyс разными массивами значений, чтобы задавать объектам сложные двумерные траектории. Или используйте ее для плавного вращения (angle`), создавая эффект "заброса" объекта при движении.