微信小游戏屏幕适配

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

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

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

工具

LayaAir 引擎
TypeScripte 语言

需要关注的点

  1. 主要集中在背景图及边框附近的UI元素位置重设
  2. 缩放后安全区域(不会被裁切)内的UI 响应位置是否会被改变

与屏幕有关的一些基础内容

屏幕方向

不受屏幕方向影响,不会改变物理屏幕方向

1
2
3
4
//竖屏 
Laya.stage.screenMode = Laya.Stage.SCREEN_VERTICAL
//横屏
Laya.stage.screenMode = Laya.Stage.SCREEN_HORIZONTAL

缩放模式

Laya.init之后,舞台宽高无法再更改

Laya.stage.scaleMode

1
2
3
4
5
6
7
8
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:自动计算选择fixedwidthfixedheight

不裁剪方案:noscale, exactfitshowall

不缩放: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 设备等比缩放,不会出现黑边

1
2
3
4
5
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为例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//舞台初始化
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);
完结撒花