需要自己适配。我这边折腾了2,3天,得出的方案是,你需要做三步:
第一步:所有的界面元素在IDE已设置好up/bottom/left/right/centerX/centerY以及layoutEnabled属性
第二步、PC使用showall,手机使用fixedwidth模式,就是下面的custom模式,这个模式是我自己有小改动(只是设置了canvas尺寸与屏幕尺寸始终一致,避免缩放导致3D画面会糊),逻辑和fixedwidth一模一样,你直接换成fixedwidth就行
Laya.stage.screenMode = "none";
Laya.stage.alignV = "middle";
Laya.stage.alignH = "center";
if (Laya.Browser.onPC) {
Laya.stage.scaleMode = "showall";
} else {
Laya.stage.scaleMode = "custom";
}
这一步能让引擎自动适配宽度(不变形),剩下的高度部分需要自己处理
第三步、监听引擎 RESIZE 事件,在这个里面对顶部、底部对齐的所有UI的Y轴坐标及高度进行调整
Laya.stage.on(Laya.Event.RESIZE, this, this.onResize);
调整方法为,根据IDE里该UI的对齐模式相应调整。比如让UI始终按照预期的顶部对齐、底部对齐
实践方法:重载引擎的resetLayoutY方法
基本思路就是这样子,另外设计分辨率最好选择750**1334,如果需要适配iphonex,我见过用750*1700作为设计分辨率的(微信自己的小游戏),两端预留几百个像素用来填空。
这是个跟具体项目需求相关的问题。我这个只是思路。你需要自行研究哦
另外:引擎fixedwidth+layoutEnabled布局(比如top/bottom对齐),按理来说,界面应该是能自动适应所有机型分辨率的。
底下的逻辑较复杂(设计到stage\canvas\camera viewport\screen等多个size的合作),我这个是3D,2D混合项目(3D,2D彼此对齐方式还有一定出入),所以就没折腾了,采用上面单调整UI上下对齐的方式。
仅供参考。