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

Question

I`m looking for a way to sort of zoom in/zoom out on my Phaser app depending on the screen size while keeping the ratio (and not altering the canvas size pixelwise as shown on the sketch), I tried so many snippets but everybody is sort of looking for something else, this is what I'm looking for(also, the code below where the screen gets "full screened" works on desktop but not on mobile): 我正在寻找一种方法来放大/缩小我的Phaser应用程序，具体取决于屏幕大小，同时保持比例（而不是像素描示的那样以像素方式改变画布大小），我尝试了很多片段但是每个人有点像寻找其他东西，这就是我正在寻找的（同样，下面的代码，屏幕得到“完全筛选”在桌面上工作但不在移动设备上）：

 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`);

 <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>

If you have any idea on how I could achieve this, let me know 如果您对如何实现这一点有任何想法，请告诉我

Answer 1

Can you do something like this at the start. 你能在一开始就做这样的事吗？

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");

This will only work when you load a new device but you can add screen change event to resize while screen change its up to you. 这仅在您加载新设备时有效，但您可以添加屏幕更改事件以在屏幕更改时调整大小。

Answer 2

I guess the best idea would be like: 我想最好的想法是：

    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 个解决方案

解决方案1
2 2018-03-22 17:22:39

解决方案2
0

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

问题描述

2 个解决方案

解决方案1 2 2018-03-22 17:22:39

解决方案2 0

解决方案1
2 2018-03-22 17:22:39

解决方案2
0