LayaAir 屏幕适配-缩放模式_laya fixedauto

目录

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>
* <p><ul>取值范围：
* <li>"noscale" ：不缩放；</li>
* <li>"exactfit" ：全屏不等比缩放；</li>
* <li>"showall" ：最小比例缩放；</li>
* <li>"noborder" ：最大比例缩放；</li>
* <li>"full" ：不缩放，stage的宽高等于屏幕宽高；</li>
* <li>"fixedwidth" ：宽度不变，高度根据屏幕比缩放；</li>
* <li>"fixedheight" ：高度不变，宽度根据屏幕比缩放；</li>
* <li>"fixedauto" ：根据宽高比，自动选择使用fixedwidth或fixedheight；</li>
* </ul></p>
*/
scaleMode: string;

3、同样为了方便调用，Laya.Stage 提供了它们对应的常量：

 
//初始化引擎,不支持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