用phpcms v9搭建手机网站后您没有访问该信息的权限!,芍药居做网站公司,wordpress猫猫,wordpress 帝国 seo目录
LayaAir 宽高定义
屏幕缩放模式 LayaAir 宽高定义
1、设计宽高#xff1a;项目代码中初始化舞台 Laya.init() 中定义的宽高即为设计宽高
2、Stage 宽高#xff1a;stage 宽高为游戏舞台实际大小的宽高
3、适配宽高#xff1a;通过引擎的适配模式对设计宽高进行缩放…目录
LayaAir 宽高定义
屏幕缩放模式 LayaAir 宽高定义
1、设计宽高项目代码中初始化舞台 Laya.init() 中定义的宽高即为设计宽高
2、Stage 宽高stage 宽高为游戏舞台实际大小的宽高
3、适配宽高通过引擎的适配模式对设计宽高进行缩放改变后的宽高为了便于区分理解称为适配宽高
4、画布宽高画布宽高是指 HTML5 中 canvas 节点的宽高游戏中所有可见的内容都在画布区域内
5、屏幕宽高屏幕宽高是指手机浏览器屏幕的宽高例如iphone6竖屏时的屏幕宽高为375*667。LayaAir引擎可以通过laya.utils.Browser.clientWidth 和 laya.utils.Browser.clientHeight 来获取屏幕的宽与高。
6、物理宽高手机屏幕窗口的实际宽高LayaAir引擎可以通过laya.utils.Browser.width和laya.utils.Browser.height来获取设备屏幕屏幕的物理宽高。详情可参考《LayaAir 屏幕适配-分辨率、对齐模式》
屏幕缩放模式
1、屏幕缩放指窗口大小变化时内容应该如何变化这是屏幕适配经常遇到的问题窗口大小变化也就意味着分辨率变化。
2、laya.display.Stage提供了 scaleMode (缩放模式)函数共有参数值 /**缩放模式。默认值为 noscale。/p * pul取值范围 * linoscale 不缩放/li * liexactfit 全屏不等比缩放/li * lishowall 最小比例缩放/li * linoborder 最大比例缩放/li * lifull 不缩放stage的宽高等于屏幕宽高/li * lifixedwidth 宽度不变高度根据屏幕比缩放/li * lifixedheight 高度不变宽度根据屏幕比缩放/li * lifixedauto 根据宽高比自动选择使用fixedwidth或fixedheight/li * /ul/p */scaleMode: string; 3、同样为了方便调用Laya.Stage 提供了它们对应的常量
SCALE_NOSCALE : String noscale [static] 应用保持设计宽高不变不缩放不变型stage的宽高等于设计宽高。SCALE_EXACTFIT : String exactfit [static] 应用根据屏幕大小铺满全屏非等比缩放会变型stage的宽高等于设计宽高。SCALE_SHOWALL : String showall [static] 应用显示全部内容按照最小比率缩放等比缩放不变型一边可能会留空白stage的宽高等于设计宽高。 SCALE_NOBORDER : String noborder [static] 应用按照最大比率缩放显示宽或高方向会显示一部分等比缩放不变型stage的宽高等于设计宽高。 SCALE_FULL : String full [static] 应用保持设计宽高不变不缩放不变型stage的宽高等于屏幕宽高。SCALE_FIXED_HEIGHT : String fixedheight [static] 应用保持设计高度不变宽度根据屏幕比缩放stage的高度等于设计宽度宽度根据屏幕比率大小而变化 SCALE_FIXED_WIDTH : String fixedwidth [static] 应用保持设计宽度不变高度根据屏幕比缩放stage的宽度等于设计高度高度根据屏幕比率大小而变化 SCALE_FIXED_AUTO : String fixedauto [static] 应用保持设计比例不变全屏显示全部内容(类似showall但showall非全屏会有黑边)根据屏幕长宽比自动选择使用SCALE_FIXED_WIDTH或SCALE_FIXED_HEIGHT //初始化引擎,不支持WebGL时会自动切换至Canvas
Laya.init(500, 350,Laya.WebGL);//在舞台上绘制一张底图作为背景图片分辨率686 * 325
var bgImageSprite new Laya.Sprite();
bgImageSprite.loadImage(https://www.jetbrains.com/idea/img/screenshots/idea_overview_3.png);
Laya.stage.addChild(bgImageSprite);//在舞台绘制一个矩形
var showInfoSprite new Laya.Sprite();
showInfoSprite.pos(10,10);//精灵在舞台位置为 x10,y10
//矩形起点(0,0)矩形长100宽50
showInfoSprite.graphics.drawRect(0,0,100,50,#CC6633);
//在矩形的中间绘制一行文本
showInfoSprite.graphics.fillText(缩放模式,50,10,20px Arial,#fff,center);
Laya.stage.addChild(showInfoSprite);//数组保存缩放模式
var scaleModes [];
scaleModes.push(Laya.Stage.SCALE_NOSCALE);
scaleModes.push(Laya.Stage.SCALE_EXACTFIT);
scaleModes.push(Laya.Stage.SCALE_SHOWALL);
scaleModes.push(Laya.Stage.SCALE_NOBORDER);
scaleModes.push(Laya.Stage.SCALE_FULL);
scaleModes.push(fixedwidth);
scaleModes.push(fixedheight);
scaleModes.push(fixedauto);//为整个舞台绑定单击事件count 用于计数
var count 0;
Laya.stage.on(Laya.Event.CLICK,this,stageClick);
function stageClick (){console.log(切换缩放模式为scaleModes[count]);//改变矩形显示的文本内容showInfoSprite.graphics.clear();showInfoSprite.graphics.drawRect(0,0,100,50,#CC6633);showInfoSprite.graphics.fillText(scaleModes[count],50,10,20px Arial,#fff,center);//改变缩放模式Laya.stage.scaleMode scaleModes[count];count count7?0:count;
}
事例中设计宽高500, 350图片宽高686 * 325 1、full 模式完全按物理像素渲染屏幕有多大适配的画面就有多大是高画质常用的适配模式但是在不同尺寸的屏幕里显示内容的大小会有所不同同时对于HTML5游戏的性能压力要高于其它适配模式。
2、showall 和 noborder 是等比缩放模式会保持画面不变形。showall按照屏幕与设计宽高最小比率缩放保证画面能完全显示出来但会导致有空屏黑边。noborder刚好相反按照屏幕与设计宽高最大比率缩放不会出现空屏黑边但会导致宽或高的部分内容无法显示出来。
3、 fixedwidth 与 fixedheight 更像 showall和noborder 的变种同样也是等比缩放模式但是指定了一边不动另外一边进行缩放是当前HTML5游戏中比较常用的主流适配模式
更多信息可以参考官网https://ldc.layabox.com/doc/?navzh-js-1-8-3
