Cocos Creator 截图功能

目录

• 步骤1
• 步骤二
• 步骤三

基于Cocos Creator给出的demo中的方法做出修改，方便理解

步骤1

首先要新建一个摄像机

• 新建一个空节点

• 在节点的属性检查器中新建一个Camera组件

• 添加完成后如下图所示

其中，cullingMask中的是你自己建立的分组，如果不勾选其中一个，截图就不会截取到此分组中所有的组件，可以自己尝试下。

步骤二

在自己的代码中加入

properties: {
        screenshotsprint: {
            type: cc.Sprite,
            default: null,
        },
        camera: cc.Camera,
    },

screenshotsprint：是我们在场景中建立的精灵，用于显示截图，在编辑器中直接拉过去

camera:是我们刚刚建立的摄像机，在编辑器中直接拉过去

当然，也可以选择我们自己通过代码加载的办法实现

步骤三

接下来是才是重头戏

我们在代码中建立这下面所有的函数，其中screenshotsInti()是初始化函数

需要在截图开始时调用一遍，之后

可以直接调用下面的 screenshots(）函数来进行截图了

screenshots(callback) { //截图函数
        let picData = this.initImage();
        let spriteFrame = this.showSprite(picData);
        if (callback) callback(spriteFrame);
    },
    screenshotsInti() {//截图初始化
        this._width = 0;
        this._height = 0;
        let texture = new cc.RenderTexture();
        let gl = cc.game._renderContext;
        texture.initWithSize(cc.visibleRect.width, cc.visibleRect.height, gl.STENCIL_INDEX8);
        this.camera.targetTexture = texture;
        this.texture = texture;
    },
    initImage() {
        let data = this.texture.readPixels();
        this._width = this.texture.width;
        this._height = this.texture.height;
        let picData = this.filpYImage(data, this._width, this._height);
        return picData;
    },
    showSprite(picData) {
        let texture = new cc.Texture2D();
        console.log('canvas', this._width, this._height);
        //cc.Texture2D.RGBA8888是一个cc.Texture2D中的枚举，可以自行查阅官网API
        texture.initWithData(picData, cc.Texture2D.RGBA8888, this._width, this._height);
        let spriteFrame = new cc.SpriteFrame();
        spriteFrame.setTexture(texture);
        return spriteFrame;
    },
    filpYImage(data, width, height) {
        // create the data array
        let picData = new Uint8Array(width * height * 4);
        let rowBytes = width * 4;
        for (let row = 0; row < height; row++) {
            let srow = height - 1 - row;
            let start = srow * width * 4;
            let reStart = row * width * 4;
            // save the piexls data
            for (let i = 0; i < rowBytes; i++) {
                picData[reStart + i] = data[start + i];
            }
        }
        return picData;
    },

可以如下去调用代码

start() {
 this.screenshotsInti();//首先进行初始化
 this.scheduleOnce(() => {
                //spriteFrame可以用于替换精灵中的spriteFrame属性来显示截图
                this.screenshots((spriteFrame)=>{ 
                this.screenshotsprint.spriteFrame=spriteFrame
                });
            }
            , 0);//等到下一帧再进行截图的操作
},

需要强调的是，在刚刚进行完初始化后需要等到下一帧再进行截图的操作，否则便无法正常截图

经测试，在浏览器和模拟器中均可正常截图，在生成的微信小游戏项目中和实体机中也可正常截图