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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    bitmaptext;
    rt;

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

    create ()
    {
        this.bitmaptext = this.add.bitmapText(0, 0, 'desyrel', 'PHASER 3\nRender Texture', 64);

        this.bitmaptext.setVisible(false);

        this.rt = this.add.renderTexture(400, 300, 800, 600);
    }

    update ()
    {
        this.rt.camera.rotation -= 0.01;

        this.rt.clear();

        this.rt.draw(this.bitmaptext, 300, 400);

        this.rt.render();
    }
}

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

const game = new Phaser.Game(config);

Зачем использовать текстуру вместо текста?

Phaser поддерживает системные шрифты, загрузку TTF/WOFF, веб-шрифты. Но если шрифт должен выглядеть пиксельно (pixel font) или вы хотите предварительно отрендерить сложный текст для производительности — используйте BitmapText.

Обычный Text каждый кадр рендерится через Canvas/WebGL. BitmapText — это готовая текстура, отрисовывается как спрайт. Это быстрее для часто изменяемого текста.

Также BitmapText позволяет использовать кастомные растровые шрифты, соранить эффе кты тени, градиенты) один раз при создании.

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

Сначала загрузите растровый шрифт (обычно .png + .xml или .fnt).

preload() {
  // Укажите базовый URL для загрузки ресурсов
  this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
  
  // Загрузите растровый шрифт
  this.load.bitmapFont('desyrel', 'assets/fonts/bitmap/desyrel.png', 'assets/fonts/bitmap/desyrel.xml');
}

После загрузки шрифт будет доступен по ключу 'desyrel'.

Создание текста как текстуры

Используйте add.bitmapText для создания объекта. Его можно анимировать, трансформировать как любой спрайт.

create() {
  // Создаем bitmapText в позиции (100, 200)
  const myText = this.add.bitmapText(100, 200, 'desyrel', 'Phaser 3\nRender Texture', 64);
  
  // Делаем невидимым исходный текст
  myText.setVisible(false);
}

Параметры: x, y, ключ шрифта, строк а текста, размер.

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

Render Texture — это специальный объект, который работает как холст: на него можно рендерить другие объекты, а потом использовать как текстуру.

create() {
  // ... создание bitmapText (код выше)
  
  // Создаем Render Texture размером 800x600
  const rt = this.add.renderTexture(400, 300, 800, 600);
  
  // Очищаем текстуру (опционально)
  rt.clear();
  
  // Рисуем наш текст на текстуре
  rt.draw(myText, 300, 400);
  
  // Фиксируем изменения
  rt.render();
}

Теперь rt — это спрайт с нашим текстом. Его можно масштабировать, вращать, применять фильтры.

Полный пример: вращающийся текст-текстура

class Example extends Phaser.Scene {
  constructor() {
    super();
    this.bitmapText = null;
    this.rt = null;
  }

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

  create() {
    // Создаем скрытый bitmapText
    this.bitmapText = this.add.bitmapText(0, 0, 'desyrel', 'PHASER 3\nRender Texture', 64);
    this.bitmaptext.setVisible(false);

    // Создаем Render Texture
    this.rt = this.add.renderTexture(400, 300, 800, 600);
    
    // Очищаем и рисуем текст по центру
    this.rt.clear();
    this.rt.draw(this.bitmapText, 300, 400);
    this.rt.render();
  }

  update() {
    // Вращаем текстуру каждый кадр
    this.rt.camera.rotation -= 0.01;
    
    // Очищаем и перерисовываем (если текст динамический)
    this.rt.clear();
    this.rt.draw(this.bitmapText, 300, 400);
    this.rt.render();
  }
}

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

const game = new Phaser.Game(config);

В этом примере текст рендерится в текстуру, которая плавно вращается. Если бы текст менялся, нужно перерисовывать его на текстуру в update().

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

BitmapText + Render Texture дают контроль над отображением текста. Вы можете: • Использовать пиксельные шрифты • Применять эффекты один раз (тень, свечение) • Анимировать текст как единый спрайт • Оптимизировать рендеринг статического текста Это мощный инструмент для кастомных интерфейсов и визуальных эффектов в играх.