# CocosCreatorHowToUse

**Repository Path**: ph1112/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**: 149
- **Created**: 2021-08-25
- **Last Updated**: 2021-08-25

## 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+
 

## QuickLinks
| [音频示例](#Audio) | [常用整理](#CommonUse) | [Spine动画示例](#Spine)
| [DragonBone动画示例](#DragonBone) | [帧动画示例](#Animation)| [Graphics示例](#Graphics) | [物理示例](#Physics) | [Tween示例](#TweenExample)
| [渲染示例](#RenderExample) | [模型示例](#ModelExample) | [粒子示例](#ParticleExample) | [需求案例](#DemandCase) |
 
## Examples
### Audio

| 编号 | 类目 | 子项 | 备注 |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
| 1  | 音频示例  [跳转链接](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Audio) |   | [返回顶部](#QuickLinks)  |
|  |  | 多个音效同时播放 [PlayOneShot](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Audio/PlayOneShot)  |   |
|  |  | 添加全局按钮的音效 [AddGlobalButtonSound](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Audio/AddGlobalButtonSound)  |   |
|  |  | 模拟钢琴播放 [PianoPlayTest](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>

### CommonUse
| 2  | 常用整理  [跳转链接](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Documents) |   | [返回顶部](#QuickLinks)  |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
|  |  | 萌新文档(2.x && 3.x) [MoeNewDocument](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Documents/MoeNewDocument)  |  |
|  |  | 自定义TS脚本模板 [Custom-TS-ScriptTemplate](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Documents/Custom-TS-ScriptTemplate)  |  |
|  |  | 使用动画帧事件 [UseAnimationFrameEvents](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Documents/UseAnimationFrameEvents)  |  |
|  |  | 动态获取脚本的方法名(js.getClassByName) [GetScriptFunction](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Documents/GetScriptFunction)  |  |
|  |  | 动态获取AnimationClip中属性数据 [GetAnimationClipDataByTime](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Documents/GetAnimationClipDataByTime)  |  |
|  |  | 自定义Demo模板 [Custom-CasesTemplate](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Documents/Custom-CasesTemplate)  |  |
|  |  | 自定义引擎 [Custom-Engine](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Documents/Custom-Engine)  |  |
|  |  | 点击响应测试 [PressResponseTest](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Documents/PressResponseTest)  |  |

### Spine
| 3  | Spine动画示例  [跳转链接](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Spine) |   | [返回顶部](#QuickLinks)  |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
| 3.1 | Spine动画示例 | 加载Spine动画 [LoadSpine](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/image/Spine/LoadSpine.gif" width="400" height="300" />
</div>

| 3.2 | Spine动画示例 | Spine挂点 [SpineAttach](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/image/Spine/SpineAttach.gif" width="400" height="300" />
</div>

| 3.3 | Spine动画示例 | Spine特效(部分) [SpineMesh](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/image/Spine/SpineMesh.gif" width="400" height="300" />
</div>

| 3.4 | Spine动画示例 | Spine换肤 [SpineSkin](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/image/Spine/SpineSkin.gif" width="400" height="300" />
</div>

| 3.5 | Spine动画示例 | Spine碰撞检测 [SpineCollider](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/image/Spine/SpineCollider.gif" width="400" height="300" />
</div>

| 3.6 | Spine动画示例 | Spine动作切换 [SpineBoy](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/image/Spine/SpineBoy.gif" width="400" height="300" />
</div>

### DragonBone
| 4  | DragonBone动画示例  [跳转链接](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/DragonBones) |   | [返回顶部](#QuickLinks)  |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
| 4.1 | DragonBone动画示例 | 替换DragonBone动画 [DragonBonesReplaceSlot](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/image/DragonBones/DragonBonesReplaceSlot.gif" width="400" height="300" />
</div>

| 4.2 | DragonBone动画示例 | 加载DragonBone [LoadDragonBones](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/image/DragonBones/LoadDragonBones.gif" width="400" height="300" />
</div>

| 4.3 | DragonBone动画示例 | DragonBone碰撞检测 [DragonBonesCollider](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/image/DragonBones/DragonBonesCollider.gif" width="400" height="300" />
</div>

| 4.4 | DragonBone动画示例 | DragonBone挂点 [DragonBonesAttach](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/image/DragonBones/DragonBonesAttach.gif" width="400" height="300" />
</div>

| 4.5 | DragonBone动画示例 | 动态替换DragonBone动画 [DragonBones](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/image/DragonBones/DragonBones.gif" width="400" height="300" />
</div>

| 4.6 | DragonBone动画示例 | DragonBone动画合批 [DragonBonesBatch](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/image/DragonBones/DragonBonesBatch.gif" width="400" height="300" />
</div>

### Animation
| 5  | 帧动画示例  [跳转链接](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Animation) |   | [返回顶部](#QuickLinks)  |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
| 5.1 | 帧动画示例 | 精灵帧动画 [SpriteFrameAnimation](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/image/Animation/SpriteFrameAnimation.gif" width="400" height="300" />
</div>

| 5.2 | 帧动画示例 | 精灵帧移动动画 [SpriteMoveAnimation](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/image/Animation/SpriteMoveAnimation.gif" width="400" height="300" />
</div>

| 5.3 | 帧动画示例 | 精灵帧动画动态创建 [CreateAnimationClip](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/image/Animation/CreateAnimationClip.gif" width="400" height="300" />
</div>
&nbsp;

### Graphics
| 6  | Graphics示例  [跳转链接](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Graphics) |   | [返回顶部](#QuickLinks)  |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
| 6.1 | Graphics示例 | 画饼状图 [GraphicsArc](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Graphics/GraphicsArc)  | 官方DEMO |

| [返回顶部](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0#QuickLinks)
|

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

| 6.2 | Graphics示例 | 画正方形 [GraphicsRect](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>

| 6.3 | Graphics示例 | 画菱形 [GraphicsLineTo](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>

| 6.4 | Graphics示例 | 画圆形/椭圆形 [GraphicsEllipse](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>

| 6.5 | Graphics示例 | 画圆(使用三点确认一个圆并画圆) [GraphicsFindCircleAndDraw](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/image/Graphics/GraphicsFindCircleAndDrawCircle.gif" width="400" height="300" />
</div>

### Physics
| 7  | 物理示例  [跳转链接](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics) |   | [返回顶部](#QuickLinks)  |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
| 7.1 | 物理示例 | 检测碰撞体是否存在 [PhysicsRaycastClosest](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Physics/PhysicsRaycastClosest)  |  |
| 7.2 | 物理示例 | 射线检测 [PhysicsRaycast](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/image/Physics/PhysicsRaycast.gif" width="400" height="300" />
</div>

| 7.3 | 物理示例 | 使用物理材质 [PhysicsMaterial](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/image/Physics/PhysicsMaterial.gif" width="400" height="300" />
</div>

| 7.4 | 物理示例 | 使用网格碰撞器组件 [PhysicsMeshCollider](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/image/Physics/PhysicsMeshCollider.gif" width="400" height="300" />
</div>

| 7.5 | 物理示例 | 物体旋转/跳跃 [PhysicsRotateAndJumpWithVelocity](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/image/Physics/PhysicsVelocity.gif" width="400" height="300" />
</div>

| 7.6 | 物理示例 | 使用触发器-触发事件 [PhysicsTriggerEvent](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/image/Physics/PhysicsTriggerEvent.gif" width="400" height="300" />
</div>

| 7.7 | 物理示例 | 运行时更新碰撞体数据 [PhysicsRuntimeUpdate](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/image/Physics/PhysicsRuntimeUpdate.gif" width="400" height="300" />
</div>

| 7.8 | 物理示例 | 使用平面碰撞器组件 [PhysicsPlaneCollider](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/image/Physics/PhysicsPlaneCollider.gif" width="400" height="300" />
</div>

| 7.9 | 物理示例 | 物理同步测试 [PhysicsSync](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/image/Physics/PhysicsSync.gif" width="400" height="300" />
</div>

| 7.10 | 物理示例 | 物理分组掩码 [PhysicsGroupMask](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/image/Physics/PhysicsGroupMask.gif" width="400" height="300" />
</div>

| 7.11 | 物理示例 | 物理动态运行测试 [PhysicsRunDynamicTest](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/image/Physics/PhysicsRunDynamicTest.gif" width="400" height="300" />
</div>

| 7.12 | 物理示例 | 不规则物体碰撞 [PhysicsConvexColliders](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/image/Physics/PhysicsConvexColliders.gif" width="400" height="300" />
</div>

| 7.13 | 物理示例 | 点对点约束 [PhysicsPointToPointConstraint](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/image/Physics/PhysicsPointToPointConstraint.gif" width="400" height="300" />
</div>

| 7.14 | 物理示例 | 碰撞点数据测试 [PhysicsContactData](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/image/Physics/PhysicsContactData.gif" width="400" height="300" />
</div>

| 7.15 | 物理示例 | 链条约束 [PhysicsHingeConstraint](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/image/Physics/PhysicsHingeConstraint.gif" width="400" height="300" />
</div>

| 7.16 | 物理示例 | 使用恒力组件 [PhysicsForceConstant](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/image/Physics/PhysicsForceConstant.gif" width="400" height="300" />
</div>

| 7.17 | 物理示例 | 使用碰撞器-碰撞事件 [PhysicsCollisionEvent](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/image/Physics/PhysicsCollisionEvent.gif" width="400" height="300" />
</div>

| 7.18 | 物理示例 | 胶囊体触发器测试 [PhysicsCapsuleTrigger](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/image/Physics/PhysicsCapsuleTrigger.gif" width="400" height="300" />
</div>

### TweenExample
| [返回顶部](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0#QuickLinks)
|
### 6. Tween示例
#### * 6.1 Tween实现透明度渐变  [TweenOpacityChange](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/image/Tween/TweenOpacityChange.gif" width="400" height="300" />
</div>

#### * 6.2 Tween实现旋转  [TweenRotateChange](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/image/Tween/TweenRotateChange.gif" width="400" height="300" />
</div>

#### * 6.3 Tween实现圆形运动  [TweenCircleMove](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/image/Tween/TweenCircleMove.gif" width="400" height="300" />
</div>

#### * 6.4 Tween实现一边旋转一边缩放  [TweenRotateAndScaleForever](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/image/Tween/TweenRotateAndScaleForever.gif" width="400" height="300" />
</div>

#### * 6.5 Tween使用Easing实例(官方示例)  [TweenShowMonster](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Tween/TweenShowMonster)

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

#### * 6.6 CCUtils 封装  [CCUtilsDemo](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Tween/CCUtilsDemo)
&nbsp;

---
### RenderExample
| [返回顶部](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0#QuickLinks)
|
### 7. 渲染相关示例
#### * 7.1 2D的物体渲染在3D场景中(官方示例)  [Object2DRenderingIn3D](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Renderer/Object2DRenderingIn3D)

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

#### * 7.2 Web截图测试(官方示例)  [CaptureForWeb](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Renderer/CaptureForWeb)
&nbsp;

---
### ModelExample
| [返回顶部](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0#QuickLinks)
|
### 8. 模型示例
#### * 8.1 表情动画/变形动画(官方示例)  [MorphHead](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Model/MorphHead)

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

#### * 8.2 骨骼动画--跳舞的女人(官方示例)  [SkeletonAnimationDanceWoman](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Model/SkeletonAnimationDanceWoman)

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

#### * 8.3 骨骼动画(卡通材质)(官方示例)  [SkeletonAnimationToon](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Model/SkeletonAnimationToon)

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

#### * 8.4 动态加载材质(官方示例)  [DynamicLoadMaterial](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Model/DynamicLoadMaterial)
&nbsp;

---
### ParticleExample
| [返回顶部](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0#QuickLinks)
|
### 9. 粒子示例 
#### * 9.1 火焰效果 [FlameSimulation](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/image/Particle/FlameSimulation.gif" width="400" height="300" />
</div>

#### * 9.2 粒子拖尾模块(官方示例)
#### ** 3d粒子拖尾模块1  [ParticleTrails01](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleTrails01)

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

#### ** 3d粒子拖尾模块2  [ParticleTrails02](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleTrails02)

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

#### ** 3d粒子拖尾模块3  [ParticleTrails03](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleTrails03)

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

#### ** 3d粒子拖尾模块4  [ParticleTrails04](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleTrails04)

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

#### * 9.3 3d粒子颜色模块(官方示例)  [ParticleColorOverLifeTimeModule](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleColorOverLifeTimeModule)

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

#### * 9.4 3d粒子加速度模块(官方示例)  [ParticleForceOverTimeModule](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleForceOverTimeModule)

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

#### * 9.5 3d粒子限速模块(官方示例)  [ParticleLimitVelocityOvertimeModule](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleLimitVelocityOvertimeModule)

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

#### * 9.6 3d粒子主模块(官方示例)  [ParticleMain](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleMain)

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

#### * 9.7 3d粒子渲染模块(官方示例)  [ParticleRenderer](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleRenderer)

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

#### * 9.8 3d粒子旋转模块(官方示例)  [ParticleRotationOverTimeModule](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleRotationOverTimeModule)

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

#### * 9.9 3d粒子发射器模块(官方示例)  [ParticleShapeModule](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleShapeModule)

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

#### * 9.10 3d粒子大小模块(官方示例)  [ParticleSizeOverTimeModule](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleSizeOverTimeModule)

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

#### * 9.11 3d粒子贴图动画模块(官方示例)  [ParticleTextureAnimationModule](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleTextureAnimationModule)

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

#### * 9.12 3d粒子速度模块(官方示例)  [ParticleVelocityOverTimeModule](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ParticleVelocityOverTimeModule)

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

#### * 9.13 开关2d粒子显示(官方示例)  [ToggleParticle](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Particle/ToggleParticle)

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

&nbsp;

---
### DemandCase
| [返回顶部](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0#QuickLinks)
|
### 10. 需求案例
#### * 10.1 判断物体是否在摄像机视野之内?  [ObjectIsInCameraView](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/image/Demo/ObjectIsInView.gif" width="400" height="300" />
<img src="https://gitee.com/yeshaohelpme/HowToUseDemoImageLibrary/raw/master/image/Demo/ObjectIsInView2.gif" width="400" height="300" />
</div>

#### * 10.2 物体始终保持在人物右侧？  [ObjectAlwaysFollow](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/image/Demo/ObjectAlwaysFollow.gif" width="400" height="300" />
</div>

#### * 10.3 相机使用范例  [CameraUseSample](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/Tutorial/CameraUseSample)

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

#### * 10.4 制作圆形加载进度条?  [CircularProgressBar](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/image/Demo/CircularProgressBar.gif" width="400" height="300" />
</div>

#### * 10.5 椭圆轨迹运动(update中计算角度)  [EllipseMove](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/image/Demo/EllipseMove.gif" width="400" height="300" />
</div>

#### * 10.6 贝塞尔曲线路径在线绘制工具  [BezierCurvePathCreator](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/image/Demo/BezierCurvePathCreator.gif" width="400" height="300" />
</div>

#### * 10.7 动态加载FBX模型中的Mesh  [DynamicLoadMesh](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/image/Demo/DynamicLoadMesh.gif" width="400" height="300" />
</div>

#### * 10.8 旋转后矩形判断是否包含某个点  [AbovePointTest](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>