移相器：制作背景屏幕宽度，而不是内容的宽度 [英] Phaser: Make background screen-width instead of content-width

问题描述

我在做一个游戏使用移相器框架为Android。我需要在画布上填满整个屏幕宽度，然后淹没它的背景颜色，然后把内容在屏幕的中央。目前，尽管我已经设置画布窗口宽度的宽度，移相器仍然将其重置为内容的宽度，这是更小的，那么只填充背景内容的宽度。

如何停止移相器使用内容的宽度？

  VAR gameObj =新Phaser.Game（$（母公司）宽（），700，Phaser.CANVAS，父）;

gameObj.stage.backgroundColor ='＃A6E5F5;
gameObj.load.image（'prld'，'prl.png'）;

gameObj.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
gameObj.scale.pageAlignHorizo​​ntally = TRUE;
gameObj.scale.pageAlignVertically = TRUE;
gameObj.scale.setScreenSize（真正的）;
gameObj.scale.refresh（）;

gameObj.stage.backgroundColor ='＃A6E5F5;

//加载内容在这里
gameObj.load.image（H1，RES1 / h1.png'）;
gameObj.load.image（'H2'，'RES1 / h2.png'）;
....
G = gameObj.add.group（）;
g.create（20，20，'H1'）;
g.create（60，20'，H2'）;
....
 

解决方案

我用这个code。在我的比赛，它的工作很不错没有任何元素的位置变化

  VAR targetWidth = 720; //我们希望游戏的宽度
VAR targetHeight = 480; //我们希望游戏的高度

//附加比率

//小 -  360x240
//正常 - 小480x320
//大 -  720×480
// XLARGE  - 的960x640
// XXLarge  -  1440x960

VAR deviceRatio =（window.innerWidth / window.innerHeight）; //设备长宽比

VAR newRatio =（targetHeight / targetWidth）* deviceRatio; //新的比例，以适应屏幕

VAR newWidth = targetWidth * newRatio;
VAR newHeight = targetHeight;

VAR gameWidth = newWidth;
VAR gameHeight = newHeight;
VAR gameRendrer = Phaser.AUTO;
 

这code为开机状态下

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

        game.scale.pageAlignHorizo​​ntally = TRUE;
        game.scale.pageAlignVertically = TRUE;
        game.scale.forceLandscape =真;
        game.scale.setScreenSize（真正的）;
 

这为横向模式，如果你想使之成为纵向变化的宽度和高度像

  VAR targetWidth = 480; //我们希望游戏的宽度
VAR targetHeight = 720; //我们希望游戏的高度
 

还强制其肖像

这code在我的游戏运行良好

I am making a game using the Phaser Framework for Android. I need to make the canvas fill the entire screen width and then flood it with background color, then put content in the center of screen. Currently, even though I already set the width of the canvas to window width, Phaser still reset it to content width, which is smaller, then filling only the content width with background.

How do I stop Phaser from using content width?

var gameObj = new Phaser.Game($(".parent").width(), 700, Phaser.CANVAS, 'parent');

gameObj.stage.backgroundColor = '#A6E5F5';
gameObj.load.image('prld', 'prl.png');

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

gameObj.stage.backgroundColor = '#A6E5F5';    

// Load Content Here
gameObj.load.image('h1', 'res1/h1.png');
gameObj.load.image('h2', 'res1/h2.png');
....
g = gameObj.add.group();
g.create(20, 20, 'h1');
g.create(60, 20, 'h2');
....

解决方案

i use this code in my game and it work very nice without changing in position of any elements

var targetWidth = 720; // the width of the game we want
var targetHeight = 480; // the height of the game we want

// additional ratios

//Small – 360x240
//Normal – 480x320
//Large – 720x480
//XLarge – 960x640
//XXLarge – 1440x960

var deviceRatio = (window.innerWidth/window.innerHeight); //device aspect ratio

var newRatio = (targetHeight/targetWidth)*deviceRatio; //new ratio to fit the screen

var newWidth = targetWidth*newRatio;
var newHeight = targetHeight;

var gameWidth = newWidth;
var gameHeight = newHeight;
var gameRendrer = Phaser.AUTO;

and this code for Boot state

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

        game.scale.pageAlignHorizontally = true;
        game.scale.pageAlignVertically = true;
        game.scale.forceLandscape = true;
        game.scale.setScreenSize(true);

this for landscape mode if you want to make it for portrait change width and height like

var targetWidth = 480; // the width of the game we want
var targetHeight = 720; // the height of the game we want

also force it to portrait

this code work well in my games

这篇关于移相器：制作背景屏幕宽度，而不是内容的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！