本系列教程指引：
回顾
在上一章教程，我们在 SHOW ALL 模式下，用了 缩放 的方式去实现多分辨率适配，左右或者上下可能会出现部分看不见的情况，但是对于「背景适配」这个场合，这种方式无疑是一种合适的方案的。但是，对于游戏画面的内容填充，这种缩放方式明显不能使用。
针对游戏画面内容，我们本章将采用 宽高重置 的方案去适配
1. 内容适配实现
惯例，先上图
CONTENT_ADAPTER_PROCESS.png
过程如下：
- 求出设计分辨率在画布（SHOW ALL 模式下）的实际宽高
- 将实际宽高的设计分辨率 重设设置 至画布大小
- 计算过程如下：
- 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. 验证适配结果
为了方便验证结果，我们进行下面操作：
- 创建一个 Content 节点，采用上面适配代码
- 建立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
马上进入下一个章节：
本系列教程指引：
网友评论