[LayaAir 2.0]Laya对骨骼插槽添加滤镜
这个需求需要对laya.ani.js和laya.core.js的库进行修改,使用的laya引擎版本是2.0.0beta4(不同版本略微有所不同,原理和调用的方法都是类似的),目前该需求的滤镜只支持colorfilter(颜色滤镜),如果有功夫的同学可以自己去尝试怎么与库文件分离拓展。
骨骼的渲染从laya.core.js库中的_renderAll方法执行下来的
。在骨骼的渲染中,会遍历所有的插槽,调用BoneSlot中的draw方法(graphics.drawTexture和graphics.drawSkin)
,将插槽中的纹理通过封装cmd的形式通过方法加入_cmd的队列中,通过_renderAll遍历执行所有_cmd队列中的指令进行渲染从而更新画面
。可以看到在graphics.drawSkin方法中的drawTriangles方法参数中有color这个参数,
这个参数就是在源码中的颜色滤镜参数,至于它怎么传入运作的,有兴趣的同学可以跟踪深入查看。
那么我们的修改方案心中就有数了,首先在core库中,在DrawTrianglesCmd.create后修改color的传参处理
,
然后在ani库中的BoneSlot中添加一个变量colorFilter
,
在GraphicsAni中修改drawSkin的参数
,
。
完成了库的拓展, 调用就很简单了,Skeleton实例调用getSlotByName拿到需要添加滤镜的插槽slot,然后slot["colorFilter"] = new Laya.ColorFilter(); 和添加普通的滤镜方法差不多,不会的同学去查文档。至于使用完全可以封装,至于如何封装,各位根据需求自行发挥。
骨骼的渲染从laya.core.js库中的_renderAll方法执行下来的
。在骨骼的渲染中,会遍历所有的插槽,调用BoneSlot中的draw方法(graphics.drawTexture和graphics.drawSkin)
,将插槽中的纹理通过封装cmd的形式通过方法加入_cmd的队列中,通过_renderAll遍历执行所有_cmd队列中的指令进行渲染从而更新画面
。可以看到在graphics.drawSkin方法中的drawTriangles方法参数中有color这个参数,
这个参数就是在源码中的颜色滤镜参数,至于它怎么传入运作的,有兴趣的同学可以跟踪深入查看。
那么我们的修改方案心中就有数了,首先在core库中,在DrawTrianglesCmd.create后修改color的传参处理
,
然后在ani库中的BoneSlot中添加一个变量colorFilter
,
在GraphicsAni中修改drawSkin的参数
,
。
完成了库的拓展, 调用就很简单了,Skeleton实例调用getSlotByName拿到需要添加滤镜的插槽slot,然后slot["colorFilter"] = new Laya.ColorFilter(); 和添加普通的滤镜方法差不多,不会的同学去查文档。至于使用完全可以封装,至于如何封装,各位根据需求自行发挥。
没有找到相关结果
已邀请:
要回复问题请先登录
1 个回复
Aar0n
赞同来自: