android – Phaser：制作背景屏幕宽度而不是内容宽度

2019-09-29 18:24:28 阅读：272 来源： 互联网

我正在使用Phaser Framework for Android制作游戏.我需要让画布填充整个屏幕宽度,然后用背景颜色填充它,然后将内容放在屏幕的中心.目前,即使我已经将画布的宽度设置为窗口宽度,Phaser仍将其重置为内容宽度,该宽度较小,然后仅使用背景填充内容宽度.

如何阻止Phaser使用内容宽度？

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');
....

解决方法:

我在我的游戏中使用此代码,它可以很好地工作,而不会改变任何元素的位置

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;

这个代码用于Boot状态

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

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

这适用于横向模式,如果你想让它像肖像更改宽度和高度一样

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

也迫使它成为肖像

这段代码在我的游戏中运行良好

标签：android,phaser-framework
来源： https://codeday.me/bug/20190929/1832697.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

android – Phaser：制作背景屏幕宽度而不是内容宽度