被攻击闪白特效！shader入门实战+资料整理！CocosCreator!

小白上手 shader 编程最佳实战&＃xff01;讲解effect 和 material 在 cocos creator中的关系。附送学习资料&＃xff01;

效果预览

实现原理

在着色器中&＃xff0c;对每个像素点添加一个颜色值。

o.rgb &＃61; o.rgb &＃43; addColor.rgb;


接着写个定时器&＃xff0c;切换一下材质。

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


完&＃xff5e;(误)

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

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

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

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

不过需要注意的是&＃xff0c;要基于默认材质去修改哦。

更多shader相关文章往下翻到更多精彩&＃xff01;

学习资料

最后&＃xff0c;推荐几个学习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

动手实践&＃xff01;在实践中成长&＃xff01;在模仿中学习&＃xff01;

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

预告

最近在研究物理挖洞效果&＃xff0c;关注【白玉无冰】&＃xff0c;获取最新进展哦&＃xff08;挖坑&＃xff09;&＃xff01;

更

多

精

彩

2019年原创精选&＃xff01;附送 github 地址&＃xff01;

小游戏-不停歇的球&＃xff01;技术分享&＃xff01;源码相送&＃xff01;

shader 动画之 loading 特效!

物理流体实现&＃xff01;

笑容逐渐消失&＃xff1f;shader 编程入门实战 &＃xff01; 

分形着色器&＃xff01;

使用卷积实现各种滤镜效果&＃xff01;

飘扬的旗帜&＃xff01;shader 编程实战&＃xff01;

转载请保留文末二维码和完整代码获取方式&＃xff01;

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

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

点个“在看”再走呗▼