最近小游戏开放了测试,于是我迫不及待的把我写好的Pow上传到微信的服务器看看效果,结果傻了眼,在iphonex下竟然适配都失效,而且还导致了点击区域的错位。
然后试了一番,发现好多适配模式的出问题了,以下三种都无效了。
Laya.stage.scaleMode = Laya.Stage.SCALE_NOBORDER;
Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
Laya.stage.scaleMode = Laya.Stage.SCALE_EXACTFIT;
之前试为了方便适配,然后通过UIManager作为管理,既然改了那么只要修改下UIManager中的适配规则。
首先适配模式改为:
Laya.stage.scaleMode = Stage.SCALE_FIXED_WIDTH;
这种模式,暂时没有发现有问题。
三种模拟器下面的效果是一致的。
然后在这个一致的基础,进行适配。
简单来说,比较懒,能让layabox的编辑器的功能就尽量使用。
编辑器里面,就有这样的编辑选项,方便我们UI的定位。
比如这个文本,然后centerX:0,centerY:0,控制文本居中。
然后根据不同分辨率居中,我们只需要动态调整View的大小。
像这个样子,算出缩放后的屏幕大小(针对竖屏,设计分辨率为750*1334):
let ratio = Laya.Browser.clientWidth/Laya.stage.width; /// xxx/750 算出相对比例
let h = Laya.Browser.clientHeight/ratio;
Logger.log("real height is", h);
page.size(750, h);
// 对于背景图,也是设置一个居中设置,锚点居中,然后fixed_height的方式来铺满屏幕。
if(page['bg']){
let ratioH = h/1334;
page['bg'].size(750*ratioH, h);
}
这样写好接口之后,只要通过通用的打开UI的方式,就能完美适配竖屏,设计分辨率和最长机型的分辨率算出,即使放大后两边被遮到,也可以看见我们核心的内容。
最后效果
网友评论