Phaser3 how to force screen to open in landscape mode

Question

In Phaser3, I want to open the game that will run in webview directly horizontally. In other words, I want the game to open horizontally without the user turning the phone. The white photo below is the vertical version of the game. So when I open it vertically, the game itself is landscape, but it does not sit on the screen as landscape, it stands horizontally on the top of the screen, so it does not turn the game. enter image description here

Here is my game configs :

import Phaser, { Types } from "phaser";

const ratio = window.innerWidth < 600 ? 2 : 1;

const baseGameConfig: Types.Core.GameConfig = {
  type: Phaser.WEBGL,
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: window.innerWidth * ratio,
    height: window.innerHeight * ratio,
  },
  render: {
    antialias: true,
  },
};

export default baseGameConfig;


import { Types } from "phaser";

import baseGameConfig from "@games/config.base";

import Scenes from "./src/scenes";

export const DEFAULT_WIDTH: number = 1280;
export const DEFAULT_HEIGHT: number = 720;
export const MAX_WIDTH: number = 1920;
export const MAX_HEIGHT: number = 1080;
export let SCALE_MODE: "FIT" | "SMOOTH" = "SMOOTH";

const gameConfig: Types.Core.GameConfig = {
  ...baseGameConfig,
  title: "monkeygo",
  scene: Scenes.BootScene.scene,
  physics: {
    default: "arcade",
    arcade: {
      debug: process.env.NODE_ENV !== "production",
      gravity: {
        y: 800,
      },
      fps: 30,
      fixedStep: true,
      tileBias: 32,
    },
  },
  scale: {
    mode: Phaser.Scale.NONE,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: DEFAULT_WIDTH,
    height: DEFAULT_HEIGHT,
  },
  input: {
    activePointers: 3,
  },
};

export default gameConfig;

Answer 1

within your create function you have to do the following

if(this.scale.orientation.toString() == "landscape-primary"){
///your code here
}else{
//handle your portrait case
}

but if your using a older version of phaser I think this solution might work

this.scale.forceLandscape = true;