# CocosCreatorDemos

**Repository Path**: sdjs/CocosCreatorDemos

## Basic Information

- **Project Name**: CocosCreatorDemos
- **Description**: 大道至简，殊途同归。
CocosCreatorDemos主要是整理并实现了一些常用的用户需求示例，希望可以给用户提供一些使用灵感。
CocosCreatorDemos mainly organizes and implements some common user‘s needs demos, hoping to provide users with some inspiration.
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: v3.0.0
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 334
- **Created**: 2021-10-30
- **Last Updated**: 2022-05-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## CocosCreatorDemos
#### Write by yeshao2069.
#### CocosCreatorDemos provides some user's needs DEMOs, hoping to provide users with some inspiration.

#### Cocos Creator V3.0.0+
 

## QuickLinks
### 2DDEMO
| 编号 | 类目 | 项目 | 备注 | 编号 | 类目 | 项目 | 备注 |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
| 1.1  | 2D | [双人分屏](#dualsplitscreen)  |   | 1.2  | 2D | [场景小地图](#sceneminimap)  |   |
| 1.3  | 2D | [3D模型显示在UI(UIMeshRenderer)](#uimeshrenderer)  |   | 1.4  | 2D | [3D模型显示在UI(RenderTexture)](#rendertexture)  |   |
| 1.5  | 2D | [3D模型显示在UI(RenderTexture-骨骼动画)](#rendertextureforskeletalanimation)  |   | 1.6  | 2D | [围绕旋转一周(2D)](#camerarotatearound2d)  |   |
| 1.7  | 2D | [无限视差滚动背景](#scrollingbackground)  |   | 1.8  | 2D | [移动残影](#movingshadow)  |   |
| 1.9  | 2D | [移动残影(Spine)](#movingshadowforspine)  |   | 1.10  | 2D | [放大镜](#magnifier)  |   |
| 1.11  | 2D | [刮刮卡](#scratchcard)  |   | 1.12  | 2D | [金币落袋](#coinflytowallet)  |   |
| 1.13  | 2D | [打印机文字](#printerword)  |   | 1.14  | 2D | [子弹跟踪](#bulletfollow)  |   |
| 1.15  | 2D | [汉字临摹](#hanziwriter)  |   | 1.16  | 2D | [虚拟摇杆](#virtualjoystick)  |   |
| 1.17  | 2D | [屏幕点击震动](#screenvibrating)  |   | 1.18  | 2D | [折纸](#origami)  |   |
| 1.19  | 2D | [KTV歌词](#ktvlabel)  |   | 1.20  | 2D | [循环旋转菜单](#circularmenu)  |   |
| 1.21  | 2D | [无限循环的翻页组件](#circlescrollview)  |   | 1.22  | 2D | [可视化算法](#visualizationalgorithm)  |   |

### 3DDEMO
| 编号 | 类目 | 项目 | 备注 | 编号 | 类目 | 项目 | 备注 |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
| 2.1  | 3D | [镜头围绕旋转一周](#camerarotatearound)  |   | 2.2  | 3D | [镜头围绕旋转一周(Quat)](#camerarotatearoundwithquat)  |   |
| 2.3  | 3D | [自转一周](#selfrotatearound)  |   | 2.4  | 3D | [自定义骨骼动画播放](#customizeplayskeletalanim)  |   |
| 2.5  | 3D | [模型换肤](#modeldressup)  |   | 2.6  | 3D | [第一人称视角](#firstpersonperspective)  |   |
| 2.7  | 3D | [3D文本](#model3dtext)  |   | 2.8  | 3D | [第一人称射击](#firstpersonshooting)  |   |
| 2.9  | 3D | [点击旋转](#toucharound)  |   |

 
### 2D - DEMO

#### DualSplitScreen
| 编号 | 类别 | 项目 | 备注 |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
| 1  | 2D DEMO  [跳转链接](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/2DDemo) |   | [返回顶部](#2ddemo)  |
| 1.1 | 2D DEMO | 双人分屏 [DualSplitScreen](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/2DDemo/DualSplitScreen)  | [返回2D DEMO](#2ddemo)  |
<div align=center>
<img src="https://gitee.com/yeshaohelpme/DemoImageLibrary/raw/master/image/2DDemo/DualSplitScreen.gif" width="400" height="300" />
</div>

#### SceneMiniMap
| 1.2 | 2D DEMO | 场景小地图 [SceneMiniMap](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/2DDemo/SceneMiniMap)  | [返回2D DEMO](#2ddemo) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
<div align=center>
<img src="https://gitee.com/yeshaohelpme/DemoImageLibrary/raw/master/image/2DDemo/SceneMiniMap.gif" width="400" height="300" />
</div>

#### UIMeshRenderer
| 1.3 | 2D DEMO | 3D模型显示在UI中(UIMeshRenderer) [UIMeshRendererDemo](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/2DDemo/UIMeshRendererDemo)  | [返回2D DEMO](#2ddemo) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
<div align=center>
<img src="https://gitee.com/yeshaohelpme/DemoImageLibrary/raw/master/image/2DDemo/UIMeshRenderer.gif" width="400" height="300" />
</div>

#### RenderTexture
| 1.4 | 2D DEMO | 3D模型显示在UI中(RenderTexture) [RenderTextureDemo](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/2DDemo/RenderTextureDemo)  | [返回2D DEMO](#2ddemo) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
<div align=center>
<img src="https://gitee.com/yeshaohelpme/DemoImageLibrary/raw/master/image/2DDemo/RenderTextureDemo.gif" width="400" height="300" />
</div>

#### RenderTextureForSkeletalAnimation
| 1.5 | 2D DEMO | 骨骼动画显示在UI中(RenderTexture) [RenderTextureDemoForSkeletalAnimation](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/2DDemo/RenderTextureDemoForSkeletalAnimation)  | [返回2D DEMO](#2ddemo) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
<div align=center>
<img src="https://gitee.com/yeshaohelpme/DemoImageLibrary/raw/master/image/2DDemo/RenderTextureForSkeletalAnim.gif" width="400" height="300" />
</div>

#### CameraRotateAround2D
| 1.6 | 2D DEMO | 围绕物体旋转一周效果(2D) [CameraRotateAround2D](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/2DDemo/CameraRotateAround2D)  | [返回2D DEMO](#2ddemo) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
<div align=center>
<img src="https://gitee.com/yeshaohelpme/DemoImageLibrary/raw/master/image/2DDemo/CameraRotateAround2D-NoFaceTarget.gif" width="400" height="300" />
</div>

#### ScrollingBackground
| 1.7 | 2D DEMO | 无限视差滚动背景 [ScrollingBackground](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/2DDemo/ScrollingBackground)  | [返回2D DEMO](#2ddemo) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
<div align=center>
<img src="https://gitee.com/yeshaohelpme/DemoImageLibrary/raw/master/image/2DDemo/ScrollingBackground.gif" width="400" height="300" />
</div>

#### MovingShadow
| 1.8 | 2D DEMO | 移动残影(sprite) [ObjectMovingShadow](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/2DDemo/ObjectMovingShadow)  | [返回2D DEMO](#2ddemo) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
<div align=center>
<img src="https://gitee.com/yeshaohelpme/DemoImageLibrary/raw/master/image/2DDemo/ObjectMovingShadow.gif" width="400" height="300" />
</div>

#### MovingShadowForSpine
| 1.9 | 2D DEMO | 移动残影(spine) [ObjectMovingShadowForSpine](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/2DDemo/ObjectMovingShadowForSpine)  | [返回2D DEMO](#2ddemo) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
<div align=center>
<img src="https://gitee.com/yeshaohelpme/DemoImageLibrary/raw/master/image/2DDemo/ObjectMovingShadowForSpine.gif" width="400" height="300" />
</div>

#### Magnifier
| 1.10 | 2D DEMO | 放大镜 [Magnifier](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/2DDemo/Magnifier)  | [返回2D DEMO](#2ddemo) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
<div align=center>
<img src="https://gitee.com/yeshaohelpme/DemoImageLibrary/raw/master/image/2DDemo/Magnifier.gif" width="400" height="300" />
</div>

#### ScratchCard
| 1.11 | 2D DEMO | 刮刮卡 [ScratchCard](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/2DDemo/ScratchCard)  | [返回2D DEMO](#2ddemo) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
<div align=center>
<img src="https://gitee.com/yeshaohelpme/DemoImageLibrary/raw/master/image/2DDemo/ScratchCard.gif" width="400" height="300" />
</div>

#### CoinFlyToWallet
| 1.12 | 2D DEMO | 金币落袋 [CoinFlyToWallet](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/2DDemo/CoinFlyToWallet)  | [返回2D DEMO](#2ddemo) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
<div align=center>
<img src="https://gitee.com/yeshaohelpme/DemoImageLibrary/raw/master/image/2DDemo/CoinFlyToWallet-4.gif" width="400" height="300" />
</div>

#### PrinterWord
| 1.13 | 2D DEMO | 打印机文字 [PrinterWord](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/2DDemo/PrinterWord)  | [返回2D DEMO](#2ddemo) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
<div align=center>
<img src="https://gitee.com/yeshaohelpme/DemoImageLibrary/raw/master/image/2DDemo/PrinterWord.gif" width="400" height="300" />
</div>

#### BulletFollow
| 1.14 | 2D DEMO | 子弹追踪 [BulletFollow](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/2DDemo/BulletFollow)  | [返回2D DEMO](#2ddemo) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
<div align=center>
<img src="https://gitee.com/yeshaohelpme/DemoImageLibrary/raw/master/image/2DDemo/BulletFollow.gif" width="400" height="300" />
</div>

#### HanZiWriter
| 1.15 | 2D DEMO | 汉字临摹 [HanZiWriter](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/2DDemo/HanZiWriter)  | [返回2D DEMO](#2ddemo) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |

#### VirtualJoyStick
| 1.16 | 2D DEMO | 虚拟摇杆 [VirtualJoyStick](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/2DDemo/VirtualJoyStick)  | [返回2D DEMO](#2ddemo) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
<div align=center>
<img src="https://gitee.com/yeshaohelpme/DemoImageLibrary/raw/master/image/2DDemo/VirtualJoyStick.gif" width="400" height="300" />
</div>

#### ScreenVibrating
| 1.17 | 2D DEMO | 屏幕点击震动 [ScreenVibrating](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/2DDemo/ScreenVibrating)  | [返回2D DEMO](#2ddemo) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
<div align=center>
<img src="https://gitee.com/yeshaohelpme/DemoImageLibrary/raw/master/image/2DDemo/ScreenVibrating.gif" width="400" height="300" />
</div>

#### Origami
| 1.18 | 2D DEMO | 折纸 [Origami](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/2DDemo/Origami)  | [返回2D DEMO](#2ddemo) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
<div align=center>
<img src="https://gitee.com/yeshaohelpme/DemoImageLibrary/raw/master/image/2DDemo/Origami.gif" width="400" height="300" />
</div>

#### KTVLabel
| 1.19 | 2D DEMO | KTV歌词 [KTVLabel](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/2DDemo/KTVLabel)  | [返回2D DEMO](#2ddemo) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
<div align=center>
<img src="https://gitee.com/yeshaohelpme/DemoImageLibrary/raw/master/image/2DDemo/KtvLabel.gif" width="400" height="300" />
</div>

#### CircularMenu
| 1.20 | 2D DEMO | 循环旋转菜单 [CircularMenu](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/2DDemo/CircularMenu)  | [返回2D DEMO](#2ddemo) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
<div align=center>
<img src="https://gitee.com/yeshaohelpme/DemoImageLibrary/raw/master/image/2DDemo/CircularMenu.gif" width="400" height="300" />
</div>

#### CircleScrollview
| 1.21 | 2D DEMO | 无限循环的翻页组件 [CircleScrollview](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/2DDemo/CircleScrollview)  | [返回2D DEMO](#2ddemo) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
<div align=center>
<img src="https://gitee.com/yeshaohelpme/DemoImageLibrary/raw/master/image/2DDemo/CircleScrollview.gif" width="400" height="300" />
</div>

#### VisualizationAlgorithm
| 1.22 | 2D DEMO | 可视化算法 [VisualizationAlgorithm](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/2DDemo/VisualizationAlgorithm)  | [返回2D DEMO](#2ddemo) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
<div align=center>
<img src="https://gitee.com/yeshaohelpme/DemoImageLibrary/raw/master/image/2DDemo/VisualizationAlgorithm.gif" width="400" height="300" />
</div>

### 3D - DEMO

#### RotateAround
| 编号 | 类别 | 项目 | 备注 |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
| 2  | 3D DEMO  [跳转链接](https://gitee.com/yeshao2069/cocos-creator-how-to-use/tree/v3.0.0/3DDemo) |   | [返回3D DEMO](#3ddemo)  |
| 2.1 | 3D DEMO | 镜头围绕人物旋转一周(旋转摄像机) [CameraRotateAround](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/3DDemo/CameraRotateAround)  |   |
<div align=center>
<img src="https://gitee.com/yeshaohelpme/DemoImageLibrary/raw/master/image/3DDemo/CameraRotateAround.gif" width="400" height="300" />
</div>

#### RotateAroundWithQuat
| 2.2 | 3D DEMO | 镜头围绕人物旋转一周2(四元数) [CameraRotateAroundWithQuat](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/3DDemo/CameraRotateAroundWithQuat)  | [返回3D DEMO](#3ddemo) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
<div align=center>
<img src="https://gitee.com/yeshaohelpme/DemoImageLibrary/raw/master/image/3DDemo/CameraRotateAroundWithQuat.gif" width="400" height="300" />
</div>

#### SelfRotateAround
| 2.3 | 3D DEMO | 镜头围绕人物旋转一周3(旋转物体) [SelfRotateAround](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/3DDemo/SelfRotateAround)  | [返回3D DEMO](#3ddemo) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
<div align=center>
<img src="https://gitee.com/yeshaohelpme/DemoImageLibrary/raw/master/image/3DDemo/SelfRotateAround.gif" width="400" height="300" />
</div>

#### CustomizePlaySkeletalAnim
| 2.4 | 3D DEMO | 自定义骨骼动画播放 [CustomizePlaySkeletalAnim](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/3DDemo/CustomizePlaySkeletalAnim)  | [返回3D DEMO](#3ddemo) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
<div align=center>
<img src="https://gitee.com/yeshaohelpme/DemoImageLibrary/raw/master/image/3DDemo/CustomizePlaySkeletalAnim_walk.gif" width="400" height="300" />
</div>

#### ModelDressup
| 2.5 | 3D DEMO | 模型换肤 [ModelDressup](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/3DDemo/ModelDressup)  | [返回3D DEMO](#3ddemo) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
<div align=center>
<img src="https://gitee.com/yeshaohelpme/DemoImageLibrary/raw/master/image/3DDemo/ModelDressup.gif" width="400" height="300" />
</div>

#### FirstPersonPerspective
| 2.6 | 3D DEMO | 第一人称视角 [FirstPersonPerspective](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/3DDemo/FirstPersonPerspective)  | [返回3D DEMO](#3ddemo) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
<div align=center>
<img src="https://gitee.com/yeshaohelpme/DemoImageLibrary/raw/master/image/3DDemo/FirstPersonPerspective.gif" width="400" height="300" />
</div>

#### Model3DText
| 2.7 | 3D DEMO | 3D名称、血条 [Model3DText](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/3DDemo/Model3DText)  | [返回3D DEMO](#3ddemo) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
<div align=center>
<img src="https://gitee.com/yeshaohelpme/DemoImageLibrary/raw/master/image/3DDemo/Model3DText.gif" width="400" height="300" />
</div>

#### FirstPersonShooting
| 2.8 | 3D DEMO | 第一人称射击 [FirstPersonShootingSimulate](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/3DDemo/FirstPersonShootingSimulate)  | [返回3D DEMO](#3ddemo) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
<div align=center>
<img src="https://gitee.com/yeshaohelpme/DemoImageLibrary/raw/master/image/3DDemo/FirstPersonShootingSimulate.gif" width="400" height="300" />
</div>

#### TouchAround
| 2.9 | 3D DEMO | 点击旋转 [TouchAround](https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/3DDemo/TouchAround)  | [返回3D DEMO](#3ddemo) |
| :----------------------- | :--------------------------------------------------------------------: |:--------------------------------------------------------------------: |:--------------------------------------------------------------------: |
<div align=center>
<img src="https://gitee.com/yeshaohelpme/DemoImageLibrary/raw/master/image/3DDemo/TouchAround.gif" width="400" height="300" />
</div>