获取屏幕纹理截图并渲染到Sprite遇到的问题

Creator 2.x
#1

  • Creator 版本：2.2.1

  • 目标平台： Web / iOS / Android / 模拟器

  • 重现方式：必现

  • 需求描述：

参考最新截图方式获取当前界面的纹理，将纹理传递给精灵帧，从而使用精灵Sprite渲染这个纹理并将整个纹理缩小类似一个小地图的效果。

  • 问题一：调用该方法后，截图纹理在Sprite中偏移且大小无法更改；

  • 问题二：调用一次绘制，drawcall数量接近翻一倍为什么？

截屏主要代码：

testScreenShot: function () {
    console.log('开始截屏');
    let node = new cc.Node();
    node.parent = cc.director.getScene();
    let camera = node.addComponent(cc.Camera);
    // 设置你想要的截图内容的 cullingMask
    camera.cullingMask = 0xffffffff;
    if (this.screenshotSprite) {
        console.log('纹理渲染到sprite.');
        let spriteFrame = new cc.SpriteFrame(camera.targetTexture);
        let tmpRect = new cc.Rect(0,0,320,180);
        spriteFrame.setRect(tmpRect);
        this.screenshotSprite.spriteFrame = spriteFrame;
        console.log('渲染完成.');
    }
}

问题截图：
一、为调用截图方法之前：

image.png754×431 54.5 KB

drawcall为30，左下角精灵为打算放屏幕截图缩小版的精灵

二、截图方法调用后：

image.png766×443 46.9 KB

drawcall接近60且截图显示在了屏幕右上角。

#2

对代码做了相关修改，可以获取对应纹理并缩小，但是依旧有其他问题。

    testScreenShot: function () {
        console.log('开始截屏');
        this.camera.enabled = true;
        let texture = new cc.RenderTexture();
        texture.initWithSize(cc.visibleRect.width, cc.visibleRect.height);
        let spriteFrame = new cc.SpriteFrame();
        spriteFrame.setTexture(texture);
        this.camera.targetTexture = texture;
        this.screenshotSprite.spriteFrame = spriteFrame;
    }

报警告为：
glDrawElements: Source and destination textures of the draw are the same.

截图：

image.png1781×824 234 KB

#3

截图的 camera 不要包含这个 screenshotSprite

#4

这样子的同级不可以是吗？

#5

是把 screenshotSprite 从 camera 的渲染中剔除，看下文档
https://docs.cocos.com/creator/manual/zh/render/camera.html#摄像机属性

#6

image.png1125×654 74.1 KB

截图及渲染到精灵上已经实现了，drawcall数量翻倍这个是因为什么导致的呢？有没有排查建议呢？

#7

已经解决，感谢。camera在编辑器中未激活，截图完成后未将其激活状态关闭导致drawcall数量翻倍。
激活：
self.camera.enabled = true;
取消激活：
self.camera.enabled = false;