# CocosCreatorShader

**Repository Path**: _JG_/cocos-creator-shader

## Basic Information

- **Project Name**: CocosCreatorShader
- **Description**: 大道至简，殊途同归。
CocosCreatorShader意图在于帮助不会Shader的用户能够快速了解如何使用Cocos Effect。
CocosCreatorShader intends to help users who do not know Shader quickly understand how to use Cocos Effect.
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: v3.0.0
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 355
- **Created**: 2021-10-19
- **Last Updated**: 2022-05-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## CocosCreatorShader
#### Write by yeshao2069.
#### CocosCreatorShader intends to help users who do not know Shader quickly understand how to use Cocos Effect.
#### Cocos Creator V3.0.0+
 

## QuickLinks
| 编号 | 类目 | 项目 | 备注 | 编号 | 类目 | 项目 | 备注 |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
| 1  | 2D | [图片闪光](#SpriteFlashLight)  |   | 2  | 2D | [角色受击闪白](#HitWhite)  |   |
| 3  | 2D | [物体内发光](#GlowInnerVer1)  |   | 4  | 2D | [高斯模糊](#GaussianBlurV1)  |   |
| 5  | 2D | [圆形头像](#CircleAvatar)  |   | 6  | 2D | [图片溶解](#SpriteDissolve)  |   |
| 7  | 2D | [老照片、置灰、冰冻、反相、动画](#SpriteFilter)  |   | 8  | 2D | [渐变过渡的相册](#GradualTransitionalAlbum)  |   |
| 9  | 2D | [马赛克](#SpriteMosaic)  |   | 10  | 2D | [镜面光泽](#SpriteStreamer)  |   |
| 11  | 2D | [水面波纹](#WaterSpread)  |   | 12  | 2D | [灯光跟随](#FollowSpot)  |   |
| 13  | 2D | [融球](#Metaball)  |   | 14  | 2D | [图片消融](#SpriteAblation)  |   |
| 15  | 2D | [2D灯光](#Sprite2DLight)  |   | 16  | 3D | [人物护盾](#RoleShield)  |   |
| 17  | 2D | [摸牌(咪牌)](#DrawCard)  |   | 18  | 2D | [按钮流光](#ButtonAmbilight)  |   |
| 19  | 2D | [彩虹](#SpriteDrawRainbow)  |   | 20  | 2D | [动态光影](#SpriteDynamicLightAndShadow)  |   |
| 21  | 2D | [图片高亮](#SpriteHighLight)  | 支持图片、Spine  | 22 | 3D | [模型高亮](#RoleHighLight) | 支持骨骼动画、静态模型  |

## Examples
#### SpriteFlashLight
| 1 | 2D | 图片流光 [SpriteFlashLight](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.0.0/SpriteEffect/SpriteFlashLight)  | [返回顶部](#QuickLinks) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |

<div align=center>
<img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/image/SpriteFlashLight.gif" width="400" height="300" />
</div>

#### HitWhite
| 2 | 2D | 受击闪白 [HitWhite](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.0.0/HitWhite)  | [返回顶部](#QuickLinks) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |

<div align=center>
<img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/image/HitWhite.gif" width="400" height="300" />
</div>

#### GlowInnerVer1
| 3 | 2D | 内发光 [GlowInnerVer1](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.0.0/SpriteEffect/GlowInnerVer1)  | [返回顶部](#QuickLinks) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |

<div align=center>
<img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/image/GlowInnerVer1.gif" width="400" height="300" />
</div>

#### GaussianBlurV1
| 4 | 2D | 高斯模糊 [GaussianBlurV1](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.0.0/SpriteEffect/GaussianBlurV1)  | [返回顶部](#QuickLinks) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |

<div align=center>
<img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/image/GaussianBlurV1.gif" width="400" height="300" />
</div>

#### CircleAvatar
| 5 | 2D | 圆形头像 [CircleAvatar](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.0.0/SpriteEffect/CircleAvatar)  | [返回顶部](#QuickLinks) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |

<div align=center>
<img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/image/CircleAvatar.png" width="400" height="300" />
</div>

#### SpriteDissolve
| 6 | 2D | 图片溶解 [SpriteDissolve](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.0.0/SpriteEffect/SpriteDissolve)  | [返回顶部](#QuickLinks) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |

<div align=center>
<img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/image/SpriteDissolve.gif" width="400" height="300" />
</div>

#### SpriteFilter
| 7 | 2D | 老照片、置灰、冰冻、反相、动画 [SpriteFilter](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.0.0/SpriteEffect/SpriteFilter)  | [返回顶部](#QuickLinks) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |

<div align=center>
<img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/image/SpriteFilter.png" width="400" height="300" />
</div>

#### GradualTransitionalAlbum
| 8 | 2D | 渐变过渡的相册 [GradualTransitionalAlbum](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.0.0/SpriteEffect/GradualTransitionalAlbum)  | [返回顶部](#QuickLinks) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |

<div align=center>
<img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/image/GradualTransitionalAlbum.gif" width="400" height="300" />
</div>

#### SpriteMosaic
| 9 | 2D | 马赛克 [SpriteMosaic](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.0.0/SpriteEffect/SpriteMosaic)  | [返回顶部](#QuickLinks) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |

<div align=center>
<img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/image/SpriteMosaic.gif" width="400" height="300" />
</div>

#### SpriteStreamer
| 10 | 2D | 镜面光泽 [SpriteStreamer](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.0.0/SpriteEffect/SpriteStreamer)  | [返回顶部](#QuickLinks) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |

<div align=center>
<img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/image/SpriteStreamer.gif" width="400" height="300" />
</div>

#### WaterSpread
| 11 | 2D | 水面波纹 [WaterSpread](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.0.0/SpriteEffect/WaterSpread)  | [返回顶部](#QuickLinks) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |

<div align=center>
<img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/image/WaterSpread.gif" width="400" height="300" />
</div>

#### FollowSpot
| 12 | 2D | 灯光跟随 [FollowSpot](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.0.0/SpriteEffect/FollowSpot)  | [返回顶部](#QuickLinks) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |

<div align=center>
<img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/image/FollowSpot.gif" width="400" height="300" />
</div>

#### Metaball
| 13 | 2D | 融球 [Metaball](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.0.0/SpriteEffect/Metaball)  | [返回顶部](#QuickLinks) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |

<div align=center>
<img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/image/Metaball.gif" width="400" height="300" />
</div>

#### SpriteAblation
| 14 | 2D | 图片消融 [SpriteAblation](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.0.0/SpriteEffect/SpriteAblation)  | [返回顶部](#QuickLinks) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |

<div align=center>
<img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/image/SpriteAblation.gif" width="400" height="300" />
</div>

#### Sprite2DLight
| 15 | 2D | 2D灯光 [Sprite2DLight](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.0.0/SpriteEffect/Sprite2DLight)  | [返回顶部](#QuickLinks) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |

<div align=center>
<img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/image/Sprite2DLight.gif" width="400" height="300" />
</div>

#### RoleShield
| 16 | 3D | 人物护盾 [RoleShield](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.0.0/RoleEffect/RoleShield)  | [返回顶部](#QuickLinks) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |

<div align=center>
<img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/image/RoleShield.gif" width="400" height="300" />
</div>

#### DrawCard
| 17 | 2D | 抽牌/咪牌 [DrawCard](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.0.0/SpriteEffect/DrawCard)  | [返回顶部](#QuickLinks) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |

<div align=center>
<img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/image/DrawCardv2.gif" width="400" height="300" />
</div>

#### ButtonAmbilight
| 18 | 2D | 按钮流光 [ButtonAmbilight](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.0.0/SpriteEffect/ButtonAmbilight)  | [返回顶部](#QuickLinks) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |

<div align=center>
<img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/image/ButtonAmbilight.gif" width="400" height="300" />
</div>

#### SpriteDrawRainbow
| 19 | 2D | 彩虹 [SpriteDrawRainbow](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.0.0/SpriteEffect/SpriteDrawRainbow)  | [返回顶部](#QuickLinks) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |

<div align=center>
<img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/image/SpriteDrawRainbow01.png" width="400" height="300" />
</div>

#### SpriteDynamicLightAndShadow
| 20 | 2D | 动态光影 [SpriteDynamicLightAndShadow](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.0.0/SpriteEffect/SpriteDynamicLightAndShadow)  | [返回顶部](#QuickLinks) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |

<div align=center>
<img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/image/SpriteDynamicLightAndShadow.gif" width="400" height="300" />
</div>

#### SpriteHighLight
| 21 | 2D | 图片高亮 [SpriteHighLight](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.0.0/SpriteEffect/SpriteHighLight)  | [返回顶部](#QuickLinks) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |

<div align=center>
<img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/image/SpriteHighLight.gif" width="400" height="300" />
</div>

#### RoleHighLight
| 22 | 3D | 模型高亮 [RoleHighLight](https://gitee.com/yeshao2069/cocos-creator-shader/tree/v3.0.0/RoleEffect/RoleHighLight)  | [返回顶部](#QuickLinks) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |

<div align=center>
<img src="https://gitee.com/yeshaohelpme/ShaderDemoImageLibrary/raw/master/image/RoleHighLight.gif" width="400" height="300" />
</div>