#Cocos Creator 2.2.0 截图出现异常黑色背景

by 阿斌

2020.1.16 更新

经过一番测试，Cocos Creator 2.2.x改变了相机的渲染方式。

正确截图并不需要不开启3D功能

1). 如果是全屏的截图，则继续沿用的旧的代码，直接将RenderTexture的size设置为屏幕大小即可。
2). 如果是截取特定范围内的内容，
首先，RenderTexture使用屏幕尺寸
其次，只读取RenderTexture指定范围的像素点
最后，将像素信息转换为Image

参考代码

// 1. 设定RenderTexture的大小为全屏
let winSize = cc.winSize;
renderTexture.initWithSize(winSize.width, winSize.height, cc.game["_renderContext"].STENCIL_INDEX8);

// 2. 获取指定区域的像素点信息
let size = this.offscreenNode.getContentSize();
let pixels = new Uint8Array(size.width * size.height * 4);
let x = renderTexture.width/2 - this.offscreenNode.width/2;
let y = renderTexture.height/2 - this.offscreenNode.height/2;
let w = this.offscreenNode.width;
let h = this.offscreenNode.height;
renderTexture.readPixels(pixels, x, y, w, h);

// 3. 将pixels信息转换为image

问题背景

Cocos Creator 2.0.x 原本工作正常的截图功能

代码参考 《#Cocos Creator# 截图功能代码》 https://xmanyou.com/cocos-creator-jie-tu-gong-neng-dai-ma/

升级到2.2.0以后发现截图出现了问题。

截图的分辨率还是正常的，但是，实际的图像尺寸被缩小了很多，外围还增加了很多黑色块（背景色）

旧的截图是这样子：

新的截图变成了这样子：

解决方法

猜想

为什么会这样子呢？

这个截图非常像是在Unity中调整摄像机参数时看到的情况。

联想到 Cocos Creator在2.1.x版本后添加了3D功能，是否是因为摄像机的3D功能造成的影响呢？

测试

于是打开截图用的Camera的3D属性，进行测试。

结果我直接被整蒙了……

因为，打开3D选项，什么都不改的情况下，截图直接就黑屏了……

检查

深呼吸，淡定，再淡定~

先检查了一下，相机的类型和参数：

Ortho=true
表示是正交投影相机，对于2D游戏来说，没问题。

Near Plane=1
摄像机的近剪裁面是1？
2D场景的节点应该都是在0吧……是不是这个导致元素都没有被渲染呢？

Ortho Size=10
这个是摄像机在正交投影模式下的视窗大小

调试

把Near Plane改成0以后，终于能截图成功了：

不过还是有点问题，还需要调整Ortho Size参数。

结论

经过一番测试，调整成以下参数后，截图基本正常了。

Near Plane=0
Ortho Size=150

最新的截图基本跟旧版截图一致了。