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

Создание графических примитивов напрямую на канвасе — мощный инструмент для прототипирования и визуальных эффектов в играх. В Phaser есть встроенный фабричный метод `add.star`, который позволяет быстро рисовать и кастомизировать звёзды без использования текстур. В этой статье мы разберём пример создания, стилизации и анимации звёзд, а также покажем, как оживить их с помощью твинов.

Версия 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('bg', 'assets/skies/background1.png');
    }

    create ()
    {
        this.add.image(400, 300, 'bg');

        const r1 = this.add.star(200, 200, 5, 48, 96, 0x6666ff);

        const r2 = this.add.star(400, 200, 5, 48, 96, 0x9966ff);

        r2.setStrokeStyle(4, 0xefc53f);

        const r3 = this.add.star(600, 200, 5, 48, 96);

        r3.setStrokeStyle(2, 0x1a65ac);

        const r4 = this.add.star(200, 400, 5, 48, 96, 0xff6699);

        const r5 = this.add.star(400, 400, 5, 48, 96, 0xff33cc);

        const r6 = this.add.star(600, 400, 8, 48, 96, 0xff66ff);

        this.tweens.add({

            targets: r4,
            scaleX: 0.25,
            scaleY: 0.5,
            yoyo: true,
            repeat: -1,
            ease: 'Sine.easeInOut'

        });

        this.tweens.add({

            targets: r5,
            alpha: 0.2,
            yoyo: true,
            repeat: -1,
            ease: 'Sine.easeInOut'

        });

        this.tweens.add({

            targets: r6,
            angle: 90,
            yoyo: true,
            repeat: -1,
            ease: 'Sine.easeInOut'

        });
    }
}

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

const game = new Phaser.Game(config);

Создание базовой звезды

Основной метод для создания звезды — this.add.star. Он принимает ключевые параметры, определяющие её форму и внешний вид.

const r1 = this.add.star(200, 200, 5, 48, 96, 0x6666ff);

Разберём аргументы по порядку: 1. x, y (200, 200) — координаты центра звезды. 2. points (5) — количество лучей (вершин) звезды. 3. innerRadius (48) и outerRadius (96) — определяют глубину "впадин" между лучами и длину самих лучей. Отношение этих радиусов задаёт "остроту" звезды. 4. fillColor (0x6666ff) — цвет заливки в шестнадцатеричном формате.

Этот метод создаёт и сразу добавляет игровой объект Star на сцену.

Стилизация: контур и цвет

Помимо заливки, звезде можно добавить контур (обводку). Для этого используется метод setStrokeStyle.

const r2 = this.add.star(400, 200, 5, 48, 96, 0x9966ff);
r2.setStrokeStyle(4, 0xefc53f);

Метод принимает два параметра: - lineWidth (4) — толщина линии контура в пикселях. - color (0xefc53f) — цвет контура.

Если при создании звезды не указать цвет заливки, она будет прозрачной, и будет виден только её контур.

const r3 = this.add.star(600, 200, 5, 48, 96);
r3.setStrokeStyle(2, 0x1a65ac);

Эта техника полезна для создания контурных или комбинированных фигур.

Введение в анимацию с помощью твинов

Phaser предоставляет систему твинов (this.tweens) для плавной анимации свойств игровых объектов. Твин описывает изменение какого-либо свойства от начального значения к конечному за определённое время.

Рассмотрим анимацию масштаба для объекта r4.

this.tweens.add({
    targets: r4,
    scaleX: 0.25,
    scaleY: 0.5,
    yoyo: true,
    repeat: -1,
    ease: 'Sine.easeInOut'
});

Ключевые параметры конфигурации: - targets — объект или массив объектов для анимации. - scaleX, scaleY — целевые значения масштаба по осям. - yoyo: true — после достижения цели твин проиграется в обратном порядке. - repeat: -1 — твин будет повторяться бесконечно. - ease — функция плавности, определяющая характер изменения скорости анимации. 'Sine.easeInOut' обеспечивает плавное начало и конец.

Другие типы анимаций: прозрачность и вращение

Твинами можно анимировать практически любое числовое свойство объекта. Например, можно сделать звезду мигающей, меняя её прозрачность (alpha).

this.tweens.add({
    targets: r5,
    alpha: 0.2,
    yoyo: true,
    repeat: -1,
    ease: 'Sine.easeInOut'
});

Здесь звезда будет плавно становиться почти невидимой (alpha: 0.2), а затем возвращаться к полной непрозрачности (alpha: 1).

Анимация вращения достигается через изменение свойства angle.

this.tweens.add({
    targets: r6,
    angle: 90,
    yoyo: true,
    repeat: -1,
    ease: 'Sine.easeInOut'
});

Звезда r6 имеет 8 лучей. Твин будет поворачивать её на 90 градусов вперёд и назад, создавая эффект качания.

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

Метод add.star в сочетании с системой твинов открывает быстрый путь к созданию динамических визуальных элементов прямо в коде. Это идеально для интерактивных элементов интерфейса, спецэффектов или фоновой анимации без привлечения художника. **Идеи для экспериментов:** 1. Создайте "созвездие" из звёзд с разным количеством лучей и анимируйте их все одновременно, передав массив объектов в targets твина. 2. Поэкспериментируйте с innerRadius и outerRadius во время анимации, чтобы звезда "пульсировала". 3. Добавьте физическое тело к звезде с помощью this.physics.add.image и заставьте её отскакивать от границ мира, сохраняя все визуальные эффекты.