Question

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

限制是至关重要的，因为游戏（Blockly工作区的表示层）应该能够在屏幕上被扩展到更大的部分并在会话期间缩回很多次。

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

---编辑---

此

game.renderer.resize(window.innerWidth, window.innerHeight, 1.0);

不会影响游戏本身，它只会更改画布的大小，例如标记为setCollideWorldBounds设置为true的对象仍在使用初始世界大小:(

最后这个例子100％正常 https://docs.aws.amazon.com/elasticloadbalancing/latest/application/load-balancer-access-logs.html

Answer 1

在执行操作时调整渲染器的大小，但是您还需要更新世界边界以及可能的相机边界。

// the x,y, width and height of the games world
// the true, true, true, true, is setting which side of the world bounding box
// to check for collisions

this.physics.world.setBounds(x, y, width, height, true, true, true, true);

// setting the camera bound will set where the camera can scroll to
// I use the 'main' camera here fro simplicity, use whichever camera you use

this.cameras.main.setBounds(0, 0, width, height);

这就是您可以动态设置世界边界的方法。

Answer 2

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

Answer 3

以防万一其他人仍然有这个问题，我发现只是调整游戏的大小对我不起作用，而物理对我而言也无济于事。

要使其正常工作，我需要调整游戏的大小以及场景的视口（您可以通过Scenemanager来获取场景，该场景是游戏的属性）：

game.resize(width,height)
scene.cameras.main.setViewport(0,0,width,height)

Answer 4

有一些内置的调整大小支持，可以在Game Config中进行配置。签出ScaleManager选项。您可以根据需要在scale属性中指定许多选项。

我最终使用了以下内容：

 var config = {
            type: Phaser.AUTO,
            parent: 'game',
            width: 1280, // initial width that determines the scaled size
            height: 690,
            scale: {
                mode: Phaser.Scale.WIDTH_CONTROLS_HEIGHT ,
                autoCenter: Phaser.Scale.CENTER_BOTH
            },
            physics: {
                default: 'arcade',
                arcade: {
                    gravity: {y: 0, x: 0},
                    debug: true
                }
            },
            scene: {
                key: 'main',
                preload: preload,
                create: this.create,
                update: this.update
            },
            banner: false,
        };

Answer 5

对于Phaser 3，游戏的resize现在位于scale内部，如下所示：

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

但是，如果您需要整个游戏的放大和缩小，则只需要以下配置：

const gameConfig: Phaser.Types.Core.GameConfig = {
    ...
    scale: {
        mode: Phaser.Scale.WIDTH_CONTROLS_HEIGHT,
    },
    ...
};

export const game = new Phaser.Game(gameConfig);

Answer 6

查看this文章。

它解释了如何在保持游戏比率的同时动态调整画布大小。

注意：以下所有代码均来自上面的链接。我对此没有任何意义，它来自上面链接的文章，但我将在此处发布，以防链接在将来中断。

它使用CSS来使画布居中：

canvas{
    display:block;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

它会聆听窗口＆＃39;调整大小＆＃39;事件并调用函数来调整游戏大小。

倾听活动：

window.onload = function(){
    var gameConfig = {
       //config here
    };
    var game = new Phaser.Game(gameConfig);
    resize();
    window.addEventListener("resize", resize, false);
}

调整游戏大小：

function resize() {
    var canvas = document.querySelector("canvas");
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;
    var windowRatio = windowWidth / windowHeight;
    var gameRatio = game.config.width / game.config.height;
    if(windowRatio < gameRatio){
        canvas.style.width = windowWidth + "px";
        canvas.style.height = (windowWidth / gameRatio) + "px";
    }
    else{
        canvas.style.width = (windowHeight * gameRatio) + "px";
        canvas.style.height = windowHeight + "px";
    }
}

我在phaser 3项目中使用并修改了这段代码，效果很好。

如果您想查看其他动态调整大小的方法，请查看here

Answer 7

使用game.resize函数：

// when the page is loaded, create our game instance
window.onload = () => {
    var game = new Game(config);

    game.resize(400,700);
};

请注意，这仅会更改画布大小，而不会更改其他内容。

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

7 个答案: