# CocosCreatorHowToUse

**Repository Path**: codeLand/cocos-creator-how-to-use

## Basic Information

- **Project Name**: CocosCreatorHowToUse
- **Description**: 大道至简，殊途同归。
CocosCreatorHowToUse是希望简化用户理解Cocos Creator API某些功能的使用。
Cocos Creator How To Use is to simplify the use of some functions that users understand the API.
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: v3.0.0
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 134
- **Created**: 2022-01-04
- **Last Updated**: 2022-05-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Cocos Creator How To Use
#### Write by yeshao2069.
#### Cocos Creator How To Use is to simplify the use of some functions that users understand the API.
#### Cocos Creator V3.0.0+
 

## Quick
| A | B | C | D | E |
| :-----------------------: | :-----------------------: | :-----------------------: | :-----------------------: | :-----------------------: | 
| [1. 用户界面 UI](#ui) | [2. 常用整理 CommonUse](#commonuse) | [3. 音频 Audio](#audio) | [4. 视频 Video](#video) | [5. 帧动画 Animation](#animation)|
| [6. Spine动画](#spine) | [7. 龙骨动画 DragonBone](#dragonbone) | [8. 绘图 Graphics](#graphics) | [9. 物理 Physics](#physics) | [10. 缓动 Tween](#tween) |
| [11. 渲染 Render](#render) | [12. 模型 Model](#model) | [13. 粒子 Particle](#particle) | [14. 需求案例 DemandCase](#demandcase) | |
 
## Examples

### UI
| 编号 | 子编号 | 类目 | 子项 | 备注 | 演示 |
| :----------------------- | :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
| 1  |   | [UI示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/UI) |   | [返回顶部](#quick)  |
|   | 1.1 | Label | [超大文本](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/UI/LargeSystemFontText)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/UI/LargeSystemFontText.jpg" width="400" height="300" /></div>  |
|   | 1.2 | Button | [简单按钮](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/UI/SimpleButton)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/UI/SimpleButton.gif" width="400" height="300" /></div>  |
|   | 1.3 | ListView | [列表视图示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/UI/ListViewUse)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/UI/ListViewUse.gif" width="400" height="300" /></div>  |
|   | 1.4 | WebView | [网页视图示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/UI/WebViewUse)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/UI/WebViewUse.jpg" width="400" height="300" /></div>  |
|   | 1.5 | RichText | [富文本示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/UI/RichTextUse)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/UI/RichTextUse.jpg" width="400" height="300" /></div>  |
|   | 1.6 | PageView | [页面视图示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/UI/PageViewUse)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/UI/PageViewUse.jpg" width="400" height="300" /></div>  |
|   | 1.7 | Mask | [遮罩示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/UI/MaskUse)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/UI/MaskUse.jpg" width="400" height="300" /></div>  |
|   | 1.8 | UI | [更新列表信息](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/UI/UpdateListWithData)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/UI/UpdateListWithData.png" width="400" height="300" /></div>  |
|   | 1.9 | Camera | [摄像机示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/UI/CameraUseSample)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/UI/CameraUseSample.gif" width="400" height="300" /></div>  |

### CommonUse
| 编号 | 子编号 | 类目 | 子项 | 备注 | 演示 |
| :----------------------- | :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
| 2  |   | [常用整理](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Documents) |   | [返回顶部](#quick)  |   |
|   | 2.1 | 常用整理 | 常用FAQ整理 & 萌新文档 [CocosCreator FAQ](https://gitee.com/yeshao2069/cocos-creator-faq)  |  |   |
|   | 2.2 | 常用整理 | 自定义TS脚本模板 [Custom-TS-ScriptTemplate](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Documents/Custom-TS-ScriptTemplate)  |  |   |
|   | 2.3 | 常用整理 | 自定义Demo模板 [Custom-CasesTemplate](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Documents/Custom-CasesTemplate)  |  |   |
|   | 2.4 | 常用整理 | 自定义引擎 [Custom-Engine](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Documents/Custom-Engine)  |  |   |

### Audio
| 编号 | 子编号 | 类目 | 子项 | 备注 |  演示 |
| :----------------------- | :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
| 3  |   | [音频示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Audio) |   | [返回顶部](#quick)  |
|   | 3.1 | 音频示例 | [多个音效同时播放](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Audio/PlayOneShot)  |   |   |
|   | 3.2 | 音频示例 | [添加全局按钮音效](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Audio/AddGlobalButtonSound)  |   |   |
|   | 3.3 | 音频示例 | [模拟钢琴播放](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Audio/PianoPlayTest)  | 官方DEMO  |  <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Audio/PianoPlayTest.png" width="400" height="300" /></div> | 

### Video
| 编号 | 子编号 | 类目 | 子项 | 备注 |  演示 |
| :----------------------- | :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
| 4  |   | [视频示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Video) |   | [返回顶部](#quick)  |
|   | 4.1 | 视频示例 | [视频使用](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Video/VideoPlayer)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Video/VideoPlayer.jpg" width="400" height="300" /></div>  |
|   | 4.2 | 视频示例 | [视频置于UI之下](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Video/VideoStayOnBottom)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Video/VideoStayOnBottom.jpg" width="400" height="300" /></div>  |

### Animation
| 编号 | 子编号 | 类目 | 子项 | 备注 | 演示 |
| :----------------------- | :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
| 5  |   | [帧动画示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Animation) |   | [返回顶部](#quick)  |   |
|   | 5.1 | 帧动画示例 | [精灵帧动画](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Animation/SpriteFrameAnimation)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Animation/SpriteFrameAnimation.gif" width="400" height="300" /></div> |
|   | 5.2 | 帧动画示例 | [精灵帧移动动画](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Animation/SpriteMoveAnimation)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Animation/SpriteMoveAnimation.gif" width="400" height="300" /></div> |
|   | 5.3 | 帧动画示例 | [精灵帧动画动态创建](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Animation/CreateAnimationClip)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Animation/CreateAnimationClip.gif" width="400" height="300" /> </div> |

### Spine
| 编号 | 子编号 | 类目 | 子项 | 备注 | 演示 |
| :----------------------- | :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
| 6  |   | [Spine动画示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Spine) |   | [返回顶部](#quick)  |   |
|   | 6.1 | Spine动画示例 | [加载Spine动画](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Spine/LoadSpine)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Spine/LoadSpine.gif" width="400" height="300" /></div>  |
|   | 6.2 | Spine动画示例 | [Spine挂点](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Spine/SpineAttach)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Spine/SpineAttach.gif" width="400" height="300" /></div>  |
|   | 6.3 | Spine动画示例 | [Spine特效](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Spine/SpineMesh)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Spine/SpineMesh.gif" width="400" height="300" /></div> |
|   | 6.4 | Spine动画示例 | [Spine换肤](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Spine/SpineSkin)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Spine/SpineSkin.gif" width="400" height="300" /></div> |
|   | 6.5 | Spine动画示例 | [Spine碰撞检测](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Spine/SpineCollider)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Spine/SpineCollider.gif" width="400" height="300" /></div> |
|   | 6.6 | Spine动画示例 | [Spine动作切换](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Spine/SpineBoy)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Spine/SpineBoy.gif" width="400" height="300" /></div> |

### DragonBone
| 编号 | 子编号 | 类目 | 子项 | 备注 | 演示 |
| :----------------------- | :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
| 7  |   | [龙骨动画示例(DragonBones)](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/DragonBones) |   | [返回顶部](#quick)  |   |
|   | 7.1 | 龙骨动画示例(DragonBones) | [替换DragonBone动画](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/DragonBones/DragonBonesReplaceSlot)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/DragonBones/DragonBonesReplaceSlot.gif" width="400" height="300" /></div> |
|   | 7.2 | 龙骨动画示例(DragonBones) | [加载DragonBone](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/DragonBones/LoadDragonBones)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/DragonBones/LoadDragonBones.gif" width="400" height="300" /></div> |
|   | 7.3 | 龙骨动画示例(DragonBones) | [DragonBone碰撞检测](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/DragonBones/DragonBonesCollider)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/DragonBones/DragonBonesCollider.gif" width="400" height="300" /></div> |
|   | 7.4 | 龙骨动画示例(DragonBones) | [DragonBone挂点](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/DragonBones/DragonBonesAttach)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/DragonBones/DragonBonesAttach.gif" width="400" height="300" /></div> |
|   | 7.5 | 龙骨动画示例(DragonBones) | [动态替换DragonBone动画](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/DragonBones/DragonBones)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/DragonBones/DragonBones.gif" width="400" height="300" /></div> |
|   | 7.6 | 龙骨动画示例(DragonBones) | [DragonBone动画合批](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/DragonBones/DragonBonesBatch)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/DragonBones/DragonBonesBatch.gif" width="400" height="300" /></div> |

### Graphics
| 编号 | 子编号 | 类目 | 子项 | 备注 | 演示 |
| :----------------------- | :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
| 8  |   | [Graphics示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Graphics) |   | [返回顶部](#quick)  |   |
|   | 8.1 | Graphics示例 | [画饼状图](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Graphics/GraphicsArc)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Graphics/GraphicsArc.png" width="400" height="300" /></div> |
|   | 8.2 | Graphics示例 | [画正方形](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Graphics/GraphicsRect)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Graphics/GraphicsRect.png" width="400" height="300" /></div> |
|   | 8.3 | Graphics示例 | [画菱形](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Graphics/GraphicsLineTo)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Graphics/GraphicsLineTo.png" width="400" height="300" /></div> |
|   | 8.4 | Graphics示例 | [画圆形/椭圆形](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Graphics/GraphicsEllipse)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Graphics/GraphicsEllipse.png" width="400" height="300" /></div> |
|   | 8.5 | Graphics示例 | [三点画圆](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Graphics/GraphicsFindCircleAndDraw)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Graphics/GraphicsFindCircleAndDrawCircle.gif" width="400" height="300" /></div> |
|   | 8.6 | Graphics示例 | [Doodle](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Graphics/Doodle)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Graphics/Doodle.gif" width="400" height="300" /></div> |
|   | 8.7 | Graphics示例 | [Sine曲线](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Graphics/SineWaves)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Graphics/SineWaves.gif" width="400" height="300" /></div> |
|   | 8.8 | Graphics示例 | [画线](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Graphics/DrawLine)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Graphics/DrawLine.gif" width="400" height="300" /></div> |
|   | 8.9 | Graphics示例 | [烟花爆炸](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Graphics/GraphicsFireworksExplosion)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Graphics/GraphicsFireworksExplosion.gif" width="400" height="300" /></div> |

### Physics
| 编号 | 子编号 | 类目 | 子项 | 备注 | 演示 |
| :----------------------- | :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
| 9  |   | [物理示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics) |   | [返回顶部](#quick)  |   |
|   | 9.1 | 物理示例 | [检测碰撞体是否存在](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsRaycastClosest)  |   | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Physics/PhysicsRaycastClosest-01.jpg" width="400" height="300" /></div>  |
|   | 9.2 | 物理示例 | [射线检测](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsRaycast)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Physics/PhysicsRaycast.gif" width="400" height="300" /></div> |
|   | 9.3 | 物理示例 | [使用物理材质](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsMaterial)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Physics/PhysicsMaterial.gif" width="400" height="300" /></div> |
|   | 9.4 | 物理示例 | [使用网格碰撞器组件](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsMeshCollider)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Physics/PhysicsMeshCollider.gif" width="400" height="300" /></div> |
|   | 9.5 | 物理示例 | [物体旋转/跳跃](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsRotateAndJumpWithVelocity)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Physics/PhysicsVelocity.gif" width="400" height="300" /></div> |
|   | 9.6 | 物理示例 | [使用触发器-触发事件](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsTriggerEvent)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Physics/PhysicsTriggerEvent.gif" width="400" height="300" /></div> |
|   | 9.7 | 物理示例 | [运行时更新碰撞体数据](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsRuntimeUpdate)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Physics/PhysicsRuntimeUpdate.gif" width="400" height="300" /></div> |
|   | 9.8 | 物理示例 | [使用平面碰撞器组件](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsPlaneCollider)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Physics/PhysicsPlaneCollider.gif" width="400" height="300" /></div> |
|   | 9.9 | 物理示例 | [物理同步测试](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsSync)  | 官方DEMO | <div align=center<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Physics/PhysicsSync.gif" width="400" height="300" /></div> |
|   | 9.10 | 物理示例 | [物理分组掩码](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsGroupMask)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Physics/PhysicsGroupMask.gif" width="400" height="300" /></div> |
|   | 9.11 | 物理示例 | [物理动态运行测试](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsRunDynamicTest)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Physics/PhysicsRunDynamicTest.gif" width="400" height="300" /></div> |
|   | 9.12 | 物理示例 | [不规则物体碰撞](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsConvexColliders)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Physics/PhysicsConvexColliders.gif" width="400" height="300" /></div> |
|   | 9.13 | 物理示例 | [点对点约束](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsPointToPointConstraint)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Physics/PhysicsPointToPointConstraint.gif" width="400" height="300" /></div> |
|   | 9.14 | 物理示例 | [碰撞点数据测试](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsContactData)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Physics/PhysicsContactData.gif" width="400" height="300" /></div> |
|   | 9.15 | 物理示例 | [链条约束](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsHingeConstraint)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Physics/PhysicsHingeConstraint.gif" width="400" height="300" /></div> |
|   | 9.16 | 物理示例 | [使用恒力组件](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsForceConstant)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Physics/PhysicsForceConstant.gif" width="400" height="300" /></div> |
|   | 9.17 | 物理示例 | [使用碰撞器-碰撞事件](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsCollisionEvent)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Physics/PhysicsCollisionEvent.gif" width="400" height="300" /></div> |
|   | 9.18 | 物理示例 | [胶囊体触发器测试](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsCapsuleTrigger)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Physics/PhysicsCapsuleTrigger.gif" width="400" height="300" /></div> |

### Tween
| 编号 | 子编号 | 类目 | 子项 | 备注 | 演示 |
| :----------------------- | :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
| 10  |   | [Tween示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Tween) |   | [返回顶部](#quick)  |   |
|   | 10.1 | Tween示例 | [透明度渐变](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Tween/TweenOpacityChange)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Tween/TweenOpacityChange.gif" width="400" height="300" /></div> |
|   | 10.2 | Tween示例 | [旋转](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Tween/TweenRotateChange)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Tween/TweenRotateChange.gif" width="400" height="300" /></div> |
|   | 10.3 | Tween示例 | [环形(圆形)运动](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Tween/TweenCircleMove)  |   | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Tween/TweenCircleMove.gif" width="400" height="300" /></div> |
|   | 10.4 | Tween示例 | [旋转 & 缩放](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Tween/TweenRotateAndScaleForever)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Tween/TweenRotateAndScaleForever.gif" width="400" height="300" /></div> |
|   | 10.5 | Tween示例 | [使用Easing示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Tween/TweenShowMonster)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/gif/image/Tween/TweenShowMonster.gif" width="400" height="300" /></div> |
|   | 10.6 | Tween示例 | [CCUtils封装库(常用TweenAPI扩展)](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Tween/CCUtilsDemo)  |  |   |

### Model
| 编号 | 子编号 | 类目 | 子项 | 备注 | 演示 |
| :----------------------- | :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
| 11  |   | [Model示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Model) |   | [返回顶部](#quick)  |   |
|   | 11.1 | Model示例 | [表情动画/变形动画](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Model/MorphHead)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Model/MorphHead.gif" width="400" height="300" /></div> |
|   | 11.2 | Model示例 | [跳舞的女人](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Model/SkeletonAnimationDanceWoman)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Model/SkeletonAnimationDanceWoman.gif" width="400" height="300" /></div> |
|   | 11.3 | Model示例 | [使用卡通材质](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Model/SkeletonAnimationToon)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Model/SkeletonAnimationToon.gif" width="400" height="300" /></div> |
|   | 11.4 | Model示例 | [动态加载材质](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Model/DynamicLoadMaterial)  | 官方DEMO  |   |
|   | 11.5 | Model示例 | [冬来了](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Model/Winter)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Model/Winter.png" width="400" height="300" /></div>  |
|   | 11.6 | Model示例 | [骑士](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Model/Knight)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Model/Knight01.png" width="400" height="300" /></div>  |

### Renderer
| 编号 | 子编号 | 类目 | 子项 | 备注 | 演示 |
| :----------------------- | :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
| 12  |   | [Renderer示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Renderer) |   | [返回顶部](#quick)  |
|   | 12.1 | Renderer示例 | [2D在3D中渲染](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Renderer/Object2DRenderingIn3D)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Renderer/Object2DRenderingIn3D.gif" width="400" height="300" /></div> |
|   | 12.2 | Renderer示例 | [Web截图](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Renderer/CaptureForWeb)  | 3.3.0版本支持 | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Renderer/CaptureForWeb.gif" width="400" height="300" /></div>  |

### Particle
| 编号 | 子编号 | 类目 | 子项 | 备注 | 演示 |
| :----------------------- | :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
| 13  |   | [粒子示例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle) |   | [返回顶部](#quick)  |   |
|   | 13.1 | 粒子示例 | [火焰效果](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/FlameSimulation)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Particle/FlameSimulation.gif" width="400" height="300" /></div> |
|   | 13.2 | 粒子示例 | [粒子拖尾1](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleTrails01)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Particle/ParticleTrails01.gif" width="400" height="300" /></div> |
|   | 13.3 | 粒子示例 | [粒子拖尾2](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleTrails02)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Particle/ParticleTrails02.gif" width="400" height="300" /></div> |
|   | 13.4 | 粒子示例 | [粒子拖尾3](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleTrails03)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Particle/ParticleTrails03.gif" width="400" height="300" /></div> |
|   | 13.5 | 粒子示例 | [粒子拖尾4](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleTrails04)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Particle/ParticleTrails04.gif" width="400" height="300" /></div> |
|   | 13.6 | 粒子示例 | [颜色模块](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleColorOverLifeTimeModule)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Particle/ParticleColor.gif" width="400" height="300" /></div> |
|   | 13.7 | 粒子示例 | [加速度模块](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleForceOverTimeModule)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Particle/ParticleForce.gif" width="400" height="300" /></div> |
|   | 13.8 | 粒子示例 | [限速模块](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleLimitVelocityOvertimeModule)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Particle/ParticleLimitVelocity.gif" width="400" height="300" /></div> |
|   | 13.9 | 粒子示例 | [主模块](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleMain)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Particle/ParticleMain.gif" width="400" height="300" /></div> |
|   | 13.10 | 粒子示例 | [渲染模块](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleRenderer)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Particle/ParticleRenderer.gif" width="400" height="300" /></div> |
|   | 13.11 | 粒子示例 | [旋转模块](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleRotationOverTimeModule)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Particle/ParticleRotation.gif" width="400" height="300" /></div> |
|   | 13.12 | 粒子示例 | [发射器模块](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleShapeModule)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Particle/ParticleShape.gif" width="400" height="300" /></div> |
|   | 13.13 | 粒子示例 | [大小模块](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleSizeOverTimeModule)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Particle/ParticleSize.gif" width="400" height="300" /></div> |
|   | 13.14 | 粒子示例 | [贴图动画模块](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleTextureAnimationModule)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Particle/ParticleTextureAnimation.gif" width="400" height="300" /></div> |
|   | 13.15 | 粒子示例 | [速度模块](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleVelocityOverTimeModule)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Particle/ParticleVelocity.gif" width="400" height="300" /></div> |
|   | 13.16 | 粒子示例 | [2D粒子显隐](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ToggleParticle)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Particle/ToggleParticle.gif" width="400" height="300" /></div> |
|   | 13.17 | 粒子示例 | [2D粒子-完成后自动移除](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/AutoRemoveParticle2D)  | 官方DEMO  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Particle/AutoRemoveParticle2D.gif" width="400" height="300" /></div> |

### DemandCase
| 编号 | 子编号 | 类目 | 子项 | 备注 | 演示 |
| :----------------------- | :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
| 14 |   | [需求案例](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Demo) |   | [返回顶部](#quick)  |   |
|   | 14.1 | 需求案例 | [物体是否在摄像机范围内](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Demo/ObjectIsInCameraView)  |  |<div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Demo/ObjectIsInView.gif" width="400" height="300" /></div> |
|   | 14.2 | 需求案例 | [使用动画帧事件](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Demo/UseAnimationFrameEvents)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Demo/UseAnimationFrameEvents.gif" width="400" height="300" /></div> |
|   | 14.3 | 需求案例 | [动态获取脚本的方法名](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Demo/GetScriptFunction)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Demo/GetScriptFunction-01.png" width="400" height="300" /></div> |
|   | 14.4 | 需求案例 | [动态获取AnimationClip中属性数据](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Demo/GetAnimationClipDataByTime)  |  |  <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Demo/GetAnimationClipDataByTime-06.png" width="400" height="300" /></div> |
|   | 14.5 | 需求案例 | [点击响应测试](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Demo/PressResponseTest)  |   |   |
|   | 14.6 | 需求案例 | [物体始终在人物右侧](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Demo/ObjectAlwaysFollow)  |   | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Demo/ObjectAlwaysFollow.gif" width="400" height="300" /></div> |
|   | 14.7 | 需求案例 | [圆形进度条](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Demo/CircularProgressBar)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Demo/CircularProgressBar.gif" width="400" height="300" /></div> |
|   | 14.8 | 需求案例 | [椭圆轨迹运动](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Demo/EllipseMove)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Demo/EllipseMove.gif" width="400" height="300" /></div> |
|   | 14.9 | 需求案例 | [贝塞尔曲线路径在线绘制工具](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Demo/BezierCurvePathCreator)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Demo/BezierCurvePathCreator.gif" width="400" height="300" /></div> |
|   | 14.10 | 需求案例 | [动态加载FBX模型中的Mesh](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Demo/DynamicLoadMesh)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Demo/DynamicLoadMesh.gif" width="400" height="300" /></div> |
|   | 14.11 | 需求案例 | [旋转后矩形是否包含点](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Demo/AbovePointTest)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Demo/AbovePointTest.png" width="400" height="300" /></div> |
|   | 14.12 | 需求案例 | [弯曲的道路](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Demo/RoadCurved)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Demo/RoadCurved.png" width="400" height="300" /></div> |
|   | 14.13 | 需求案例 | [3D位置转化](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Demo/ScreenToWorldPoint)  | 官方DEMO | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Demo/ScreenToWorldPoint.gif" width="400" height="300" /></div> |
|   | 14.14 | 需求案例 | [动态生成单色精灵](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Demo/AutoGenerateSpriteframe)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Demo/AutoGenerateSpriteframe.png" width="400" height="300" /></div> |
|   | 14.15 | 需求案例 | [不规则按钮](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Demo/IrregularButton)  |  | <div align=center><img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/gif/Demo/IrregularButton.gif" width="400" height="300" /></div> |