请问大大,我需要每帧都修改贴图的数据。所以定义一个width*height的数组来记录每个像素的数据。在每帧结束的时候再把数据放到贴图上。我是这么做的:
初始化:
this.canvas = document.createElement(‘canvas’)
this.canvas.width = this.width
this.canvas.height = this.height
this.ctx = this.canvas.getContext(“2d”);
this.imageData = this.ctx.createImageData(this.width, this.height);
每帧处理:
this.ctx.putImageData(this.imageData, 0, 0);
var str = canvas.toDataURL();
var img = new Image();
img.onload = function(){
this.tvCtrl.spriteFrame._texture.initWithElement(img);
}.bind(this)
img.src = str;
这样在手机浏览器的低端机上会比较卡。
但是做成微信小游戏后,用wx.createCanvas出来后,按照这样处理,帧数非常得的底,足足降低了几十倍。
调试后发现是putImageData这一步足足要十几毫秒,toDataUrl又要十几毫秒。
所以请教一下,有没有办法,直接将UInt8Array绘制到Texture上的办法。
类似app上开发的:
texture->lock()
texture->设置2进制数据(this.iamgeData)
texture->unlock()
这种方法。
或者不通过canvas context putImageData 再toDataURL,直接将Uint8Array转化为Image也可以,最多再多转一步。发现Base64转生成Image再生成texture效率还能接受,虽然绕了一点
谢谢