[LayaAir 2.0]Laya对骨骼插槽添加滤镜

这个需求需要对laya.ani.js和laya.core.js的库进行修改,使用的laya引擎版本是2.0.0beta4(不同版本略微有所不同,原理和调用的方法都是类似的),目前该需求的滤镜只支持colorfilter(颜色滤镜),如果有功夫的同学可以自己去尝试怎么与库文件分离拓展。
骨骼的渲染从laya.core.js库中的_renderAll方法执行下来的
renderall.png

。在骨骼的渲染中,会遍历所有的插槽,调用BoneSlot中的draw方法(graphics.drawTexture和graphics.drawSkin)
slotdraw.png

,将插槽中的纹理通过封装cmd的形式通过方法加入_cmd的队列中,通过_renderAll遍历执行所有_cmd队列中的指令进行渲染从而更新画面
savetocmd.png
。可以看到在graphics.drawSkin方法中的drawTriangles方法参数中有color这个参数,
drawskin.png

drawtriangles.png

这个参数就是在源码中的颜色滤镜参数,至于它怎么传入运作的,有兴趣的同学可以跟踪深入查看。
那么我们的修改方案心中就有数了,首先在core库中,在DrawTrianglesCmd.create后修改color的传参处理
fix1.png

然后在ani库中的BoneSlot中添加一个变量colorFilter
fix2.png

在GraphicsAni中修改drawSkin的参数
fix3.png

fix4.png

fix5.png

完成了库的拓展, 调用就很简单了,Skeleton实例调用getSlotByName拿到需要添加滤镜的插槽slot,然后slot["colorFilter"] = new Laya.ColorFilter(); 和添加普通的滤镜方法差不多,不会的同学去查文档。至于使用完全可以封装,至于如何封装,各位根据需求自行发挥。
 
 
drawskin.png cmdcreate.png
已邀请:

Aar0n

赞同来自:

感谢慷慨分享

要回复问题请先

商务合作
商务合作