遊戲中常用到截圖功能,比如微信分享。下面講解下如何通過Cocos Creator進行截圖,還有要注意的地方,文章最後我會放出Demo,給大家參考。
截圖1
本方式是常用到,要求截圖時不能包含mask節點。優點是比下面方式2省內存。
var size = cc.director.getWinSize();
var fileName = "result_share.jpg";
var fullPath = jsb.fileUtils.getWritablePath() + fileName;
if(jsb.fileUtils.isFileExist(fullPath)){
jsb.fileUtils.removeFile(fullPath);
}
//如果要圖片高質量 可以使用cc.Texture2D.PIXEL_FORMAT_RGBA8888。
var texture = new cc.RenderTexture(Math.floor(size.width), Math.floor(size.height));
texture.setPosition(cc.p(size.width/2, size.height/2));
texture.begin();
cc.director.getRunningScene().visit();
texture.end();
//1.4 以後,截屏函數的第二個參數改成了 cc.ImageFormat.PNG
texture.saveToFile(fileName, cc.IMAGE_FORMAT_JPG);
###截圖2
當截圖包含mask節點時,方式1截圖會出bug。只能使用本方式。缺點是比較消耗內存一些。
var size = cc.director.getWinSize();
var fileName = "result_share.jpg";
var currentDate = new Date();
var fullPath = jsb.fileUtils.getWritablePath() + fileName;
if (jsb.fileUtils.isFileExist(fullPath)) {
jsb.fileUtils.removeFile(fullPath);
}
//如果要圖片高質量 可以使用cc.Texture2D.PIXEL_FORMAT_RGBA8888。
var texture = new cc.RenderTexture(Math.floor(size.width), Math.floor(size.height), cc.Texture2D.PIXEL_FORMAT_RGBA4444, gl.DEPTH24_STENCIL8_OES);
texture.setPosition(cc.p(size.width / 2, size.height / 2));
texture.begin();
cc.director.getRunningScene().visit();
texture.end();
//1.4 以後,截屏函數的第二個參數改成了 cc.ImageFormat.PNG
texture.saveToFile(fileName, cc.IMAGE_FORMAT_JPG);
以上兩種方式要注意的是:
- EditBox,VideoPlayer,Webview 等控件無法被包含在截圖裏面,因爲這是 OpenGL 的渲染到紋理的功能,上面提到的控件不是由引擎繪製的。
- 只適用於原生平臺
Web截圖
- WebGL與Canvas環境都可用
captureScreenshot() {
function callback() {
var canvas = document.getElementById("GameCanvas");
var base64 = canvas.toDataURL("imagea/png");
cc.director.off(cc.Director.EVENT_AFTER_DRAW);
var frame = this.base64ToSpriteFrame(base64, (frame) => {
this.sprite.spriteFrame = frame;
});
}
cc.director.on(cc.Director.EVENT_AFTER_DRAW, callback.bind(this));
},
base64ToSpriteFrame(base64, callback) {
var img = new Image();
img.src = base64;
img.onload = function () {
var texture = new cc.Texture2D();
texture.initWithElement(img);
texture.handleLoadedTexture();
var newframe = new cc.SpriteFrame(texture);
if (callback) callback(newframe);
}
},
- Canvas環境,在WebGl環境無效。
captureScreenshot() {
var canvas = document.getElementById("GameCanvas");
var base64 = canvas.toDataURL("imagea/png");
var frame= this.base64ToSpriteFrame(base64,(frame)=>{
this.sprite.spriteFrame=frame;
});
//把圖片生成後download到本地
// var href = base64.replace(/^data:image[^;]*/, "data:image/octet-stream");
// document.location.href = href;
},
base64ToSpriteFrame(base64,callback) {
var img = new Image();
img.src = base64;
img.onload = function(){
var texture = new cc.Texture2D();
texture.initWithElement(img);
texture.handleLoadedTexture();
var newframe = new cc.SpriteFrame(texture);
if(callback)callback(newframe);
}
},
切圖
由於目前Creator截圖只能截全屏,截部分節點區域會出現bug。如果想顯示部分區域的話,通過設定截取的rect,可以任意切割。
/**
* 切圖
* @param { cc.SpriteFrame or cc.Texture2D} data
* @param {*} rect
*/
cutPicture(data,rect){
let frame;
if(data instanceof cc.SpriteFrame) {
frame=data;
}else if(data instanceof cc.Texture2D) {
frame = new cc.SpriteFrame(texture);
}
if(!frame) {
return null;
}
//設置顯示區域 ,注意使用cc.Rect()會得到undefinde
frame.setRect(rect);
return frame;
},
最後
以上是我使用Creator截圖的總結,希望能幫助到你。後面我會上傳demo。
如果喜歡就動動手指點喜歡,關注我吧。我會不定時更新Cocos Creator教程與上傳demo到github。
參考文章
http://forum.cocos.com/t/creator/40750/6
http://forum.cocos.com/t/base64/36960
http://forum.cocos.com/t/creator/38461
http://discuss.cocos2d-x.org/t/screenshot-in-webgl-in-creator/39452/2
http://www.cnblogs.com/hongru/archive/2012/01/14/2322540.html