Адаптивная игра Phaser

Я много раз слышал этот вопрос.

Как мне сделать так, чтобы моя игра Phaser хорошо смотрелась на всех устройствах?

Есть много разных подходов. На первый взгляд Phaser.ScaleManager.SHOW_ALL Phaser кажется серебряной пулей. На самом деле у меня это никогда не работало. Фактически, единственный тип шкалы, который я когда-либо использовал, - это Phaser.ScaleManager.USER_SCALE, что означает Я сделаю это сам.

Мой самый распространенный метод - зафиксировать ориентацию на портретную или альбомную ориентацию, а затем кадрировать по горизонтали или вертикали. Выберите то, что больше всего подходит для вашей игры.

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

Вот код!

setupStage() {
    this.scale.scaleMode = Phaser.ScaleManager.USER_SCALE;
    if (!isMobile) this.scale.setResizeCallback(this.scaleGame);
    this.scaleGame();
  }
scaleGame = () => {
    const padding = isMobile ? 0 : 80; // include padding around the canvas frame for desktop
    const yScale = (window.innerHeight - padding) / this.game.height;
    const scale = Math.min(yScale, 1);
    this.scale.setUserScale(scale, scale);
  };

Ясно как грязь? Не стесняйтесь задавать вопросы в разделе комментариев.