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 。

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