laya屏幕UI适配相对位置

在使用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:
在这里插入图片描述

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值