Cocos Creator 截图功能使用方法(native)
基于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);//等到下一帧再进行截图的操作
},
需要强调的是,在刚刚进行完初始化后需要等到下一帧再进行截图的操作,否则便无法正常截图
经测试,在浏览器和模拟器中均可正常截图,在生成的微信小游戏项目中和实体机中也可正常截图
第一次写文章,如有不对之处,请谅解!