О чем этот пример
Рендер-текстура (`RenderTexture`) в Phaser — мощный инструмент для постобработки и нестандартного отображения графики. В этом примере мы рассмотрим практический кейс: как визуализировать целую игровую сцену внутри другой сцены, применить к ней тонирование и интерактивное кадрирование (crop). Этот подход полезен для создания сложных UI-элементов, таких как мини-карты, порталы, камеры наблюдения в игре или для наложения общих визуальных эффектов на часть экрана.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class GameScene extends Phaser.Scene
{
constructor ()
{
super({ key: 'gameScene', active: true });
this.player = null;
this.cursors = null;
this.score = 0;
this.scoreText = null;
}
preload ()
{
// this.load.setBaseURL('https://cdn.phaserfiles.com/v385');
this.load.image('sky', 'src/games/firstgame/assets/sky.png');
this.load.image('ground', 'src/games/firstgame/assets/platform.png');
this.load.image('star', 'src/games/firstgame/assets/star.png');
this.load.image('bomb', 'src/games/firstgame/assets/bomb.png');
this.load.spritesheet('dude', 'src/games/firstgame/assets/dude.png', { frameWidth: 32, frameHeight: 48 });
}
create ()
{
this.add.image(400, 300, 'sky');
const platforms = this.physics.add.staticGroup();
platforms.create(400, 568, 'ground').setScale(2).refreshBody();
platforms.create(600, 400, 'ground');
platforms.create(50, 250, 'ground');
platforms.create(750, 220, 'ground');
const player = this.physics.add.sprite(100, 450, 'dude');
player.setBounce(0.2);
player.setCollideWorldBounds(true);
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'turn',
frames: [ { key: 'dude', frame: 4 } ],
frameRate: 20
});
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
frameRate: 10,
repeat: -1
});
this.cursors = this.input.keyboard.createCursorKeys();
const stars = this.physics.add.group({
key: 'star',
repeat: 11,
setXY: { x: 12, y: 0, stepX: 70 }
});
stars.children.forEach(child =>
{
child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
});
this.scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });
this.physics.add.collider(player, platforms);
this.physics.add.collider(stars, platforms);
this.physics.add.overlap(player, stars, this.collectStar, null, this);
this.player = player;
// Start the RT Scene
this.scene.launch('renderScene');
}
update ()
{
const cursors = this.cursors;
const player = this.player;
if (cursors.left.isDown)
{
player.setVelocityX(-160);
player.anims.play('left', true);
}
else if (cursors.right.isDown)
{
player.setVelocityX(160);
player.anims.play('right', true);
}
else
{
player.setVelocityX(0);
player.anims.play('turn');
}
if (cursors.up.isDown && player.body.touching.down)
{
player.setVelocityY(-330);
}
}
collectStar (player, star)
{
star.disableBody(true, true);
this.score += 10;
this.scoreText.setText(`Score: ${this.score}`);
}
}
class RenderScene extends Phaser.Scene
{
constructor ()
{
super({ key: 'renderScene', active: false });
this.rt;
this.graphics;
this.offset;
}
create ()
{
// Hide the Game Scene so it doesn't render (as we don't need it rendering twice)
this.scene.setVisible(false, 'gameScene');
this.rt = this.add.renderTexture(400, 300, 800, 600);
// Tint the whole render texture
this.rt.setTint(0xff00ff, 0xffff00, 0x0000ff, 0xff0000);
this.graphics = this.add.graphics();
const cropWidth = 290;
const cropHeight = 120;
this.rt.setCrop(200, 200, cropWidth, cropHeight);
this.offset = this.rt.getTopLeft();
this.input.on('pointermove', function (pointer)
{
this.rt.setCrop(
(pointer.x - this.offset.x) - cropWidth / 2,
(pointer.y - this.offset.y) - cropHeight / 2,
cropWidth,
cropHeight
);
}, this);
}
update (time, delta)
{
const gameScene = this.scene.get('gameScene');
this.rt.clear();
this.rt.draw(gameScene.children, 0, 0);
this.rt.render();
const rt = this.rt;
const offset = this.offset;
this.graphics.clear();
this.graphics.lineStyle(1, 0x00ff00);
this.graphics.strokeRect(offset.x + rt._crop.x, offset.y + rt._crop.y, rt._crop.width, rt._crop.height);
}
}
const config = {
type: Phaser.WEBGL,
parent: 'phaser-example',
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: false
}
},
scene: [ GameScene, RenderScene ]
};
const game = new Phaser.Game(config);
Архитектура двух сцен
Проект состоит из двух сцен, работающих параллельно.
scene: [ GameScene, RenderScene ]GameScene — основная игровая сцена с платформером, физикой и логикой сбора звёзд. RenderScene — служебная сцена, единственная задача которой — визуализировать содержимое GameScene в рендер-текстуру с особыми эффектами.
Ключевой момент: после запуска RenderScene основная игровая сцена скрывается, чтобы не отрисовываться дважды — один раз напрямую, а второй раз через текстуру.
this.scene.setVisible(false, 'gameScene');Создание и настройка RenderTexture
В RenderScene.create() создаётся объект рендер-текстуры. Это своего рода холст в памяти, на который можно отрисовывать другие игровые объекты.
this.rt = this.add.renderTexture(400, 300, 800, 600);Здесь текстура создаётся размером 800x600 и позиционируется в центре (координаты 400, 300). Сразу же применяется градиентное тонирование методом setTint. Цвета задаются для четырёх углов текстуры, создавая визуальный эффект.
this.rt.setTint(0xff00ff, 0xffff00, 0x0000ff, 0xff0000);Кадрирование (Crop) и интерактивность
Одна из главных фишек примера — динамическое кадрирование рендер-текстуры. Метод setCrop определяет видимую область текстуры.
const cropWidth = 290;
const cropHeight = 120;
this.rt.setCrop(200, 200, cropWidth, cropHeight);Изначально "окно" обрезки устанавливается в координатах (200, 200). Затем слушатель события перемещения указателя мыши меняет позицию этого окна, центрируя его относительно курсора. this.offset — это вектор позиции текстуры на экране, необходимый для корректного пересчёта координат.
this.input.on('pointermove', function (pointer) {
this.rt.setCrop(
(pointer.x - this.offset.x) - cropWidth / 2,
(pointer.y - this.offset.y) - cropHeight / 2,
cropWidth,
cropHeight
);
}, this);Цикл обновления и отрисовки
Вся магия происходит в RenderScene.update(). Каждый кадр выполняются следующие шаги:
1. **Очистка:** Текстура очищается от старого содержимого.
this.rt.clear();2. **Отрисовка:** В текстуру рисуются все дочерние объекты (children) из GameScene. Важно: мы рисуем не саму сцену, а её контейнер с объектами.
this.rt.draw(gameScene.children, 0, 0);3. **Финализация:** Вызов render() завершает процесс отрисовки в текстуру для этого кадра.
this.rt.render();4. **Визуализация рамки:** С помощью Graphics поверх текстуры рисуется зелёная рамка, показывающая текущую область кадрирования. Координаты рассчитываются с учётом позиции текстуры (offset) и внутренних параметров кадрирования (rt._crop).
this.graphics.lineStyle(1, 0x00ff00);
this.graphics.strokeRect(offset.x + rt._crop.x, offset.y + rt._crop.y, rt._crop.width, rt._crop.height);Что попробовать дальше
Рендер-текстура с кадрированием открывает путь к созданию продвинутых визуальных механик в Phaser. Вы можете экспериментировать: применить к текстуре шейдерные эффекты (через setPipeline), использовать её в качестве текстуры для 3D-объекта, реализовать систему картинок в картинке для меню или создать сложную многослойную композицию интерфейса. Помните, что рендер в текстуру — операция ресурсоёмкая, поэтому используйте её обдуманно, особенно на мобильных платформах.