javascript - In phaser 3 what is the efficient way to transition from portrait to landscape and vice versa - Stack Overflow

admin管理员组

文章数量:1401167

import Phaser from 'phaser';
import PlayScene from './PlayScene';
import PreloadScene from './PreloadScene';
import QuestionScene from './QuestionScene';
import NotificationBannerScene from './NotificationBannerScene';

import backgroundImage from './assets/backgroundtest.svg';

// Apply the background image to the body
document.body.style.background = `url(${backgroundImage}) no-repeat center center / cover`;

const Scenes = [
  PreloadScene, 
  PlayScene, 
  QuestionScene, 
  NotificationBannerScene
];

const createScene = Scene => new Scene()

const initScenes = () => Scenes.map(createScene)

const { screen, innerWidth, innerHeight, devicePixelRatio: dpr } = window;

const width = dpr === 1 
  ? screen.width 
  : innerWidth * dpr;

const height = dpr === 1 
  ? screen.height 
  : innerHeight * dpr;

const config = {
  type: Phaser.CANVAS,
  transparent: true,
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    parent: 'game-container', 
    width: width,
    height: height
  },
  physics: {
    default: 'arcade'
  },
  scene: initScenes()
};

new Phaser.Game(config);

I have the above index.js then I use this.scale.width and this.scale.height for scaling sprite my problem now is if the user starts from portrait to landscape it become distorted. Right now I'm planning to use landscape size of mobile in portrait and landscape is this ok? or is there a better way?

import Phaser from 'phaser';
import PlayScene from './PlayScene';
import PreloadScene from './PreloadScene';
import QuestionScene from './QuestionScene';
import NotificationBannerScene from './NotificationBannerScene';

import backgroundImage from './assets/backgroundtest.svg';

// Apply the background image to the body
document.body.style.background = `url(${backgroundImage}) no-repeat center center / cover`;

const Scenes = [
  PreloadScene, 
  PlayScene, 
  QuestionScene, 
  NotificationBannerScene
];

const createScene = Scene => new Scene()

const initScenes = () => Scenes.map(createScene)

const { screen, innerWidth, innerHeight, devicePixelRatio: dpr } = window;

const width = dpr === 1 
  ? screen.width 
  : innerWidth * dpr;

const height = dpr === 1 
  ? screen.height 
  : innerHeight * dpr;

const config = {
  type: Phaser.CANVAS,
  transparent: true,
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    parent: 'game-container', 
    width: width,
    height: height
  },
  physics: {
    default: 'arcade'
  },
  scene: initScenes()
};

new Phaser.Game(config);

I have the above index.js then I use this.scale.width and this.scale.height for scaling sprite my problem now is if the user starts from portrait to landscape it become distorted. Right now I'm planning to use landscape size of mobile in portrait and landscape is this ok? or is there a better way?

• javascript
• phaser-framework

Share Improve this question Follow edited Mar 24 at 1:15 Barmar 784k5757 gold badges548548 silver badges660660 bronze badges asked Mar 24 at 0:44 Newboy11Newboy11 3,14488 gold badges3030 silver badges4848 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

It depends on your game, gamelayout, logic,... but I would, just have Scenes for Portrait and Scenes fos Landscape, on the switch event (screen.orientation), I would than transition to the other version of the Scene.

I usually try to I prevent rotation, with modals or lock.

本文标签：