phaser-framework - Phaser 3. 在运行时更改游戏的尺寸

Question

嗨，请帮助我了解如何使用 Phaser3 创建真正的响应式游戏。

响应性至关重要，因为游戏(Blockly 工作区的表示层)应该能够在屏幕上扩展到更大的部分，并在 session 期间多次收缩。

问题是如何在运行时更改游戏的尺寸？

--- 已编辑---

原来有纯 css 解决方案，canvas 可以通过 css zoom 属性进行调整。在浏览器中运行良好(对性能没有明显影响)，在cordova 应用程序(android)中也运行良好。

如果 css zoom 可以破坏事情，这是 Richard Davey 的回答:

I've never actually tried it to be honest. Give it a go and see what happens! It might break input, or it may carry on working. That (and possibly the Scale Manager) are the only things it would break, though, nothing else is likely to care much.

// is size of html element size that needed to fit 
let props = { w: 1195, h: 612, elementId: 'myGame' };

// need to know game fixed size
let gameW = 1000, gameH = 750;

// detect zoom ratio from width or height
let isScaleWidth = gameW / gameH > props.w / props.h ? true : false;

// find zoom ratio
let zoom = isScaleWidth ? props.w / gameW : props.h / gameH;

// get DOM element, props.elementId is parent prop from Phaser game config
let el = document.getElementById(props.elementId);

// set css zoom of canvas element
el.style.zoom = zoom;

Answer 1

window.addEventListener('resize', () => {
    game.resize(window.innerWidth, window.innerHeight);
});