屏幕适配怎样实现铺满全屏,又不被拉伸?

已邀请:

InJoins

赞同来自: ZMLaya 180*****912

需要自己适配。我这边折腾了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);


1.png

 调整方法为,根据IDE里该UI的对齐模式相应调整。比如让UI始终按照预期的顶部对齐、底部对齐
实践方法:重载引擎的resetLayoutY方法
 
未标题-2.png



基本思路就是这样子,另外设计分辨率最好选择750**1334,如果需要适配iphonex,我见过用750*1700作为设计分辨率的(微信自己的小游戏),两端预留几百个像素用来填空。
 
这是个跟具体项目需求相关的问题。我这个只是思路。你需要自行研究哦
 
另外:引擎fixedwidth+layoutEnabled布局(比如top/bottom对齐),按理来说,界面应该是能自动适应所有机型分辨率的。
底下的逻辑较复杂(设计到stage\canvas\camera viewport\screen等多个size的合作),我这个是3D,2D混合项目(3D,2D彼此对齐方式还有一定出入),所以就没折腾了,采用上面单调整UI上下对齐的方式。
 
仅供参考。

laya21126

赞同来自:

能提供下简单demo吗
在IDE中centerX这个值没法事先确定呀,因为屏幕会动态调整呀

沧海一粟

赞同来自:

MarkMark

内涵tv何吓吓

赞同来自:

MarkMark

stan

赞同来自:

MarkMark

159*****142

赞同来自:

如果是fixedHeight就按屏幕高缩放,如果是fixedWidth就按屏幕高缩放
this._scale = Laya.Browser.height / Laya.stage.designHeight;
Laya.stage.scale(this._scale, this._scale)      
场景中心坐标因为缩放需要计算一下,别的不需要改动,比较方便

要回复问题请先

商务合作
商务合作