说说Laya微信小游戏适配问题

一 前言

经常有同行对于Laya小游戏适配问题不懂如何处理,特别是目前手机端游戏屏幕大小各不相同,宽高比例更是五花八门。

就微信开发者工具里面的模拟器屏幕大小就有以下这些:
说说Laya微信小游戏适配问题_第1张图片
模拟器里面仅仅列出的部分屏幕大小而已,Android手机的屏幕大小更是五花八门,以后随着折叠手机的出现,恐怖如何适配小游戏更是比较困难,需要好好考虑的问题了。

本文就目前出现的大部分手机屏幕,给出可以近乎完美的适配方案。对于以后出现的折叠手机的适配,到时候出现以后再说啦。
 

二 游戏设计尺寸问题

游戏界面尺寸大小建议750*1334。

为什么要这么做呢?

原因如下:
微信开发者工具模拟器里面给出的iPhone5、iPhone6、iPhone6 plus、iPhone7、iPhone7 plus、Nexus5、Nexus5x、Nexus6等这些屏幕大小宽高之比均是0.56。而750 ÷ 1334 = 0.56。

宽高之比均接近0.56。所以建议游戏界面UI尺寸设置大小为750/1334。但是对于iPhone X手机来说,就不符合这个条件,那如何才能适配呢?这个问题下文详述。

如果这个问题具体到代码,具体代码如下:

Laya.init(750, 1334, WebGL);

这行代码需要在Laya小游戏的入口处设置。
 

三 游戏缩放模式ScaleMode

这个问题就是Laya里面的屏幕缩放模式,有如下几种值:

		/**应用保持设计宽高不变,不缩放不变型,stage的宽高等于设计宽高。*/
        static SCALE_NOSCALE: string;
        
        /**应用根据屏幕大小铺满全屏,非等比缩放会变型,stage的宽高等于设计宽高。*/
        static SCALE_EXACTFIT: string;
        
        /**应用显示全部内容,按照最小比率缩放,等比缩放不变型,一边可能会留空白,
        stage的宽高等于设计宽高。*/
        static SCALE_SHOWALL: string;
        
        /**应用按照最大比率缩放显示,宽或高方向会显示一部分,等比缩放不变型,
        stage的宽高等于设计宽高。*/
        static SCALE_NOBORDER: string;
        
        /**应用保持设计宽高不变,不缩放不变型,stage的宽高等于屏幕宽高。*/
        static SCALE_FULL: string;
        
        /**应用保持设计宽度不变,高度根据屏幕比缩放,stage的宽度等于设计高度,
        高度根据屏幕比率大小而变化*/
        static SCALE_FIXED_WIDTH: string;
        
        /**应用保持设计高度不变,宽度根据屏幕比缩放,stage的高度等于设计宽度,
        宽度根据屏幕比率大小而变化*/
        static SCALE_FIXED_HEIGHT: string;
        
        /**应用保持设计比例不变,全屏显示全部内容(类似showall,但showall非全屏,
        会有黑边),根据屏幕长宽比,自动选择使用SCALE_FIXED_WIDTH或SCALE_FIXED_HEIGHT*/
        static SCALE_FIXED_AUTO: string;

缩放模式有这些值,这里不打算每种值都介绍。就平时使用来看,两种常用值SCALE_FIXED_HEIGHT和SCALE_FIXED_WIDTH。

 

SCALE_FIXED_HEIGHT模式

应用保持设计高度不变,宽度根据屏幕比缩放,stage的高度等于设计宽度,宽度根据屏幕比率大小而变化。

这种模式下,游戏高度适配手机屏幕高度,宽度随着高度的调整进行缩放显示,游戏宽高比例保持和游戏设计尺寸匹配。既然如此,就会出现一种情况是宽度和手机屏幕宽度不匹配,导致显示内容的宽度不能手机屏幕的宽度。
 

SCALE_FIXED_WIDTH模式

这种模式下,游戏宽度适配手机屏幕宽度,游戏内容宽度铺满手机屏幕宽度,高度随着游戏内容的缩放比例进行缩放,同样游戏内容宽高比保持和游戏尺寸宽高比。这种情况下,可能导致的问题是高度不能铺满手机屏幕的高度。
 

举例

在微信开发者工具里面,自定义一个超高的尺寸:

说说Laya微信小游戏适配问题_第2张图片
750/1700大小,这与游戏设计尺寸750/1334高度上不能够铺满屏幕,设计游戏缩放模式是SCALE_FIXED_WIDTH模式。

在SCALE_FIXED_WIDTH模式下,有可能出现的情况是游戏内容高度不能铺满手机屏幕。那么截图看看效果:

从效果图可以看出,首页大小适配完美,但是进入二级页面,页面底部并没有铺满整个手机屏幕大小,就出现了游戏内容高度不能铺满手机屏幕的问题。

同理,如果手机大小设置800/1334大小,游戏尺寸仍然750/1334大小,缩放模式采用SCALE_FIXED_HEIGHT,就有可能出现游戏内容宽度不能铺满整个手机的宽度的问题。

如果需要了解各个缩放模式对游戏内容的影响,看看Laya官方提供的说明文档:
http://ldc.layabox.com/doc/?nav=zh-as-1-8-3
 

四 解决方案

像上面这种情况,手机尺寸750/1700,游戏内容设计尺寸750/1334,缩放模式SCALE_FIXED_WIDTH,出现了高度不能铺满手机屏幕高度的问题,该如何解决呢?

先看解决后的效果图:

从效果图可以看出,各个二级页面屏幕宽高均适配手机屏幕大小,游戏内容均铺满了手机。

操作如下:

1、游戏设计尺寸750/1334

2、游戏缩放模式SCALE_FIXED_WIDTH

3、页面UI编辑

每个页面均有一个View。

比如,我这里的游戏页面,首页是几个按钮,该页面对应IndexPage.ui文件,在UI编辑器,IndexPage.ui文件 根部View。

说说Laya微信小游戏适配问题_第3张图片
比如这里新建页面UI文件,页面类型选择View,页面宽高对应750/1334。

这里所说的View也就是新建页面时根部的View。新建后的页面UI如下:

说说Laya微信小游戏适配问题_第4张图片

4、设置View属性

第三部新建页面View,必须设置View属性,也就是width、height、left、top、right、bottom。

View的宽高尺寸width和Height应该和游戏设计尺寸保持一直。同时设置上下左右均为0。

这种属性表示宽高和屏幕均适配,游戏内容铺满整个屏幕。

经历这四步之后,就可以达到上面修改后的效果图的效果。其实,这里使用的left top right bottom是相对布局的思想。如果开发者做过Android 前端开发的话,应该非常熟悉这种相对布局的设计。
 

五 游戏内容适配方案

上面所介绍的是游戏页面适配,相当于页面的画布,上面的操作,可以让游戏画布铺满整个手机屏幕,然后你可以在这个画布上面放游戏内容,可以保证你放在画布上的游戏内容均可以正常显示出来。

但是画布上的游戏内容,如何适配仍然需要考虑。但是游戏内容太多了,各个游戏均不相同。这里举几个例子说明,大家慢慢体会,道理是相通的。
 

5.1 图片背景

图片背景适配比较容易,如图:

说说Laya微信小游戏适配问题_第5张图片
给View添加一个Image组件,该组件的上下左右均为0。这样图片就能铺满整个页面。

需要注意的是,图片可能变形的问题。想要保证图片不变形,有能保证图片铺满整个页面,就需要设计的图片与页面的尺寸保持一样的比例,也就是750/1334大小比例。
 

5.2 颜色背景

Laya里面颜色背景有点麻烦,不如cocos好用。如图:

说说Laya微信小游戏适配问题_第6张图片
这里给页面添加一个白色的背景,给Image组件添加Rect组件,然后设置它的宽高750/1700。

Rect的宽度设计为750很好理解,但是为什么高度设计为1700呢?
原因是当前为了适配750/1700屏幕大小的手机,需要设置Rect的高为最大尺寸的手机的高度。当然目前没有这种的尺寸的手机,这里是为了说明问题。目前最大尺寸的手机高度应该是iPhone X的1624的高度,算是最高的尺寸了。其实还是因为Rect不能够性对布局,必须设置它的宽度,没办法,只能往最大手机的尺寸设置,这样就能铺满整个手机屏幕大小。
 

5.3 游戏内容

大部分手机游戏应该有三种布局,居上、居中、居下。居左和居右的内容布局很少见,暂时不聊。

游戏内容居上是UI设计的图稿,页面游戏组件从上向下布局,一切元素从上面布局,以元素的top大小布局游戏组件的位置。 这种游戏上面进行游戏UI内容的设计,底部空间也可以留下来,显示广告等。貌似微信小游戏里面好多游戏均是采用自上向下的布局,底部留下来显示微信广告的。

游戏内容居中布局,是通过设置组件的centerY属性来设置游戏组件的位置。这种布局也很常见。特别是游戏中部显示游戏内容的玩法的核心区域,核心区域上部显示游戏信息,下部显示按钮操作等等。

游戏内容居下布局,是通过设置组件的bottom属性来设置游戏组件的位置。

说说Laya微信小游戏适配问题_第7张图片
开发在拿到设计给的设计稿时,编辑UI页面,分析页面的布局,不通过x和y的值来设置组件的位置,而是通过left right top bottom centerX centerY等这几个属性来设置组件的位置。

居上 居中 居下 三种页面布局其实都是为了屏幕适配。居上布局情况下,不管屏幕大小,底部空间留下来显示广告,不遮挡游戏正常进行。而对于游戏核心区域在中部的游戏,采用居中布局的设计,如微信小游戏里面的合成数字之类的游戏,核心区域在中部,不管手机屏幕大小,可以让整个游戏的组件显示在中间。
 

六 iPhone X适配

iPhone X的适配主要是对于刘海的适配。如果没有刘海,通过以上步骤也可以适配很好。但是开发过程中,页面布局组件很满,顶部刘海遮挡了部分UI组件,这个时候就不得不进行适配。而这种适配必须通过代码中动态完成。

原因是游戏设计尺寸按照750/1334大小设计,按照这个宽高比,iPhone X的宽高比750/1624是不匹配的。如果没有刘海,通过上面提到的left top right bottom centerX centerY等可以满足屏幕适配问题。但是刘海的出现,可能遮挡了UI的显示,就需要通过代码动态调整组件的top。通过改变top值,动态添加top值,使UI组件向下移动一部分距离,不被刘海遮挡就OK啦。

首先一个问题是获取iPhone X的高度。 代码如下:

private getMobileHeight(): number {
        if (!Laya.Browser.onWeiXin) {
            return 1334;
        }

        let wxInfo = wx.getSystemInfoSync();
        console.log('wx height:', wxInfo.windowHeight, ', widht:', wxInfo.windowWidth);
        let h: number = 750 * wxInfo.windowHeight / wxInfo.windowWidth;
        console.log('h:', h);
        if (h > 1334) {
            return h;
        }

        return 1334;

    }

在iPhone X手机上,输出结果如下:
在这里插入图片描述
这段代码的意思是,如果不是在微信小游戏环境运行,直接返回1334。这样可以在调试游戏的过程中会直接使用Chrome浏览器调试,不用通过微信开发者工具调试。

如果是在微信开发者环境调试,通过页面UI宽高比对微信API返回的手机宽度缩放,得到当前手机的高度。

这里有个问题是,为什么使用750这个宽度去计算高度呢?因为游戏缩放模式使用的是SCALE_FIXED_WIDTH。微信API返回的系统屏幕宽高并不是当前手机屏幕的像素值,通过上面的宽高比例计算,可以得到当前手机的高度值。这就是iPhone X手机上1624这个高度的由来。

那如果iPhone X手机上刘海遮挡了游戏组件,如何通过代码调整组件的top值,使组件向下移动,避免被遮挡呢?
 

举例说明。

在这里插入图片描述
这个页面顶部三个按钮,iPhone X上面的刘海遮挡了按钮,然后通过代码,让这几个按钮下移,不被刘海遮挡。 效果如下:

在这里插入图片描述
效果图里面直接把几个按钮下移一定距离,避免被刘海遮挡。

代码如下:

private ajustUi(): void {
        let h: number = this.getMobileHeight();
        if (h > 1334) {
            this.mTab.top += 80 * ((h-1334)/(1624-1334));
        }
    }

代码很简单,先获取缩放之后的屏幕高度,如果高度大于设计尺寸1334,说明需要进行高度调整。对于iPhone X手机来说,h值是1624。按照代码按钮的top值增加80的距离,就是向下移动80距离。

为何这么做呢?

如果计算后的屏幕尺寸h不是1624,但是也大于1334。这个时候不能简单的top值增加80。因为这个时候增加80可能导致与其他UI组件冲突,通过上面代码中的

80 * ((h-1334)/(1624-1334))

这里基于1624的屏幕高度,计算当前手机的屏幕大小需要移动的距离,如果高度小于1624,需要移动的距离就小于80。

通过这种方式动态调整UI,即可达到适配iPhone X的目的。这里仅仅举一个例子而已,道理相通的。


欢迎关注公众号:技术印象


获取文章使用的代码,请点击这里

你可能感兴趣的:(微信小程序小游戏)