Shader入门实战，拳皇被击闪白特效！

小白上手 shader 编程最佳实战！讲解effect 和 material 在 cocos 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)
}

完～(误)

接下来讲讲 effect 和 material 在 cocos creator 中的关系吧。

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

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

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

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

更多shader相关文章往下翻到更多精彩！

学习资料

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

• https://thebookofshaders.com/

• https://webglfundamentals.org

• https://learnopengl-cn.github.io/

• https://forum.cocos.org/t/cosos-creator-2-2-x-shader/87180

• https://forum.cocos.org/t/cocos-2-3-shader/90789

• https://forum.cocos.org/t/cocos-creator-shader-effect-2020-02-17-cocos-creator-2-3-0/87889

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

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

预告

最近在研究物理挖洞效果，关注【白玉无冰】，获取最新进展哦（挖坑）！

转载请保留文末二维码和完整代码获取方式！

完整代码: https://github.com/baiyuwubing/cocos-creator-examples/tree/master/attacked

点击“阅读原文”查看完整代码

点个“在看”再走呗▼