真机利用Camera截屏得到全黑画面

  • Creator 版本:2.1.0

  • 目标平台: Web

  • 详细报错信息,包含调用堆栈:无报错,PC端浏览器完美运行 但是到手机(小米mix3)上就是全黑

  • 重现方式:截屏的js代码
    screenShot() {
    let node = new cc.Node();
    node.setParent(this.node);
    let camera = node.addComponent(cc.Camera);
    // 关闭瓦片自动裁剪
    cc.macro.ENABLE_TILEDMAP_CULLING = false;
    // 设置你想要的截图内容的 cullingMask
    camera.cullingMask = 0xfffffff;
    camera.zoomRatio = 1;
    // camera.depth = 10;
    // camera.backgroundColor = new cc.Color(255, 71, 0, 255);
    camera.clearFlags = 0x7;
    // 新建一个 RenderTexture,并且设置 camera 的 targetTexture 为新建的 RenderTexture,这样 camera 的内容将会渲染到新建的 RenderTexture 中。
    let texture = new cc.RenderTexture();
    let gl = cc.game._renderContext;
    // 如果截图内容中不包含 Mask 组件,可以不用传递第三个参数
    texture.initWithSize(4400, 2560);
    camera.targetTexture = texture;
    // 渲染一次摄像机,即更新一次内容到 RenderTexture 中
    camera.render(this.node);
    // 开启瓦片自动剪裁
    cc.macro.ENABLE_TILEDMAP_CULLING = true;
    // 获取像素数据
    let data = texture.readPixels();
    this.node.getParent().getChildByName(‘Test’).getComponent(cc.Sprite).spriteFrame = new cc.SpriteFrame(texture);
    // 绘制到一块新画布 并翻转
    let canvas = document.createElement(‘canvas’);
    let ctx = canvas.getContext(‘2d’);
    canvas.width = 4400;
    canvas.height = 2560;
    let rowBytes = 4400 * 4;
    for (let row = 0; row < 2560; row++) {
    let srow = 2560 - 1 - row;
    let imageData = ctx.createImageData(4400, 1);
    let start = srow * 4400 * 4;
    for (let i = 0; i < rowBytes; i++) {
    imageData.data[i] = data[start + i];
    }
    ctx.putImageData(imageData, 0, row);
    }
    this.node.removeChild(node);
    return canvas.toDataURL(“image/jpeg”, 0.75);
    }

自顶不沉

@panda

你好 考虑到可能是手机浏览器的影响 试试构建发布到微信小游戏上,用微信内置浏览器试试。

是款网页游戏,微信内置浏览器 跟 其它应用浏览器都是全黑,creator 2.0.2版本 是这样,更新到2.1.0后也是一样,我测试发现手动渲染camera.render() 最后得到是全黑texture, 是移动端上的用法有所区别吗 还有有什么其它原因 ?

你看下渲染节点的group是否切换正确

找到原因了 OPENGL ES 支持的纹理尺寸最大4096*4096 我超过了 所以移动端都是截图出来黑屏,找了一天头都大了 .多谢回复…

1赞