LayaAir 屏幕适配-缩放模式

目录

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"。

*

取值范围：
*
• "noscale" ：不缩放；

*
• "exactfit" ：全屏不等比缩放；

*
• "showall" ：最小比例缩放；

*
• "noborder" ：最大比例缩放；

*
• "full" ：不缩放，stage的宽高等于屏幕宽高；

*
• "fixedwidth" ：宽度不变，高度根据屏幕比缩放；

*
• "fixedheight" ：高度不变，宽度根据屏幕比缩放；

*
• "fixedauto" ：根据宽高比，自动选择使用fixedwidth或fixedheight；

*

*/
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);//精灵在舞台位置为 x=10,y=10
//矩形起点(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 = count>7?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/?nav=zh-js-1-8-3