微信小游戏屏幕适配

很久没有发文了，最近一直在研究微信小游戏，屏幕适配问题真的是哪里都存在。
无奈论坛资料及可行的解决方案还是太少，还是得靠自己。
且来看一看在微信上如何达到适配多样化屏幕

奔着解决方案来的可直达解决方案

后续将根据实际遇到的其他问题，继续发出真实可行的解决方案

工具

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为基础

1 2	//比例大于16:9的，标记为大分辨率 this.isLargeScreen= Math.floor(height/width)>Math.floor(16/9)

背景资源分别获取

1
2
3

 if(this.isLargeScreen) bg.skin = "大图"
 
else bg.skin = "小图";

不缩放(默认值，可不写)

1	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);

工具