Question

我正在寻找一种方法来放大/缩小我的Phaser应用程序，具体取决于屏幕尺寸，同时保持比例（而不是像素描示的那样以像素方式改变画布尺寸），我尝试了很多片段，但每个人都在寻找别的东西，这就是我正在寻找的东西（同样，下面的代码在屏幕上得到＆＃34;完全放映＆＃34;适用于桌面但不适用于移动设备）：< / p>

＆＃13;

var game = new Phaser.Game(1100,600, Phaser.Canvas,"gameDiv");

var mainState = {

    init: function () {

		game.renderer.renderSession.roundPixels = true;

		game.physics.startSystem(Phaser.Physics.ARCADE);

		game.physics.arcade.gravity.y = 800;

		game.physics.arcade.gravity.x = -10850;

    },
	preload: function(){

        //Loads background imagery
		game.load.image(`background`, "assets/background_1877_600.png");



	},
	create: function(){
        
        	// function to scale up the game to full screen
       // function to scale up the game to full screen
        game.scale.pageAlignHorizontally = true;
        game.scale.pageAlignVertically = true;
        
        
        game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;

        game.input.onDown.add(gofull, this);

        function gofull() {

            if (game.scale.isFullScreen)
            {
                //game.scale.stopFullScreen();
            }
            else
            {
                game.scale.startFullScreen(true);
            }

        }


		background = game.add.tileSprite(0,0,1877,600,`background`);
		
	},
	update: function(){
		background.tilePosition.x -= 0.25;
		
	}
}

game.state.add(`mainState`,mainState);
game.state.start(`mainState`);

＆＃13;

<html>

	<head>
		<title>Agame</title>
		<script type="text/javascript" src="phaser.min.js"></script>
		<script type="text/javascript" src="main.js"></script>
        <style>
            html, body{
                 overflow: hidden;
            }
        </style>
	</head>

	<body>
       
	</body>

</html>

＆＃13;

如果您对如何实现这一目标有任何想法，请告诉我

Answer 1

你可以在开始时做这样的事吗。

var x = 1100;
    var y = 600;

// window.onresize = function(event) {

// }

var w = window.screen.width;

    if(w > 900){
        //ok
    }
    else if(w > 600){
        x = 600;
        y = 400;
    }
    else {
        x = 300;
        y = 100;
    }

var game = new Phaser.Game(x,y, Phaser.Canvas,"gameDiv");

此功能仅在您加载新设备时有效，但您可以添加屏幕更改事件以在屏幕更改时调整大小。

Answer 2

我想最好的主意就是：

    html, body{
width: 100vw;
width: 100%; /*FallBack Width */
height: 100vh;
height: 100%; /*Same Here*/
}
.required-element{
font-size: 10vh; /*Or required */
}
/*And this will change according to the screen size
But, be sure add viewport to the html meta tag. */

如何在不改变像素值的情况下调整Phaser的Canvas大小？

2 个答案: