https://i.stack.imgur.com/keCil.pngIn my Phaser3 game, I am trying to achieve the functionality where the game opens horizontally in a webview without requiring the user to rotate their phone. The vertical photo below shows the game in its current state. When I open the game vertically, it should display in landscape mode at the top of the screen without actually rotating the game itself. enter image description here
https://i.stack.imgur.com/jGp6P.jpg
Below are the configurations for my game:
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;