О чем этот пример
Современные игры часто требуют поддержки полноэкранного режима для лучшего погружения. Phaser предоставляет для этого удобный инструмент — Scale Manager. В этой статье мы разберем, как добавить в игру переключение в полноэкранный режим по нажатию на кнопку в интерфейсе или клавишу F, правильно настроить масштабирование и управлять визуальными состояниями кнопки. Этот подход улучшает пользовательский опыт и делает вашу игру более профессиональной.
Версия 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://raw.githubusercontent.com/phaserjs/examples/master/public/');
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 });
this.load.spritesheet('fullscreen', 'assets/ui/fullscreen.png', { frameWidth: 64, frameHeight: 64 });
}
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;
const button = this.add.image(800 - 16, 16, 'fullscreen', 0).setOrigin(1, 0).setInteractive();
button.on('pointerup', function ()
{
if (this.scale.isFullscreen)
{
button.setFrame(0);
this.scale.stopFullscreen();
}
else
{
button.setFrame(1);
this.scale.startFullscreen();
}
}, this);
this.scoreText.setText('v15');
const FKey = this.input.keyboard.addKey('F');
FKey.on('down', function ()
{
if (this.scale.isFullscreen)
{
button.setFrame(0);
this.scale.stopFullscreen();
}
else
{
button.setFrame(1);
this.scale.startFullscreen();
}
}, this);
}
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}`);
}
}
const config = {
type: Phaser.AUTO,
scale: {
mode: Phaser.Scale.FIT,
parent: 'phaser-example',
autoCenter: Phaser.Scale.CENTER_BOTH,
width: 800,
height: 600
},
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: false
}
},
scene: [ GameScene ]
};
const game = new Phaser.Game(config);
Настройка Scale Manager в конфигурации
Перед тем как добавлять кнопку, необходимо правильно настроить масштабирование игры в объекте конфигурации. Это обеспечит корректное отображение при переключении между оконным и полноэкранным режимами.
const config = {
type: Phaser.AUTO,
scale: {
mode: Phaser.Scale.FIT,
parent: 'phaser-example',
autoCenter: Phaser.Scale.CENTER_BOTH,
width: 800,
height: 600
},
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: false
}
},
scene: [ GameScene ]
};Ключевые параметры находятся в объекте scale. mode: Phaser.Scale.FIT гарантирует, что игровое поле будет масштабировано с сохранением пропорций, чтобы целиком вписаться в доступное пространство (окно браузера или полноэкранный режим). autoCenter: Phaser.Scale.CENTER_BOTH центрирует игровую область по горизонтали и вертикали. Параметры width и height задают внутреннее, логическое разрешение вашей игры, с которым вы работаете в коде.
Создание интерактивной кнопки переключения
В методе create() сцены мы создаем кнопку из спрайта и настраиваем ее реакцию на клик. Кнопка использует спрайт-лист fullscreen с двумя кадрами: 0 для состояния "окно" и 1 для состояния "полный экран".
const button = this.add.image(800 - 16, 16, 'fullscreen', 0).setOrigin(1, 0).setInteractive();Сначала кнопка позиционируется в правом верхнем углу игрового поля (координата x: 800 - 16, y: 16). Метод setOrigin(1, 0) устанавливает точку привязки спрайта в его правый верхний угол, что упрощает выравнивание. Вызов setInteractive() делает спрайт чувствительным к событиям ввода.
Затем мы подписываемся на событие pointerup:
button.on('pointerup', function ()
{
if (this.scale.isFullscreen)
{
button.setFrame(0);
this.scale.stopFullscreen();
}
else
{
button.setFrame(1);
this.scale.startFullscreen();
}
}, this);Обработчик проверяет текущий режим через свойство this.scale.isFullscreen. В зависимости от его значения, он меняет кадр кнопки с помощью setFrame() и вызывает либо this.scale.stopFullscreen() для выхода из полноэкранного режима, либо this.scale.startFullscreen() для его активации. Контекст this передается третьим аргументом, чтобы внутри функции-обработчика this ссылался на экземпляр сцены, а не на кнопку.
Добавление горячей клавиши F
Для удобства игроков, особенно на десктопе, полезно добавить переключение по клавише. В Phaser для этого используется система ввода с клавиатуры.
const FKey = this.input.keyboard.addKey('F');
FKey.on('down', function ()
{
if (this.scale.isFullscreen)
{
button.setFrame(0);
this.scale.stopFullscreen();
}
else
{
button.setFrame(1);
this.scale.startFullscreen();
}
}, this);Метод this.input.keyboard.addKey('F') создает объект Key, который отслеживает состояние конкретной клавиши. Мы подписываемся на событие down (нажатие). Логика внутри обработчика полностью идентична логике для кнопки: проверка режима, смена кадра кнопки и вызов соответствующего метода scale. Обратите внимание, что обработчик обновляет состояние той же самой кнопки button, поэтому ее внешний вид всегда синхронизирован с режимом, независимо от способа переключения.
Как работает Scale Manager
Scale Manager (this.scale) — это системный плагин Phaser, который управляет соотношением между логическим размером игры (указанным в config.scale) и физическим размером области отображения (например, окном браузера).
Основные методы и свойства, использованные в примере:
- `this.scale.startFullscreen()`: Запрашивает у браузера переход в полноэкранный режим. Это работает только в ответ на действие пользователя (клик или нажатие клавиши).
- `this.scale.stopFullscreen()`: Выходит из полноэкранного режима.
- `this.scale.isFullscreen`: Булево свойство, доступное только для чтения, которое отражает текущее состояние.Когда вы вызываете startFullscreen(), браузер разворачивает игровой canvas на весь экран. Благодаря настройке mode: Phaser.Scale.FIT в конфиге, игра автоматически масштабируется, сохраняя пропорции и не искажая изображение. Все координаты и физика продолжают работать в рамках логического размера 800x600.
Что попробовать дальше
Добавление полноэкранного режима через Scale Manager — это простой и эффективный способ повысить качество вашей игры. Мы реализовали переключение и через UI-кнопку, и через горячую клавишу, обеспечив синхронизацию их состояния. Для экспериментов попробуйте: изменить режим масштабирования в конфиге на Phaser.Scale.NONE или Phaser.Scale.ENVELOP, добавить визуальную анимацию для кнопки при переключении или реализовать проверку поддержки полноэкранного режима браузером через this.scale.fullscreen.available перед показом кнопки.