微信小游戏屏幕适配方案
首发于我的个人博客-微信小游戏屏幕适配
很久没有发文了，最近一直在研究微信小游戏，屏幕适配问题真的是哪里都存在。
无奈论坛资料及可行的解决方案还是太少，还是得靠自己。
且来看一看在微信上如何达到适配多样化屏幕
奔着解决方案来的可直达解决方案
工具
LayaAir 引擎
TypeScripte 语言
需要关注的点
- 主要集中在背景图及边框附近的UI元素位置重设
- 缩放后安全区域（不会被裁切）内的UI 响应位置是否会被改变
与屏幕有关的一些基础内容
屏幕方向
不受屏幕方向影响，不会改变物理屏幕方向
//竖屏
Laya.stage.screenMode = Laya.Stage.SCREEN_VERTICAL
//横屏
Laya.stage.screenMode = Laya.Stage.SCREEN_HORIZONTAL缩放模式
Laya.init之后，舞台宽高无法再更改
Laya.stage.scaleMode
Laya.Stage.SCALE_NOSCALE "noscale"
Laya.Stage.SCALE_FULL "full"
Laya.Stage.SCALE_EXACTFIT "exactfit"
Laya.Stage.SCALE_SHOWALL "showall"
Laya.Stage.SCALE_NOBORDER "noborder"
Laya.Stage.SCALE_FIXED_WIDTH "fixedwidth"
Laya.Stage.SCALE_FIXED_HEIGHT "fixedheight"
Laya.Stage.SCALE_FIXED_AUTO "fixedauto"缩放详解
总结
noscale: 不缩放不变形，1:1原始比例，左上角对齐，内容大于屏幕被裁切，小于屏幕出现黑边
full：不缩放，原始比例，超出屏幕部分被裁切
exactfit：非等比缩放，填满屏幕，设计宽高与设备不等时会变形
showall: 等比缩放，按屏幕宽高与设计比例最小比率等比缩放，可能会黑边
noborder：等比缩放，按屏幕宽高与设计宽高最大比例缩放，超过屏幕部分被裁切
fixedheight:按屏幕宽高等比缩放，高度不变，宽度适配（设计高度*屏幕宽高比），宽度超出会裁切
fixedwidth: 按屏幕宽高等比缩放，宽度不变，高度适配 (设计宽度*屏幕高宽比)，高度不够会黑边
fixedauto:自动计算选择fixedwidth或fixedheight
不裁剪方案：noscale, exactfit，showall
不缩放：noscale, full
等比缩放会裁剪：noborder,fixedheight
其他引擎的参考方案
白鹭的适配方案:noscale,exactfit,showall,noborder
cocos的策略:
适配高度或宽度或根据宽高比自动选择，裁剪背景图，避免黑边或空白，设置子UI元素自动对齐到可见区域
Laya缩放适配验证
基于微信开发者工具自带的模拟器实验
设计宽高与屏幕一致时
各模式无影响
iphonex:
fixedwidth，宽度不变，高度适配，黑边
fiexdheight，高度不变，宽度适配，被裁剪
full: 左上角，未铺满屏幕，与小米note2表现一致
其他模式差距细微
6到 iphone7P
full: 左上角，未铺满屏幕
其他模式差距细微
nexus5到nexus6
与6到7p表现一致
两种可行的解决方案
两套图适配
iphonex 大分辨率与5s 小分辨率对比图见《游戏截图》文档
按物理分辨率取比，以16：9为基础
//比例大于16:9的，标记为大分辨率
this.isLargeScreen= Math.floor(height/width)>Math.floor(16/9)背景资源分别获取
if(this.isLargeScreen) bg.skin = "大图"
else bg.skin = "小图";不缩放(默认值，可不写)
Laya.stage.scaleMode = Laya.Stage.SCALE_NOSCALE舞台尺寸设置为固定物理尺寸，保证各16:9 设备等比缩放，不会出现黑边
if (this.isLargeScreen) {
Laya.init(1125, 2436, Laya.WebGL);
} else {
Laya.init(640, 1136, Laya.WebGL);
}
原因：现有缩放模式不支持两边裁剪，至多为一边裁剪
一套图适配
示例：天才削熊猫
思路：高度不变，宽度适配，水平居中，两边裁剪，元素相对布局，设计时设置安全区域
实现：一套背景图，1480x1920，水平居中：centerx = 0，y = 0，启用相对父类布局layoutEnable = true
屏幕宽高：1080x1920
代码或UI 元素：启用相对父类布局，设置left,right top ,bottom，layoutEnable = true
缩放模式：fixedHeight
代码示例
以1080X1920(具体看需求)尺寸图为标准、设计尺寸，路径以res为例
//舞台初始化
Laya.init(1080, 1920);
//缩放模式
Laya.stage.scaleMode = Laya.Stage.SCALE_FIXED_HEIGHT;
//背景添加
var imageBg:Laya.Image = new Laya.Image();
imageBg.skin = "res/bg_main.png";
imageBg.centerX = 0;
imageBg.layoutEnabled = true;
imageBg.y = 0;
Laya.stage.addChild(imageBg);
//UI元素添加，以添加到舞台为例
var btn: Laya.Button = new Laya.Button();
btn.skin = "res/btn.png";
btn.layoutEnabled = true;
btn.left = 165;
btn.bottom = 50;
btn.stateNum = 1;
Laya.stage.addChild(btn);