微信小游戏之CocosCreator多分辨率场景适配方案

前言：小游戏开发过程中大家如何进行多分辨率适配的？

• 回顾一下官方文档对分辨率适配的介绍：https://docs.cocos.com/creator/manual/zh/ui/multi-resolution.html。
• 以前读完后总是有一种似懂非懂的感觉，所以实践后总结关于小游戏适配三要素：Canvas + Widget + Scale 。

一、cocosCreater窗口大小/设计分辨率/视图边框尺寸/试图中canvas尺寸等和之间关系。

   let winSize = cc.winSize;//获取当前游戏窗口大小
   cc.error("--当前游戏窗口大小  w:" + winSize.width + "   h:" + winSize.height);
        
   let visibleSize = cc.view.getVisibleSize();
   cc.error("--视图中窗口可见区域的尺寸 w:" + visibleSize.width + "   h:" + visibleSize.height);
 
   let designSize = cc.view.getDesignResolutionSize(); //获取当前工程中的设计分辨率
   cc.error("--设计分辨率：" + designSize.width + "    h: " + designSize.height);
  
   let viewSize = cc.view.getFrameSize();
   cc.error("--视图边框尺寸：w:" + viewSize.width + "  h:" + viewSize.height);
 
   let canvasSize = cc.view.getCanvasSize();//视图中canvas尺寸
   cc.error("--视图中canvas尺寸  w:" + canvasSize.width + "  H:" + canvasSize.height);

-在不同手机上运行预览效果和参数打印，左图redmiK30/右图iphone6s。

得知：

1. winSize==visibleSize：游戏窗口大小也就是下图圈出的绿框(图右：redmi/图左：iphone6s)；
2. designSize当前设计分辨率：720/1280；
3. viewSize和canvasSize之间存在一个ratio倍数关系，当前试图下canvas的尺寸。

效果图中的背景图片尺寸：750/1334在不同机型上对比winSize尺寸便出现黑边,所以从美观和游戏感知度我们要进行相应的调整，也就是针对winSize进行相关适配。

那么winSize是怎么计算出来？我们又如何利用Canvas做适配呢？继续往下看～

二、如何设置Canvas进行游戏开发中的适配

• 游戏开发前已经确定游戏类型：横屏/竖屏类型。
• 目标群体中使用率最高的设备的屏幕分辨率作为设计分辨率：720/1280或者640/1136。
• 勾选Fit Height适配高度或Fit Width适配宽度 选项，选择一种适配方案。
• Canvas作为当前场景根节点。
  
  不同的适配方案，会影响winSize的尺寸，这里我们先按照官方文档说明计算设计分辨率和屏幕分辨率比值：

let s_w = designSize.width / canvasSize.width;   
let s_h = designSize.height / canvasSize.height;

1、选择Fit Height(适配高度)
winSize.width = canvasSize.width * s_h;
winSize.height = designSize.height;
我们前面展示的图片就是适配高度来计算的，所以s_h>1或s_h<1就会决定我们背景图片是否存在黑边情况，所以美术同学会切图时背景图片高度和分辨率一致、宽度往往要大于720一些。这也是我们选择市场使用率较高的屏幕分辨率来做为设计分辨率的原因之一。有时候我们也会将图片尺寸切小一些然后进行代码缩放：bgNode.scale = winSize.height / bgNode.height。

2、选择Fit Width(适配宽度)
winSize.width = designSize.width ;
winSize.height = canvasSize.height * s_w;
同理我们就不再阐述，以上两种就是比较常用的选择，毕竟策划阶段已经确定横屏和竖屏。

3.Fit Height(适配高度)和Fit Width(适配宽度)同时勾选
winSize.width = designSize.width ;
winSize.height = designSize.height;
当设计分辨率宽高比大于屏幕分辨率时，会自动适配宽度；设计分辨率宽高比小于屏幕分辨率时，会自动适配高度。

4.Fit Height(适配高度)和Fit Width(适配宽度)都不勾选
winSize.width = designSize.width ;
winSize.height = designSize.height;
当设计分辨率宽高比大于屏幕分辨率时，会自动适配高度(填充满高度)；设计分辨率宽高比小于屏幕分辨率时，会自动适配宽度(填充满宽度)。

往往日常开发中横屏游戏我们按照高度适配/竖屏游戏按照宽度适配，对于Ipad上我们会重新产出一张大图来做适应。

三、使用Widget组件适配UI对齐方案

• 前面我们了解不同适配方案会有不同winSize尺寸，所以为了保持UI在不同的设备上保持固有位置，所以我们需要对UI在winSIze尺寸下做相应的对齐适配。
• 不做阐述我们直接浏览官方文档：https://docs.cocos.com/creator/manual/zh/components/widget.html
• 

到这里加入UI后目前会有哪些问题？看下图在不同机型上所示：（只在顶部左右两个UI上添加了该组件）

1. 明显两个UI存在了重叠。
2. 中间25宫格UI边距不同，有可能在不同设备上UI会超出屏幕。
3. 我们对齐组件还是很给力，左右边距和上边距不同设备上展示相同。

要解决1/2两个问题，是故我们引入Scale策略。

四、使用Scale策略适配UI大小问题

  let designSize = cc.view.getDesignResolutionSize();
  let designRate = designSize.height / designSize.width;
  let winsize = cc.director.getWinSize();
  let realRate = winsize.height / winsize.width;
  if(realRate > designRate){
	let scale = designRate /realRate;
   	this.node.scale = scale
  }

我对UI节点添加如上缩放功能，在看效果：