[0]如何使用RenderTexture2D对动画进行录制

需求:想把spine3.8动画缓存起来,犹豫spine动画里面用到混合模式,遮罩...,所以打算把spine动画每一帧动画都生成RenderTexture2D进行渲染,这样用空间去换时间,避免大量spine动画出现的时候造成卡顿。
已邀请:

小高

赞同来自:

您好,可以参考下面这段代码

// 获取Spine动画所在的节点
this.spine = this.owner.getChildAt(0) as Laya.Sprite;
// 创建RenderTexture2D对象
var rt = new Laya.RenderTexture2D(this.spine.width, this.spine.height, Laya.RenderTargetFormat.R8G8B8A8, Laya.RenderTargetFormat.None);

// 每10帧截取一次图
Laya.timer.frameLoop(10, this, () => {
// 判断Spine动画是否可见
if (this.spine.visible) {
// 将Spine动画所在节点渲染到RenderTexture2D中
this.spine.drawToTexture(this.spine.width, this.spine.height, 0, 0, rt);

// 将RenderTexture2D转换为base64编码
convertRT2DToBase64(rt);
}
});

function convertRT2DToBase64(rendertexture: Laya.RenderTexture2D) {
// 定义变量
let pixelArray: Uint8Array | Float32Array;
let width = rendertexture.width;
let height = rendertexture.height;
pixelArray = new Uint8Array(width * height * 4);
var bs;
var pixels = rendertexture.getData(0, 0, rendertexture.width, rendertexture.height);

// 创建canvas对象
var canv: Laya.HTMLCanvas = new Laya.HTMLCanvas(true);
canv.lock = true;
canv.size(width, height);
var ctx2d = canv.getContext('2d');
// 创建ImageData对象
var imgdata: ImageData = ctx2d.createImageData(width, height);
// 将像素数据写入ImageData对象
imgdata.data.set(new Uint8ClampedArray(pixels));
// 将ImageData对象绘制到canvas上
ctx2d.putImageData(imgdata, 0, 0);
// 将canvas转换为base64编码
bs = canv.source.toDataURL();

要回复问题请先

商务合作
商务合作