/ 开发笔记

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

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以后发现截图出现了问题。

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

旧的截图是这样子:

kitty-petting-1

新的截图变成了这样子:
kitty-petting-3

解决方法

猜想

为什么会这样子呢?

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

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

测试

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

Kitty-Petting-Cocos-Camera-3D

结果我直接被整蒙了……

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

kitty-petting-2

检查

深呼吸,淡定,再淡定~

先检查了一下,相机的类型和参数:

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

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

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

调试

把Near Plane改成0以后,终于能截图成功了:

kitty-petting-5

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

结论

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

Near Plane=0
Ortho Size=150

Kitty-Petting-Cocos-Camera-3D-param

最新的截图基本跟旧版截图一致了。
kitty-petting-4