在使用laya制作手机端小游戏时,有时希望某个UI相对于屏幕底部等位置保持一定的距离,可以在layaIDE下如此设置:
如:保持一个按钮在任何分辨率手机下总是距离底部100个像素分辨率。
仅以scaleMode="fixedwidth"举例,其它适配方式类推。
此时编译运行发现手机不同分辨率屏幕下未能与底部保持一致。
因为这个相对位置bottom是相对对象是Scene的宽高,而Scene的宽高是固定的。
需要在项目代码初始化处添加适配代码,
如在laya3D项目Sample代码Main.ts添加resize()方法:
Main.ts完整代码:
import GameConfig from "./GameConfig";
class Main {
constructor() {
//根据IDE设置初始化引擎
if (window["Laya3D"]) Laya3D.init(GameConfig.width, GameConfig.height);
else Laya.init(GameConfig.width, GameConfig.height, Laya["WebGL"]);
Laya["Physics"] && Laya["Physics"].enable();
Laya["DebugPanel"] && Laya["DebugPanel"].enable();
Laya.stage.scaleMode = GameConfig.scaleMode;
Laya.stage.screenMode = GameConfig.screenMode;
//兼容微信不支持加载scene后缀场景
Laya.URL.exportSceneToJson = GameConfig.exportSceneToJson;
//打开调试面板(通过IDE设置调试模式,或者url地址增加debug=true参数,均可打开调试面板)
if (GameConfig.debug || Laya.Utils.getQueryString("debug") == "true") Laya.enableDebugPanel();
if (GameConfig.physicsDebug && Laya["PhysicsDebugDraw"]) Laya["PhysicsDebugDraw"].enable();
if (GameConfig.stat) Laya.Stat.show();
Laya.alertGlobalError = true;
//激活资源版本控制,version.json由IDE发布功能自动生成,如果没有也不影响后续流程
Laya.ResourceVersion.enable("version.json", Laya.Handler.create(this, this.onVersionLoaded), Laya.ResourceVersion.FILENAME_VERSION);
}
onVersionLoaded(): void {
//激活大小图映射,加载小图的时候,如果发现小图在大图合集里面,则优先加载大图合集,而不是小图
Laya.AtlasInfoManager.enable("fileconfig.json", Laya.Handler.create(this, this.onConfigLoaded));
}
onConfigLoaded(): void {
//加载IDE指定的场景
GameConfig.startScene && Laya.Scene.open(GameConfig.startScene, true,null, Laya.Handler.create(this,(s)=>{
this.resize()
}));
Laya.stage.on( Laya.Event.RESIZE, this, this.resize);
}
//随着屏幕尺寸改变适配UI相对位置
resize(): void{
let w = GameConfig.width;
let h = GameConfig.height;
if (GameConfig.scaleMode == "fixedwidth"){
let screen_wh_scale = Laya.Browser.width / Laya.Browser.height;
h = GameConfig.width / screen_wh_scale;
}
Laya.Scene.unDestroyedScenes.forEach(element => {
let s = element as Laya.Scene;
s.width = w;
s.height = h;
});
}
}
//激活启动类
new Main();
运行效果:按钮总是在离底部位置100像素分辨率处。
iPhone4 扁屏幕:
iPhone6p:
iPad: