详解LayaAir引擎游戏屏幕适配,及有效抗锯齿

2020-03-09 10:33:29 浏览数 (1)

有的时候看到一些3D游戏锯齿感特别明显,与一些开发者沟通后发现,其实很多人并不清楚怎么能去掉明显的锯齿感,而这并不是只有新开发者才遇到的问题,很多游戏研发经验丰富的开发者,甚至是使用LayaAir引擎开发了很多游戏的开发者也会不清楚。另外,最近也遇到有开发者想了解刘海屏如何适配,所以通过本篇文章全面介绍一下。

为了兼顾新手开发者来理解这个事,本篇从基础概念入手,详细介绍LayaAir引擎的各个屏幕适配缩放模式,刘海屏适配思路,以及如何有效的抗锯齿。

一、基础概念

以下基础概念非常重要,会影响到后面引擎适配原理的理解,请大家认真阅读。

1.1 物理分辨率

物理分辨率简单理解就是硬件所支持的分辨率,以像素(px)为单位,所以我们称这个硬件上的每一个像素点为物理像素,也叫设备像素。将屏幕实际存在的像素以行数 × 列数这样的数学表达方式体现出来,就是物理分辨率。比如 iPhone8 的物理分辨率是1334 × 750 。而我们进行屏幕适配时,表达方式会有所不同,会以屏幕宽的像素数量 × 屏幕高的像素数量这样来体现。例如 iPhone8在默认的竖屏状态下,物理分辨率表达为750 × 1334。横屏状态下,物理分辨率表达为1334 × 750 。所以大家需要能理解这些区别。

1.2 缩放因子与逻辑分辨率

1.2.1 缩放因子 起源

iOS绘制图形是以 point (pt)为单位,在早期的时候1 point=1 pixcel。在2010年推出的iPhone4开始采用 Retina(视网膜) 屏幕显示技术 ,物理分辨率提升了4倍,此时,如果iPhone4还是1pt=1px这个方案,将会导致如下图一样的显示效果。

 (图1) (图1)

在图1中,按 iPhone3GS的320 × 480进行全屏设计,那在iPhone4下的显示效果则如图1左侧,原来的满屏内容只占了四分之一,其余部分留空。而按iPhone4分辨率 640 × 960进行全屏设计,那在iPhone3GS的屏幕下显示效果则如图1右侧,大量内容超出可显示区。

很显然,apple不会让图1的事情发生。实际上,iPhone4的缩放因子为@2X,也就是在这个机型上1个point 用2×2的像素矩阵来表示,如图2中效果所示,完美解决图1中可能发生的问题。

(图2)(图2)

随着时代的发展,后续的机型物理分辨率也越来越高,1个point占用的物理像素也越来越多,见下图。

(图3)(图3)

缩放因子的概念在安卓机型中也适用

1.2.2 逻辑分辨率

逻辑分辨率简单理解就是软件所使用的分辨率,我们设计适配全靠他,也是用乘法数学表达方式来体现。为了更好的理解这个概念,我们先看一组数据表格。

(图4)(图4)

通过图4的数据,我们可以看出,随着手机设备的更新,物理分辨率已经越来越高,如果我们按物理分辨率来进行屏幕适配,先不算安卓,光iPhone的机型就很碎片化了,还好,在缩放因子的作用下,我们看到逻辑分辨率基本上变化不大,所以我们后面讲的引擎适配,主要是针对逻辑分辨率进行适配。

1.3 DPR

我们基于浏览器开发时,之前介绍的缩放因子概念对应的是DPR (Device Pixel Ratio),中文叫设备像素比 。LayaAir引擎中通过 Laya.Browser.pixelRatio 可以获得浏览器的DPR值。

这里稍展开讲几句,在浏览器里,默认是由用户来控制缩放的,例如,我们在手机浏览器双指扩张,发现网页会放大,但清晰度并不减小。这就是用户自主缩放导致,并非是由DPR值来决定缩放。如果我们想和APP开发那样,通过逻辑分辨率来适配,让浏览器依据设备的DPR来决定一个CSS像素占用几个物理像素。那需要在入口HTML页面的的meta标签中用 viewport进行了相关的配置。代码如下:

代码语言:txt复制
 <meta name='viewport' content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no'/>

以上代码LayaAir引擎中默认添加,并强制添加不得删除。

通过上面这段viewpot的配置,那页面在禁止用户手动缩放的同时,也会按设备的DPR进行自动缩放。

1.4 逻辑宽高

逻辑宽高是指逻辑分辨率的宽高。浏览器里,可以缩放的逻辑分辨率像素是CSS像素,在设置了viewport的情况下,浏览器会根据DPR的值决定一个CSS占用多少个像素,例如DPR为3时,1个CSS像素就占用3×3个物理像素。

LayaAir引擎里可以通过Laya.Browser.clientWidth获取逻辑分辨率的宽,通过Laya.Browser.clientHeight获取逻辑分辨率的高。

在手机等移动设备的竖屏状态下,窄面为宽,长面为高。如果发生了屏幕翻转的横屏状态,则长的一面为宽,窄面为高。

在PC浏览器中,则是获取的浏览器窗口可视宽高。

1.5 物理宽高

物理宽高对应的是之前介绍的物理分辨率概念,在LayaAir引擎的一些API注释里也写作屏幕宽高,其实是一回事。开发者可以通过引擎封装的接口获得宽高值,通过Laya.Browser.width可以得到物理宽,通过Laya.Browser.height可以得到物理高。

不过,需要特别说明的是,LayaAir引擎中的物理宽高是通过逻辑宽高*DPR计算而来。而奇葩的iPhone6/7/8各Plus机型,逻辑分辨率是736×414,DPR的值是3,相乘得到的结果显然与真实的各Plus机型物理分辨率1920×1080不符合。

讲到这里,开发者了解到有这回事即可,不用担心适配错误,由于LayaAir引擎在入口网页的meta标签中用 viewport进行了相关的配置,所以会按DPR自动进行缩放,最终会自动缩放到对应到实际的物理分辨率。

至于Plus机型为什么要这样奇葩的设置,这里就不展开讲了,有兴趣的同学可以自行百度搜索答案。

1.6 设计宽高

设计宽高是开发者在设计产品时采用的宽高,面对众多机型,选择哪个作为设计宽高,也是一些新手开发者有点迷茫的,这里简单多说几句。

(图5)(图5)

设计宽高,首先要考虑的是优先兼容多数的常用屏幕比例。通过上面图5的表格,我们看到去掉过时的机型,基本上手机屏幕就分两类,一类是宽高比约为1:1.78的非全面屏手机,另一类是宽高比约为1:2.17全面屏手机。各品牌的安卓机型屏幕比例,大多也是这两种或者接近这两种。

基于性能优先的原则,通常开发者都会选择分辨率小一些的作为主效果设计,然后向其它比例屏幕进行适配。比如:常见的宽750高1334宽720高1280

以上宽高描述是指竖屏模式设计,横屏需反过来。

在LayaAir引擎里,初始化引擎的init(宽,高)值对应的就是设计宽高。如Laya.init(750, 1334);

打开LayaAirIDE,通过F9快捷键调出的面板里,可以直接设置,效果如图6所示。

(图6)(图6)

1.7 画布宽高

众所周知,<canvas>是HTML5中的画布,其 width、heigth 属性就是画布宽高。

画布宽高在noscale、exactfit、noborder这几个LayaAir引擎适配模式下会直接采用设计宽高值,其它适配模式下,会根据适配规则产生变化。画布宽高的值对画面最终的清晰度以及性能都会产生影响,甚至边缘锯齿或画面模糊也与此处画布宽高值有关。

我们在IDE里任意发布运行一个页面, 在打开的chrome里用F12进入调试模式后,入口页面中找到id为 layaCanvas的canvas标签。记住这个位置,图7中红圈标记的,就是画布的宽高,后面理解屏幕适配模式的时候,大家可以多关注这里。

(图7)(图7)

1.8 适配宽高

由于Canvas是基于位图像素绘图的,画布宽高对画面质量及性能有影响,又或者诸如plus特殊的分辨率等问题。所以不能通过直接改变画布宽高来适配,否则会出来一些适配问题。在LayaAir引擎中会根据不同的适配模式规则,计算出适配宽高需要缩放的比例,然后通过transform的matrix(矩阵)来对画布缩放至逻辑分辨率范围内,再通过viewport与DPR机制缩放还原。

基于以上种种,我们需要了解适配宽高这个概念,适配宽高才是适配规则处理后的最终效果宽高,会直接影响通过DPR还原后的最终效果。

大家在理解各个适配模式的时候,可以在HTML入口页面中观察画布宽高与transform的matrix(矩阵)缩放效果来对比不同模式之间的差异。例如图8中红圈标记所示,适配宽高分别为249.99975和444.666222。还原至物理分辨率大小后,虽然有精度上的细微损失,但已经很难看出。

(图8)  (图8)

1.9 舞台宽高

舞台宽高是指LayaAir引擎的stage宽高,stage宽高的变化并不会影响到画面的大小,但stage范围内,可以控制显示,可以进行事件监听,碰撞检测等,所以stage宽高的适配还是非常重要的。

在不同的屏幕分辨率比例下,总会有适配规则不能覆盖到,难以做到既想等比缩放,又想在各种屏幕下都做到游戏内容满屏显示。但其实上,只要舞台宽高可以占满全屏,那就一定可以做到各屏幕全屏显示。因为,游戏的显示与控制就是基于舞台的,舞台全屏就有了在适配的基础上调整显示的空间,毕竟不可能超出舞台来显示游戏内容。

默认情况下,stage宽高直接等于设计宽高。在full、fixedwidth、fixedheight、fixedauto的适配模式下,stage宽高会根据适配规则产生变化。

二、抗锯齿相关介绍

由于讲layaAir引擎的适配模式会涉及到useRetinalCanvas属性设置,所以我们先了解一下抗锯齿相关。

2.1 开启视网膜画布模式

在微信安卓7.0.3版本前,微信安卓小游戏会将画布强制设置为物理分辨率,后在7.0.3取消了强制更改画布宽高,但在有些模式下,可能会将画布强行拉伸至物理屏幕的全屏显示,所以当时还导致很多适配模式没有使用正确的开发者,纷纷出现画面模糊的表现。这就是因为画布宽高达到物理分辨率才是真高清,拉伸会变模糊,比例不是相差太大的图片还好些,尤其是文字更为明显。

另外,由于微信小游戏与浏览器的绘制差异问题,在某些适配模式下,可能会出现适配问题,比如顶部出现留底问题等。而在OPPO和vivo等小游戏平台,如果画布不采用物理分辨率模式一定会出现适配问题,所以对于QQ,vivo、OPPO、支付宝小游戏平台,引擎适配发布的时候会强行开启视网膜画布模式。对于没有强行开启的平台,比如微信小游戏平台,我们建议开启引擎的视网膜画布模式。

一旦开启后,引擎将无视设计宽高大小,强制把画布宽高设置为物理分辨率的大小。这样就保障了画布的最佳显示效果。

开启的方式有两种,一种是在初始化舞台之前,也就是init()之前添加一行配置代码。代码如下:

代码语言:txt复制
//使用视网膜画布模式,在init之前使用
Config.useRetinalCanvas = true;

如果想动态控制视网膜画布模式的开和关,也可以用另一种设置模式,在init()之后同一帧内添加配置代码。代码如下:

代码语言:txt复制
//使用视网膜画布模式,在init之后使用
Laya.stage.useRetinalCanvas = true;

这里需要提醒一下的是,如果不是在init()之后的同一帧内使用useRetinalCanvas模式配置的,那我们设置之后,需要同步设置Stage的scaleMode、width、height、alignH、alignV中的任意一个,激活Stage修改才会生效。只是设置Laya.stage.useRetinalCanvas并不会生效。

代码语言:javascript复制
Laya.stage.useRetinalCanvas = false;//关闭Retinal模式
Laya.stage.scaleMode = GameConfig.scaleMode; //重新设置Stage,让Retinal配置生效

2.2 对性能的影响与取舍

一旦开启视网膜画布模式后,有的开发者会比较担心性能问题,毕竟采用物理分辨率作为画布宽高后,代表着画布上的像素可能会比原有设计宽高要多,这的确会对性能产生影响。但绝对没有想象中差距那么大,尤其是越高分辨率的机型,通常硬件条件也会更好一些。根据我的推荐,一些开发者调整之后,事实上也没有太大的影响。

更何况,可以通过判断机型或分辨率,进行动态控制视网膜画布模式的开关。也有的开发者,在一些压力比较大的页面上关闭视网膜画布模式,其它页面开启视网膜画布模式。

2.3 如何消灭锯齿

我们屏幕的像素点,是由行与列的矩阵序列组成。也就是说屏幕中是不存在斜线的。基于像素绘图的画布,要是画横竖的直线,那绝对是相当的平滑。可是画曲线和斜线怎么办。只能是由两个相邻的像素点不断重复延申组成,如果这句话不好理解,我们想象一下楼梯,从侧面去看,大概就是这个样子。

另外,3D模型的基础构成是三角面组成的多边形网格,绘制3D多边形构成的模型,这和我们矢量画斜线、画曲线、画圆,是一样的道理。所以非矩形的矢量图形和3D模型,产生锯齿这是正常的。当然LayaAir引擎内置了抗锯齿方法,并且在3D库中默认开启了,2D想开启的话可以在init()之前加入Config.isAntialias =true;

开启抗锯齿后,边缘锯齿会变的平滑模糊,示意效果如图9-1所示。

(图9-1) (图9-1)

模糊后的锯齿相对会平滑一些,在像素密度比较高的屏幕上,肉眼很难看出。从而达到消灭锯齿感的目标。

如果抗锯齿在开启状态下,发现仍然是无效的。那就需要检查是不是使用了相机的HDR或者后期处理。webGL 1.0不支持renderTarget有抗锯齿,所以想避免锯齿感的,要在Unity里导出资源时,不要勾选HDR相关选项。或者直接在引擎里,创建相机后关闭HDR。示例代码如下:

代码语言:txt复制
this.camera = new Laya.Camera(0, 0.1, 100);
this.camera.enableHDR = false; //关闭HDR

关闭HDR后,抗锯齿生效对比效果如图9-2所示。

图9-2图9-2

开发者对于后期处理使用的不多,想避免锯齿感的,那后期处理也不要使用了。通常导致抗锯齿失效的原因就是HDR。

如果说抗锯齿有效的情况下,还是有锯齿感,那就是和画布大小有关了,我们先看图10中的效果。

(图10)(图10)

在图10左侧,是画布物理宽高一致的情况下,画布像素与物理像素是重合的。图10右侧,当画布宽高小于物理宽高时,被适配规则将画布拉伸至全屏后,导致的画布像素与物理像素产生偏差错位。这就是加重边缘锯齿的根本原因,导致引擎抗锯齿功能也很难完全消除过于明显的锯齿现象。

所以解决办法就是使用物理分辨率的适配模式,或者在当前适配模式的基础上,开启视网膜画布模式,将画布强行按物理分辨率进行设置。

这样一来,在有效的抗锯齿开启以及物理宽高的画布双重保障下,锯齿感就很难在手机屏幕上察觉了。

三、LayaAir屏幕适配模式详解

LayaAir引擎的适配模式有8种,为了让大家真正理解各适配模式的适配策略,以便更好的进行屏幕适配。本节以LayaAirIDE创建的2D示例项目为例,将设计宽高调整为750×1334的竖屏界面,分别就各个适配模式对比不同机型进行讲解。

在适配对比的机型选择方面,iPhone4的640 × 960代表老旧机型,宽高比为1.5,只是为了对比适配效果。iPhone8的750 × 1334是我们为设计宽高选定的机型,宽高比约为1.78,无论哪个模式都是完美的1:1适配。iPhone8 Plus代表着同样约为1.78宽高比,但物理分辨率和DPR都与iPhone8不同的同比例机型。iPhoneX代表着宽高比大于2的各种全面屏机型。

3.1 最容易理解的适配模式

3.1.1 默认的不缩放模式noscale

noscale模式是引擎默认的模式。该模式下,在任何屏幕都会始终保持设计时的物理分辨率原样效果,相当于将不缩放的设计宽高画布直接贴在屏幕上。物理宽高和设计宽高相等的屏幕会全屏显示,物理宽高低于设计宽高的会显示不全,物理宽高超过设计宽高的会留出屏幕背景(白屏)。

该模式通常不被使用,仅有少数不使用引擎适配方案,有着自定义适配规则的开发者来使用。

noscale模式,不同机型对比效果如图11-1中所示。

(图11-1)(图11-1)

3.1.2 物理分辨率画布模式full

full模式表示着画布宽高和舞台宽高一定是完整的全屏状态,但和noscale模式一样,并没有对设计宽高做缩放处理。在full模式下,画布大小直接取值物理分辨率,物理宽高是多少,画布就有多大,该模式下设计宽高参数的设置无意义,直接设置0,0即可。

该模式仍需要自己定义适配规则,多用于3D游戏。如果有UI界面,不想自己定义适配规则的,后面还会介绍更优的3D适配方案。

full模式,不同机型对比效果如图11-2中所示。

(图11-2)(图11-2)

特别说明一下,背景屏幕颜色为黑色的是画布默认背景色,不是stage背景色。通过Laya.stage.bgColor可以改变默认的画布背景色。在noscale模式下的白屏背景那是浏览器默认的,说明画布就那么大,画布没覆盖到的地方就是白屏背景。

假如在noscale模式下,开启了视网膜画布模式,那显示效果将会与图11-2的full模式效果相同,但区别是,full模式舞台(stage)宽高也是物理宽高,所以在游戏画面覆盖到的地方仍然可以有点击等事件响应。而noscale开启视网膜画布模式,只是强行将画布改为物理宽高,并没有改变舞台宽高,所以游戏画面(设计宽高)外的部分并不会对点击等事件产生响应。

3.1.3 强行拉伸全屏模式exactfit

exactfit是一种不等比的全屏拉伸适配模式,画布宽高与舞台宽高会等于游戏设计宽高 。然后完全不考虑比例强行缩放至逻辑宽高全屏。所以除非是设计宽高与物理宽高相等,否则就会有一些因拉伸产生的变形。屏幕分辨率宽高比与设计宽高比差距越大的,变形的越明显。

拉伸至物理宽高全屏,所以除非是设计宽高与物理宽高相等,否则就会有一些因拉伸产生的变形。不同机型的宽高比例差距越大,变形的越明显。

该模式是所有适配模式中,唯一不需要开发者作额外的适配调整,就能保障在任何机型下都可以全屏显示、不留空白、不被裁切的适配模式,缺点也很明显,就是当物理宽高比例与设计宽高比例不同时,会产生拉伸变形,适用于对界面产生形变没有严格要求的开发者。

exactfit模式,不同机型对比效果如图11-3中所示。

(图11-3)(图11-3)

3.2 移动端推荐的适配模式

在移动端,我们通常会需要保持设计宽高等比缩放的全屏适配方案。而以下几种模式正是我们推荐开发者优先采用的适配模式。如果是3D游戏,建议开启视网膜画布(useRetinalCanvas)模式。

3.2.1 保宽适配模式fixedwidth

fixedwidth保宽模式就是在保障设计宽的内容一定全屏显示的等比缩放模式。这种模式推荐应用于竖屏游戏。

在这个模式下,画布和舞台宽会等于设计宽。但画布高和舞台高会按物理宽与设计宽的比例进行缩放后改变,不采用我们配置的设计高。所以,当改变后的画布和舞台高大于原来的设计高,底部就会露出画布背景色。如果改变后的画布和舞台高小于原来的设计高,那就会被裁剪掉多出的部分。

fixedwidth模式,不同机型对比效果,如图12-1所示。

(图12-1) (图12-1)

看到图12-1的黑色背景色,或者有开发者看到这里会想,我需要的是全屏适配,这个不适合。其实不用担心,这是为了让大家理解fixedwidth的适配规则,故意没有处理。由于在这个模式下,舞台的宽高已经被缩放拉满全屏,所以。开发者完全可以通过相对布局属性(top和bottom),把背景拉到全屏以及按钮拉到屏幕相对位置显示。实现各个屏幕下都做到完美的全屏适配。

3.2.2 保高适配模式fixedheight

fixedheight保高模式就是在保障设计高的内容一定全屏显示的等比缩放模式。这种模式推荐应用于横屏游戏。

在这个模式下,画布和舞台高会等于设计高。但画布宽和舞台宽会按物理高与设计高的比例进行缩放后改变,不采用我们配置的设计宽。所以,当改变后的画布和舞台宽小于原来的设计宽,那就会被裁剪掉多出的部分,如图12-2所示。如果改变后的画布和舞台宽大于原来的设计宽,底部就会露出画布背景色,如图12-3所示。

 (图12-2) (图12-2)
 (图12-3) (图12-3)

图12-2和图12-3仍然是故意没有处理。通过相对布局属性(left和right),把背景拉到全屏以及按钮拉到屏幕相对位置显示。实现各个屏幕下都做到完美的全屏适配。

3.2.3 自动保宽高模式fixedauto

fixedauto自动保宽高模式就是在保障设计宽高的内容,在任意机型的分辨率下一定都在全屏内显示。这是一种设计宽高永远不会被裁剪的等比缩放全屏适配模式,但有可能会留出画布的背景色,如图12-4所示。 所以还是需要通过相对布局属性,进行全屏适配。该模式横屏游戏和竖屏游戏都适合。

(图12-4)(图12-4)

这种模式,其实最终采用的是fixedwidth或者fixedheight,是通过物理宽高比和设计宽高比进行对比判断。物理宽高比小于设计宽高比的采用fixedwidth模式,否则就采用fixedheight。

3.3 其它适配模式

3.3.1 显示全部的高清模式showall

showall模式的适配结果与fixedauto非常像,也是保障设计宽高一定会在屏幕内全部显示,但区别和问题是,showall模式的画布和舞台并未做到所有分辨率下的全屏适配,只是按物理宽高与设计宽高比的最小值,进行等比缩放,并且改变了舞台和画布大小。因此,留下的空白部分,就是舞台无法控制的部分,导致在与设计宽高比例不同的手机上,就真正的无法全屏适配了。

但也并非没有好处,好处就是都不需要用相对布局二次适配了,设计效果什么样就一定是什么样,肯定是全部显示,不变形,不被裁切。而且由于改变了画布的大小,在物理分辨率差异比较大的屏幕上,也不会因为设计分辨率小了而导致模糊,仍然是高清的。坏处就是做不到手机全屏适配,所以该模式,通常不会被用到手机适配上,在PC浏览器运行的横屏页游,推荐使用该模式。

showall模式,不同机型对比效果,如图13-1所示。

(图13-1)(图13-1)

showall模式由于画布宽高已经进行了缩放改变,本身就是高清的适配模式,所以这种模式无需使用视网膜画布模式(useRetinalCanvas),用了之后,画布采用了物理分辨率,反而不好。

3.3.2 肯定不留底边的模式noboder

noboder的适配规则与showall,恰恰相反,是取物理宽高与设计宽高比的最大值进行缩放。会导致当分辨率宽高比与设计宽高比不同的屏幕上,设计效果一定会超出屏幕,被裁切掉一部分。所以也就无法留出画布或者舞台的底边了。

另外,该模式画布与舞台宽高会保持与设计宽高相同,所以全屏适配全靠对画布的缩放,没有使用视网膜模式的情况下,物理分辨率远超设计分辨率的时候,会因拉伸产生模糊。

noboder模式,不同机型对比效果,如图13-2所示。

(图13-2)(图13-2)

虽然说该模式,通过相对布局二次适配,也可以让被裁剪的按钮等回归到屏幕内容之中,但二次适配的方式要更加复杂。所以不推荐使用该模式。

3.4 刘海屏适配思路

自从推出iPhoneX全面屏手机以来,全面屏手机越来越多,但实际上绝大多数机型做不到真正的全面,所以就有了凹凸屏,刘海屏,水滴屏等叫法,这就给我们适配带来了麻烦。但找到规律之后,其实也并不是太复杂。下面分享一种常见的处理思路,大家根据这种适配思路来具体调节适配。

3.4.1 如何识别刘海屏

目前市面上的机型,虽然分辨率碎片化严重,但是仔细总结一下,可以发现一个规律,那就是分辨率的宽高比就那么几个。至少,全面屏的机型,宽高比肯定是大于2。所以,我们可以获取屏幕分辨率的宽高,然后计算出宽高比。大于2的,就当成刘海屏进行适配处理。

至于分的更细的,大家可以继续仔细研究。本节只是介绍一种思路。

3.4.2 相对布局

LayaAirIDE的UI组件中提供了基于父容器的相对布局属性,如top、bottom、left、right。我们可以把需要特别处理的按钮都统一放到一个容器组件中,例如box。然后,我们在场景Runtime类的onAwake生命周期中,控制这个容器的相对布局属性,就可以实现在刘海屏下进行特殊的位置处理了。

示例代码如下:

代码语言:txt复制
onAwake():void{
    //宽高比大于2为刘海屏
    if((Browser.clientHeight/Browser.clientWidth)>2){

        this.scaleGroup.top = 25; //回避顶部刘海示例代码
        this.scaleGroup.bottom = 50;//回避底部线示例代码
    }
}

2.4.3 如何调试

由于Chrome的调试中没有提供刘海遮挡的虚拟机,除了真机调试外,可以在微信小游戏开发工具中进行模拟调试。

2.5 其它适配相关学习

除了适配模式外,还有一些其它适配相关的内容,但不属于适配基础必须了解的范围,所以提供官方文档指引,大家有兴趣可以点击链接进入。

2.5.1 自动横竖屏

关于自动横屏和自动竖屏,可以前往官网文档中查看。文档地址为:

https://ldc2.layabox.com/doc/?nav=zh-ts-1-8-2

需要注意的是,浏览器中运行的时候,引擎的自动横屏和自动竖屏,只能对画布进行旋转,如果用户的手机锁屏了,虽然游戏自动旋转过来了,但是浏览器没有旋转过来,会导致输入法依然按浏览器的方向弹出,此时,可能会导致输入法与浏览器的显示呈90度。如果在小游戏平台中运行,由于有横屏还是竖屏的配置,不会出现这个问题。

2.5.2 画布对齐模式

关于画布在屏幕中的水平对齐与垂直对齐介绍,文档地址为:

https://ldc2.layabox.com/doc/?nav=zh-ts-1-8-1

需要注意的是,引擎中很多适配模式,都是画布全屏适配。这个时候,设置画布的对齐没有意义。只有画布不能全屏的时候,例如showall和noscale模式才有这个需求。

0 人点赞