Полноэкранный режим: requestFullscreen

Полноэкранный режим в Phaser позволяет игре занимать весь экран устройства, скрывая элементы интерфейса браузера, что улучшает погружение игрока и дает больший контроль над визуальным пространством. В Phaser 3 для управления полноэкранным режимом используется система Fullscreen API, интегрированная в объект this.scale внутри сцены. Основной метод — requestFullscreen().

Основные возможности Fullscreen API в Phaser

Включение полноэкранного режима Для перехода в полноэкранный режим используется метод:
```
this.scale.startFullscreen();
```
Этот метод вызывает стандартное браузерное API requestFullscreen() для корневого элемента канваса игры. Важно помнить, что вызов должен происходить в ответ на пользовательское событие (например, клик по кнопке), иначе браузеры блокируют переход в полноэкранный режим.
Выход из полноэкранного режима Для возврата к обычному размеру окна используется:
```
this.scale.stopFullscreen();
```
После вызова canvas возвращается к первоначальному размеру, а элементы браузера снова становятся видимыми.
Проверка состояния полноэкранного режима Для того чтобы определить, находится ли игра в полноэкранном режиме, можно использовать свойство:
```
this.scale.isFullscreen
```
Возвращает true, если игра отображается во весь экран, и false в противном случае.

Настройка поведения при переходе в полноэкранный режим

Phaser предоставляет несколько настроек через объект this.scale для гибкой работы с размерами и ориентацией экрана:

mode – определяет способ масштабирования игры:
```
this.scale.mode = Phaser.Scale.FIT; // масштабирование с сохранением пропорций
```
Другие варианты: Phaser.Scale.ENVELOP, Phaser.Scale.NONE.
autoCenter – управление центровкой канваса:
```
this.scale.autoCenter = Phaser.Scale.CENTER_BOTH;
```

on(‘enterfullscreen’) / on(‘leavefullscreen’) – события, вызываемые при входе и выходе из полноэкранного режима:

this.scale.on('enterfullscreen', () => {
    console.log('Игра перешла в полноэкранный режим');
});

this.scale.on('leavefullscreen', () => {
    console.log('Игра вышла из полноэкранного режима');
});

Интерактивное управление полноэкранным режимом

Чаще всего полноэкранный режим активируется через пользовательский интерфейс, например, кнопку. Пример кнопки с переходом в полноэкранный режим:

let fullscreenButton = this.add.text(10, 10, 'Полноэкранный режим', { fontSize: '24px', fill: '#fff' })
    .setInteractive()
    .on('pointerup', () => {
        if (!this.scale.isFullscreen) {
            this.scale.startFullscreen();
        } else {
            this.scale.stopFullscreen();
        }
    });

Ключевые моменты:

Метод setInteractive() делает текст кликабельным.
Событие pointerup гарантирует, что переход в полноэкранный режим выполняется именно после действия пользователя.
Проверка this.scale.isFullscreen позволяет переключать между полноэкранным и оконным режимом.

Особенности поведения на мобильных устройствах

На мобильных устройствах API работает аналогично, но существуют ограничения:

Полноэкранный режим доступен только после пользовательского взаимодействия.
На iOS в Safari requestFullscreen() применяет «standalone» режим, что не всегда занимает весь экран из-за элементов интерфейса iOS.
Рекомендовано использовать Phaser.Scale.FIT с autoCenter для корректного отображения канваса на экранах разных размеров.

Масштабирование и адаптивность

При активации полноэкранного режима канвас автоматически растягивается, но для корректного отображения важно настроить scale manager:

this.scale.resize(window.innerWidth, window.innerHeight);
this.cameras.main.setViewport(0, 0, window.innerWidth, window.innerHeight);

Это гарантирует, что камера Phaser правильно охватывает всю игровую область, а объекты остаются в нужных позициях при изменении размера экрана.

Сводка ключевых методов и событий

Метод / свойство	Назначение
`this.scale.startFullscreen()`	Включение полноэкранного режима
`this.scale.stopFullscreen()`	Выход из полноэкранного режима
`this.scale.isFullscreen`	Проверка состояния полноэкранного режима
`this.scale.on('enterfullscreen', callback)`	Событие входа в полноэкранный режим
`this.scale.on('leavefullscreen', callback)`	Событие выхода из полноэкранного режима
`this.scale.resize(width, height)`	Изменение размеров канваса вручную