Cocos Creator 多分辨率完美适配系列-4（内容适配实现）

本系列教程指引：

1. Cocos Creator 多分辨率完美适配系列-1（现状与最终效果）
2. Cocos Creator 多分辨率完美适配系列-2（部署验证设置）
3. Cocos Creator 多分辨率完美适配系列-3（背景适配实现）
4. Cocos Creator 多分辨率完美适配系列-4（内容适配实现）
5. Cocos Creator 多分辨率完美适配系列-5（贴边栏动画实现）
6. Cocos Creator 多分辨率完美适配系列-6（刘海屏适配）
7. Cocos Creator 多分辨率完美适配系列-7（封装库使用）

回顾

在上一章教程，我们在 SHOW ALL 模式下，用了 缩放 的方式去实现多分辨率适配，左右或者上下可能会出现部分看不见的情况，但是对于「背景适配」这个场合，这种方式无疑是一种合适的方案的。但是，对于游戏画面的内容填充，这种缩放方式明显不能使用。

针对游戏画面内容，我们本章将采用 宽高重置 的方案去适配

1. 内容适配实现

惯例，先上图

CONTENT_ADAPTER_PROCESS.png

过程如下：

1. 求出设计分辨率在画布（SHOW ALL 模式下）的实际宽高
2. 将实际宽高的设计分辨率 重设设置 至画布大小
   • 计算过程如下：
     • B1：画布宽度 / 设计稿实际宽度
     • B2：画布高度 / 设计稿实际高度
     • 重新设置节点的宽高
       • 节点新宽度：原始宽度 x B1
       • 节点新高度：原始高度 x B2

伪代码如下：

A1: 画布分辨率宽 / 设计分辨率宽 = 640 / 800 = 0.8
A2: 画布分辨率高 / 设计分辨率高 = 960 / 480 = 2

设计稿在画布上的宽度 = 800 x 0.8 = 640
设计稿在画布上的高度 = 480 x 0.8 = 384

B1: 画布宽度 / 设计稿实际宽度 = 640 / 640 = 1
B2: 画布高度 / 设计稿实际高度 = 960 / 384 = 2.5

this.node.width = 800 x 1 = 800
this.node.height = 480 x 2.5 = 1200

对应实际代码如下：

// 1. 先找到 SHOW_ALL 模式适配之后，本节点的实际宽高以及初始缩放值
let srcScaleForShowAll = Math.min(
  cc.view.getCanvasSize().width / this.node.width,
  cc.view.getCanvasSize().height / this.node.height
);
let realWidth = this.node.width * srcScaleForShowAll;
let realHeight = this.node.height * srcScaleForShowAll;

// 2. 基于第一步的数据，再做节点宽高重置
this.node.width = this.node.width *
  (cc.view.getCanvasSize().width / realWidth);
this.node.height = this.node.height *
  (cc.view.getCanvasSize().height / realHeight);

2. 验证适配结果

为了方便验证结果，我们进行下面操作：

1. 创建一个 Content 节点，采用上面适配代码
2. 建立4个按钮，利用 Widget 组件去进行贴边

按照上面的设置期望，只要我们 Content 节点能真实重置宽高为画布宽高，那么4个贴边按钮就一定会贴边，否则就不会贴边

image.png

经过上面适配之后，我们取两组结果演示：

CONTENT_ADAPTER_RESULT.png

可以看到上面「上下左右」4个贴边块都能完成 「贴边操作」，说明我们的适配效果还是不错的。

为了方便大家使用，上面代码（其实也就5行）已经弄成了一个 组件 ，下载下来直接拖入到自己游戏的内容根节点即可。

更多源码和示例，欢迎打开下方 Github 项目，如果觉得还不错，还可以 Star 一下呢~

https://github.com/zhitaocai/CocosCreator-Multi-resolution-Adapter

至此，我们的「内容适配」基本告一段落了吗？~~~ 不！

3. 设计分辨率像素 VS 画布分辨率像素

细心的你肯定发现了，我们最后设置的节点宽高是

this.node.width = 800 x 1 = 800
this.node.height = 400 x 2.5 = 1200

和我们图示的 640 x 960 完全不是一回事，但是为什么最后效果又和我们的期望一致呢？

这是因为 800 x 1200 是我们在设计分辨率下的宽高，而 640 x 960 是我们的画布分辨率，两者宽高像素不是直接等价的，是 经过 SHOW ALL 模式转换 的，这里怎么理解呢？

设计分辨率 800 x 480 到画布的分辨率 640x384 （为什么是这个值，可以参照上一章第一节理解）这个过程其实是做了一个 SHOW ALL 模式的转换

800 x 0.8 = 640
480 x 0.8 = 384

那么如果我们的目标画布分辨率为 640 x 960 ，也就是占据画布全屏，公式就是

width x 0.8 = 640
height x 0.8 = 960

计算后结果 800(width) x 1200(height)，也就对应上了，当然在我们 这个场合 也可以简单理解为：设计分辨率下的 800 x 1200 经过 SHOW ALL 模式处理后，实际等价于画布中的 640 x 960 。

如果还不理解，也没关系，因为这个转换过程，在那几行适配代码中已经实现了，不关心也可以~

4. 进入下一个章节

至此，我们「内容适配」章节完毕。如果文章有描述不清楚的或者错漏之处，欢迎留言或者指正或者赞赏。

pay.png

马上进入下一个章节：

本系列教程指引：

1. Cocos Creator 多分辨率完美适配系列-1（现状与最终效果）
2. Cocos Creator 多分辨率完美适配系列-2（部署验证设置）
3. Cocos Creator 多分辨率完美适配系列-3（背景适配实现）
4. Cocos Creator 多分辨率完美适配系列-4（内容适配实现）
5. Cocos Creator 多分辨率完美适配系列-5（贴边栏动画实现）
6. Cocos Creator 多分辨率完美适配系列-6（刘海屏适配）
7. Cocos Creator 多分辨率完美适配系列-7（封装库使用）