phaser小游戏框架学习中的屏幕适配

Posted 2021-02-04 bllx

　　　　这篇博客主要讲一下上一篇博客的右侧和底部出现的问题。就是页面会有偏移量。说一下这个产生的原因吧。

　　　　一开始在构建html页面的时候，习惯性的在页面中加了

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

加了这个，导致canvas画出的图在移动端上有些模糊，尤其是后面我们在画文字的时候，文字根本看不清楚。这个其实并不是插件的问题，也不能完全归罪于这句代码。canvas本身就会出现画出的图片模糊的问题，所以网上的方式基本都是找到设备的分辨率，让canvas依据分辨率来画图。而我在这个插件中去掉那句代码，主要是因为懒。。。然后调整canvas偏移的问题就可以了。然而事实并不是这样的。

我把代码贴一下，由于这个游戏既要在pc上运行，也要在移动端运行，样式的话，想共用一套，而且，移动端界面适配很复杂，现在大部分人用的手机是全面屏的，因此，通过一个比例关系算出来全面屏和非全面屏的区别。这样是可以解决大部分的适配问题，但仍有一个问题，就是有的手机屏幕比较宽，并且高度比较小，像这种的话，建议将界面算出来，其余的部分，可以和UI和产品沟通一下，看看可不可以增加一个统一的背景图，只针对pc和这种比较宽的手机上显示，这样基本上所有的页面适配都解决了。而我们就是采用的这种方法。

/*根据设计图和屏幕宽度的比例自动缩放图片和精灵图的大小*/
var winH = window.innerHeight
var winW = window.innerWidth

console.log(winH,winW)


var H5 = winH > winW

var isGullScreen = winH/winW;//是否是全面屏

var canH,canW,bl;


if(isGullScreen>1.9 && H5 ){//全面屏
    canW = winW;
    canH = winH;
}else if(H5 && isGullScreen < 1.9){
    
    canH = winH;
    canW = canH * 640 /1136;
}else{
    canW = winH * 640 / 1136;
    canH = winH;
}

bl = canW / 640;

上述方法在后面添加文字的时候，文字也不会出现模糊的情况了。不建议在phaser的页面出现操作DOM元素的事件。除非迫不得已，因为会有很多细节的问题需要调整。