被攻击闪白特效!小白shader入门实战 !Cocos Creator!

Posted by lamyoung on March 31, 2020

小白上手 shader 编程最佳实战!讲解effectmaterialcocos creator中的关系。

效果预览

实现原理

在着色器中,对每个像素点添加一个颜色值。

o.rgb = o.rgb + addColor.rgb;

接着写个定时器,切换一下材质。

private attackOne(render: cc.RenderComponent) {
    render.setMaterial(0, this.material_attacked);
    this.scheduleOnce(() => {
        render.setMaterial(0, this.material_normal);
    }, 0.1)
}

完~(误)

接下来讲讲 effectmaterialcocos creator 中的关系吧。

effect 是我们编写 shader 的地方, effect 中可能会有多个配置参数,不同的配置参数可以生成不同 material , material 挂载在 RenderComponent 上,对其产生效果。

例如,在分形着色器!卷积滤镜!这两篇文章中,对同一个 effect 生成了不同的 material

继承 RenderComponent 的组件有多个,只要修改对应的 material 就能实现我们的定义的 shader

不过需要注意的是,要基于默认材质去修改哦。

最后,推荐几个学习shader编程的网站和贴子:

动手实践!在实践中成长!在模仿中学习!

以上为白玉无冰使用 Cocos Creator v2.2.2 开发"闪白特效"的技术分享。如果对你有点帮助,欢迎分享给身边的朋友。



完整代码
参考文章