Question

    this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    this.scale.pageAlignHorizontally = true;
    this.scale.pageAlignVertically = true;
    this.scale.refresh();

它是我在http://scaleissue.site44.com/上传的一个小游戏代码，所以请使用浏览器开发工具来查看。

正如您将注意到当你去开发工具并选择移动仿真（iphone 4,5,6 - 仅横向）时，屏幕只显示实际游戏的左上角带滚动条实际上它我应该按比例缩放游戏，以便自从我使用

以来所有游戏都显示在屏幕上

    this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

（在开发工具中，您可能需要重新加载页面以注意此问题）。我在真正的移动设备上试过这个游戏，但问题仍然存在。

所有相关的缩放代码都在boot.js

下

请帮助，因为我无法解决这个问题已经尝试了几种缩放模式。

Answer 1

您可以尝试调整画布大小：

var width=window.innerWidth,
    height=window.innerHeight,
    dpr=window.devicePixelRatio || 1;


var game = window.game[NAMESPACE].game = new Phaser.Game(1024, 480, Phaser.AUTO, 'gameDiv');

var mainState = {

    preload : function () {
        game.scale.scaleMode = Phaser.ScaleManager.RESIZE ;
        //game.canvas.style.width=width+'px';
        game.canvas.style.height=height+'px';

    },
    create : function () {
        this.stage.backgroundColor = '#0000db';
    },
    update : function () {}
};
//initialising Phaser
game.state.add('main', mainState);
game.state.start('main');

此代码背后的基本原理：canvas.width值（这是一个数字）设置游戏的大小，而canvas.style.width值（它是一个字符串）设置canvas元素的大小。为避免变形，您应在两个值中保持相同的比例（在您的情况下，比率为1024/480）。如果将ScaleManager设置为RESIZE，则会自动保持此比率，这就是我只设置高度的原因。

无法在移动设备上缩小游戏规模。它没有显示所有游戏，只是游戏的一部分

1 个答案: