ActionScript
TypeScript
JavaScript

九、游戏屏幕适配

发布时间:2016-05-14

 

屏幕适配

随着移动端设备(手机、平板、电视)的增多,设备碎片化、屏幕碎片化的程度也在不断增加,而我们今天要探讨的,则是对游戏显示影响比较大的屏幕碎片化。

为了更深入的了解屏幕适配,我们先从Iphone屏幕分辨率发展说起:

在早先的移动设备中,屏幕像素都比较低,如 Iphone3,它的分辨率为320*480,在Iphone3上,一个像素等于一个屏幕物理像素。后来随着设备屏幕像素密度越来越高,从iphone4开始,苹果推出了Retina屏,分辨率变成了640*960,提高一倍,但屏幕尺寸却没变化,这就意味着同样大小的屏幕上,像素却多了一倍,这提高的就是devicePixelRatio,其他安卓移动设备也类似与此。

所以我们得出一个公式:   物理分辨率=像素分辨率*devicePixelRatio;

引擎对上述两种分辨率做了封装。

设备像素分辨率:Laya.Browser.clientWidthLaya.Browser.clientHeight;

设备物理分辨率:Laya.Browser.widthLaya.Browser.height;

像素比:Laya.Browser.pixelRatio;

 默认从浏览器获得的clientWidth不是像素分辨率,而是经过缩放过的分辨率,想要获得正确的分辨率,需要在html页面内设置viewport meta标签,设置content的值为"width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"。


 

LayaAir引擎内,如果页面未设置过viewport标签,则引擎会自动生成一个,以确保获取的正确宽高。

 

适配模式

LayaAir提供了多种适配模式供使用者选择,可以通过scaleMode属性进行设置,scaleMode有如下可选值:

noscale:应用保持设计宽高不变,不缩放不变,stage的宽高等于设计宽高。

exactfit应用根据屏幕大小铺满全屏,非等比缩放会变形,stage的宽高等于设计宽高。

showall应用显示全部内容,按照最小比率缩放,等比缩放不变形,一边可能会留空白,stage的宽高等于设计宽高。

noborder应用按照最大比率缩放显示,宽或高方向会显示一部分,等比缩放不变性,stage的宽高等于设计宽高。

full应用保持设计宽高不变,不缩放不变,stage的宽高等于屏幕宽高。

fixedwidth应用保持设计宽度不变,高度根据屏幕比缩放,stage的宽度等于设计宽度,高度根据屏幕比率大小而变化

fixedheight应用保持设计高度不变,宽度根据屏幕比缩放,stage的高度等于设计宽度,宽度根据屏幕比率大小而变化。

比较常用的缩放模式有,showall,full,fixedwidth,fixedheight,具体用哪种适配模式,需要大家自己来衡量。

对齐模式

不仅可以设置非全屏缩放模式,比如noscale,showall,则还可以使用对齐模式进行对齐。

alignH:水平对齐方式,有"left","center","right"三种值可选。

alignV:垂直对齐方式,有"top","middle","bottom"三种值可选

横竖屏设置

通过screenMode属性,可以设置游戏的横竖屏,在手机浏览器发生旋转后,还能正确的显示,有以下值可以选择。

"none" 不更改屏幕。

"horizontal" 自动横屏。

"vertical" 自动竖屏

本游戏属于竖屏游戏,我们就设置为"vertical"

结合本游戏,我打算用showall模式,因为大部分设备屏幕分辨率是9:16,用showall可以得到一个比较好的效果,并且改动最小。


修改Game.ts代码:

constructor() {

 //初始化引擎,设置游戏设计宽高,并且打开WebGL模式

 Laya.init(480, 852, Laya.WebGL);

 //加载图集资源

 Laya.loader.load("res/atlas/war.json", Laya.Handler.create(this, this.onLoaded), null, Laya.Loader.ATLAS);

 //设置适配模式

 Laya.stage.scaleMode = "showall";

 //设置剧中对齐

 Laya.stage.alignH = "center";

 //设置横竖屏

 Laya.stage.screenMode = "vertical";

 //显示FPS

 Laya.Stat.show(0, 50);

}

 

编译后看到效果:

图片1.png 

 

本节课程源码下载