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

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

Статичный текст в игре может выглядеть скучно. Используя возможности `BitmapText` и систему твинов Phaser, вы можете легко добавить динамичные эффекты масштабирования, которые привлекут внимание игрока к важным сообщениям, названиям или интерфейсным элементам. В этой статье мы разберем, как создать анимацию, независимо изменяющую масштаб текста по осям X и Y, что позволит добиться эффектов "пульсации", "растяжения" или "дыхания" текста.

Версия 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.bitmapFont('ice', 'assets/fonts/bitmap/iceicebaby.png', 'assets/fonts/bitmap/iceicebaby.xml');
    }

    create ()
    {
        const text = this.add.bitmapText(100, 100, 'ice', 'Terminator', 32);

        this.tweens.add({
            targets: text,
            duration: 4000,
            scaleX: 4,
            ease: 'Quad.easeInOut',
            repeat: -1,
            yoyo: true
        });

        this.tweens.add({
            targets: text,
            duration: 3000,
            scaleY: 8,
            ease: 'Cubic.easeInOut',
            repeat: -1,
            yoyo: true
        });
    }
}

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

const game = new Phaser.Game(config);

Загрузка растрового шрифта

Перед созданием текстового объекта необходимо загрузить растровый (bitmap) шрифт. Это специальный формат шрифта, где каждый символ — это изображение. Он обеспечивает чёткое и быстрое отображение текста, особенно для нестандартных стилизованных шрифтов, которые используются в играх.

В методе preload() мы указываем базовый URL для загрузки ресурсов и загружаем шрифт с ключом 'ice'. Для этого используется метод this.load.bitmapFont(), который принимает ключ, путь к изображению (PNG) и путь к файлу описания (XML).

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.bitmapFont('ice', 'assets/fonts/bitmap/iceicebaby.png', 'assets/fonts/bitmap/iceicebaby.xml');
}

Создание текста и настройка твинов

В методе create() создается объект BitmapText. Метод this.add.bitmapText() принимает координаты X и Y, ключ загруженного шрифта, строку текста и исходный размер шрифта.

Далее мы создаем два независимых твина для анимации свойств scaleX и scaleY этого текстового объекта. Твин — это анимация изменения какого-либо свойства объекта с течением времени. Оба твина нацелены (targets) на один и тот же объект text.

const text = this.add.bitmapText(100, 100, 'ice', 'Terminator', 32);

Анимация масштаба по оси X

Первый твин управляет горизонтальным масштабом. Он увеличивает свойство scaleX (масштаб по оси X) до значения 4 за 4 секунды (4000 мс). Используется функция плавности (ease) 'Quad.easeInOut', которая обеспечивает плавное ускорение в начале и замедление в конце анимации. Параметры repeat: -1 и yoyo: true заставляют анимацию повторяться бесконечно, при этом после достижения конечного значения она проигрывается в обратном порядке (от 4 обратно к 1).

this.tweens.add({
    targets: text,
    duration: 4000,
    scaleX: 4,
    ease: 'Quad.easeInOut',
    repeat: -1,
    yoyo: true
});

Анимация масштаба по оси Y

Второй твин работает аналогично, но анимирует вертикальный масштаб (scaleY). Он установлен на увеличение до значения 8 за 3 секунды (3000 мс) с другой функцией плавности 'Cubic.easeInOut'. Разная длительность и разные целевые значения масштаба для осей X и Y создают сложный, несимметричный визуальный эффект, когда текст постоянно меняет свою форму.

Важно, что твины работают независимо друг от друга, накладывая свои эффекты на один объект.

this.tweens.add({
    targets: text,
    duration: 3000,
    scaleY: 8,
    ease: 'Cubic.easeInOut',
    repeat: -1,
    yoyo: true
});

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

Комбинируя независимые твины для свойств scaleX и scaleY объекта BitmapText, вы можете создавать живые и привлекающие внимание текстовые анимации для вашей игры. Для экспериментов попробуйте: изменить значения scaleX и scaleY на меньше 1 (для эффекта сжатия), использовать разные функции плавности (ease) из документации Phaser, добавить твин для свойства angle для вращения текста или анимировать цвет текста через свойство tint.