cocos-awesome-tech-solutions
cocos-awesome-tech-solutions copied to clipboard
cocos
Cocos' Awesome Technical Solutions
CococsCreator 技术方案分享
技术方案来源自论坛、github 开源仓库、gitee 开源仓库、热心开发者、Cocos 引擎开发团队、Cocos 技术支持团队。
技术支持团队提供
-
(v3.4.0) 2D 光照
工程 git 仓库地址:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_2D_Light
素材来自:
https://www.codeandweb.com/blog/2015/05/12/lighting-demo-cocos2d-x
https://github.com/CodeAndWeb/cocos2d-x-dynamic-lighting
技术支持团队提供
-
(v3.4.0) 2D 阴影
工程 git 仓库地址:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_2D_ShadowMap
素材来自:
https://github.com/mattdesl/lwjgl-basics/wiki/2D-Pixel-Perfect-Shadows
技术支持团队提供
-
(v3.4.0) spine 使用非图集纹理进行局部换装
工程 git 仓库地址:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_2D_spine_changeSlot_with_texture
素材来自:
https://blog.csdn.net/xjw532881071/article/details/107766975
Gitee用户(skyxu123 随风)提供，由技术支持团队升级至3.4.0版本并补充功能
-
(v3.4.0) 画板
工程 git 仓库地址:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_2D_DrawingBoard
素材来自:
https://gitee.com/skyxu123/drawing-board
http://www.yini.org/liuyan/rgbcolor.htm切换画板
绘画
撤销
清屏
橡皮擦
渐变色画笔(初步)
Github用户(zhangyizhang)提供，由技术支持团队升级至3.4.0版本
-
(v3.4.0) 3D 寻路
工程 git 仓库地址:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_3D_Navigation
素材来自:
https://github.com/zhangyizhang/Extensions/tree/cocos/recastjs/demo
添加障碍 (圆形障碍 & 方形障碍)
添加角色 并寻路
使用连接线 link 爬坡
需注意目前 3.4.x 版本引擎还不支持加载 obj 格式模型资源，所以需要使用第三方 DCC 工具重新导出成 fbx 方可使用。
Github用户(kirikayakazuto)提供，由技术支持团队升级至3.4.0版本
-
(v3.4.0) 图片分割
工程 git 仓库地址:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_2D_SpriteSplit
素材来自:
https://github.com/kirikayakazuto/CocosCreator_UIFrameWork/tree/SplitTexture/assets/Script/test
https://forum.cocos.org/t/topic/103699
Github用户(shachaf、baibai2013、newGy、2van、waiter)提供，由技术支持团队升级至3.4.0版本
-
(v3.4.0) Gif图片资源加载
工程 git 仓库地址:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_2D_GifResourceLoading
素材来自:
https://github.com/shachaf/jsgif
https://github.com/baibai2013/cocos-creator-gifLib
https://github.com/newGy/cocos-creator-gif-2.4.4
https://github.com/2van/cocos-creator-gif
https://github.com/waiter/Cocos-GIF
Github用户(caogtaa)提供，由技术支持团队升级至3.4.0版本
-
(v3.4.0) 2D 流体
工程 git 仓库地址:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_2D_Fluids
素材来自:
https://github.com/caogtaa/CCTricks/tree/caogtaa/20200709_metaballs
技术支持团队提供
-
(v3.4.0) 动画指定帧播放
骨骼动画
工程 git 仓库地址:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_3D_SkeletalAnimationSpecifiedFrame
素材来自:
https://www.mixamo.com/#/?page=1&type=Character
龙骨动画
工程 git 仓库地址:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_2D_DragonBonesSpecifiedFrame
Spine动画
工程 git 仓库地址:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_2D_SpineSpecifiedFrame
技术支持团队提供
-
（v3.4.0）区域截图、截图保存
工程 git 仓库地址: https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_PartialScreenshot
备注: 目前 3.0.0 ~ 3.4.0 版本还不支持 jsb.saveImageData , 引擎计划在 3.5.0 支持, 要保存 imageData 为本地 png 文件需要参考下方的 pr 定制引擎 https://gitee.com/zzf2019/engine-native/commit/1ddb6ec9627a8320cd3545d353d8861da33282a8 （此 pr 只支持保存 png ，且只支持 ios、android）
3.4.0 也还存在一个 readPixels 的 bug ，记得手动合并下 pr : https://github.com/cocos-creator/engine/pull/9900/files
网络游戏防沉迷实名认证系统 SDK 接入由 Github 用户(zihuyishi)提供，技术支持团队负责接入调试、实名认证客户端制作以及文档撰写
-
(v3.4.0) 实名认证接入
工程 git 仓库地址:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_RealNameAuthentication
素材来自:
https://github.com/zihuyishi/realname-nppa-java-demo
http://www.uustory.com/?p=2419
https://wlc.nppa.gov.cn/fcm_company/index.html#/login?redirect=%2F
技术支持团队提供
-
(v3.4.0) 列表视图扩展
工程 git 仓库地址:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_2D_ListViewExtension
备注: 因为目前在 Mac 平台的浏览器上存在帧率偏低以及帧率波动较大的问题，可以临时通过限制帧率
game.frameRate=61;的方式来处理。
技术支持团队提供
-
(v3.4.0) 3D 模型切割
工程 git 仓库地址:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_3D_MeshCutter
素材来自:
https://sketchfab.com/search?features=downloadable&licenses=322a749bcfa841b29dff1e8a1bb74b0b&licenses=b9ddc40b93e34cdca1fc152f39b9f375&licenses=72360ff1740d419791934298b8b6d270&licenses=bbfe3f7dbcdd4122b966b85b9786a989&licenses=2628dbe5140a4e9592126c8df566c0b7&licenses=34b725081a6a4184957efaec2cb84ed3&licenses=7c23a1ba438d4306920229c12afcb5f9&licenses=783b685da9bf457d81e829fa283f3567&licenses=5b54cf13b1a4422ca439696eb152070d&q=tag%3Afruit&sort_by=-likeCount&type=models
- 目前只支持切割使用了 builtin-unlit 材质的模型；
- 引擎模块需要使用基于 Bullet 的物理引擎；
- 材质设置 CullMode 为 None 能一定程度改善切割后 mesh 穿模的情况，但是性能会有所下降；
- 目前没有对旋转后的模型节点进行切割功能适配，所以需要确保模型的没有旋转；
- 目前方案的性能并不是最佳的；
- 目前方案默认在两点之间的检测精度是 1/256，在这个精度下过于细小的碎块则无法切割。可以通过增大 raycastCount 来提高精度，但是性能会有所下降；
- 不是所有模型节点切割后都不会穿模，这个和模型的原始 mesh 有关，具体啥原因还不清楚；
- 切割后的 meshCollider 碎块目前无法发生物理碰撞；
Github用户(kirikayakazuto)提供，由技术支持团队升级至3.4.0版本
-
(v3.4.0) 自定义形状遮罩
工程 git 仓库地址:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_2D_Mask_Polygon
素材来自:
https://github.com/kirikayakazuto/CocosCreator_UIFrameWork/tree/SplitTexture
技术支持团队提供
-
(3.4.1) tween 执行贝塞尔运动以及运动变速
工程 git 仓库地址:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_GameTimeScale
素材来自:
https://sketchfab.com/search?features=downloadable&licenses=322a749bcfa841b29dff1e8a1bb74b0b&licenses=b9ddc40b93e34cdca1fc152f39b9f375&licenses=72360ff1740d419791934298b8b6d270&licenses=bbfe3f7dbcdd4122b966b85b9786a989&licenses=2628dbe5140a4e9592126c8df566c0b7&licenses=34b725081a6a4184957efaec2cb84ed3&licenses=7c23a1ba438d4306920229c12afcb5f9&licenses=783b685da9bf457d81e829fa283f3567&licenses=5b54cf13b1a4422ca439696eb152070d&q=tag%3Afruit&sort_by=-likeCount&type=models
论坛用户(tuyazuo)提供，由技术支持团队升级至3.4.0版本
-
(v3.4.0) 横竖屏切换
工程 git 仓库地址:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_2D_ScreenSwitch
Demo 来自:
https://forum.cocos.org/t/topic/79780
备注: 目前 3.0.0 ~ 3.4.1 版本在 ios 平台调用原生转屏功能后，点击位置会发生偏移，需要手动合并 pr: https://github.com/cocos-creator/engine-native/pull/4265, Demo 中有附带合并 pr 后的文件。
用户 xjz1994 提供开源方案，由技术支持团队升级至 3.4.1 版本
-
(v3.4.1) 四叉树碰撞优化
工程 git 仓库地址:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.1_2D_QuadtreeCollision
Demo 来自:
四叉树方案来自：https://github.com/xjz1994/Collision
引擎团队 youyou 提供，技术支持团队升级项目
-
(v3.4.2) raphael (Graphics 拓展和 SVG 加载)
工程 git 仓库地址:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.2_Raphael
需知：目前引擎有一处 bug，会导致 svg 场景渲染异常。详细问题描述可以看一下 issues，解决问题的办法是参考下图中红色代码定制一下引擎：
技术支持团队提供
-
(v3.4.2) 模型动画残影效果（待定方案）
工程 git 仓库地址:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.2_3D_Model_Residual%20Shadows
效果展示：
web 和 小游戏性能还可以，但是在原生平台上性能不好。
技术支持团队提供
- (v3.4.0) 3D 桌球联网同步
工程仓库地址： https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.2_3D_NetworkBilliards
素材来自：
https://sketchfab.com/search?features=downloadable&licenses=322a749bcfa841b29dff1e8a1bb74b0b&licenses=b9ddc40b93e34cdca1fc152f39b9f375&licenses=72360ff1740d419791934298b8b6d270&licenses=bbfe3f7dbcdd4122b966b85b9786a989&licenses=2628dbe5140a4e9592126c8df566c0b7&licenses=34b725081a6a4184957efaec2cb84ed3&licenses=7c23a1ba438d4306920229c12afcb5f9&licenses=783b685da9bf457d81e829fa283f3567&licenses=5b54cf13b1a4422ca439696eb152070d&q=Billiards&sort_by=-likeCount&type=models
客户端：CocosCreator 3.4.2、服务端：Node.js、联网方式：WebSocket、服务器启动方式：项目文件夹下中执行命令行 cd AppServer，之后执行 node AppServer.js，看到输出 “Listen 8002” 即表示服务器启动正常。
客户端启动方式：使用 Dashboard 导入本文件夹的工程，并测试。
目前已验证通过在 web、android、ios 等三个平台的同步效果是正常的，其余平台暂无验证。
此处提供一段 web 预览和编辑器模拟器预览时的同步测试录屏：
查看更多请点击链接观看：http://download.cocos.org/CocosTest/zhefengzhang/NoDelete/NetworkBilliards.mp4
技术支持团队提供
-
(v3.4.2) 检测模型是否具有第二套 UV 的插件
工程 git 仓库地址:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.2_LightmapUV
背景:
生成光照贴图，模型除了本身的 UV，还需要另外包含一套 UV，详情参考：https://docs.cocos.com/creator/manual/zh/concepts/scene/light/lightmap.html 。所以如何快速判断模型是否具有第二套 UV 是关键的一个步骤。
使用说明:
- 在拓展中添加check2uv
- 刷新拓展，可以在控制台看到检测的结果
技术支持团队提供
-
(v3.4.2) 音视频倍数播放
工程 git 仓库地址:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.2_MediaPlaybackRate
素材来自:
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/playbackRate https://developer.android.google.cn/reference/android/media/MediaPlayer#setPlaybackParams(android.media.PlaybackParams) https://developer.apple.com/documentation/avfoundation/avplayer/1388846-rate
需知：需要自定义引擎。且原生(iOS、Android)和 web 对于音频倍数和视频倍数播放的支持各不相同，所以实际的播放需要以平台以及设备为主。
技术支持团队提供
- (v3.4.2) 声网视频流渲染 SDK 接入
工程 git 仓库地址: https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.2_AgoraMediaPlayer
效果演示
打开链接可查看测试视频：https://download.cocos.org/CocosTest/muxiandong/NoDelete/agoraMediaPlayer_20220528.mp4
需知：
-
目前对接了 android 端。iOS 端 SDK 后续考虑接入。
-
如果需要切换视频源，需要在 native/engine/common/Classes/MediaPlayer.cpp 的 MediaPlayer::open 接口，修改视频源，即可。
-
Github用户(kirikayakazuto)提供，由技术支持团队升级至3.5.0版本
-
(v3.5.0) TiledMap 自动寻路
工程 git 仓库地址:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.5.0_2D_TileMap_PathFinding
素材来源:
https://github.com/kirikayakazuto/Cocos_RPG#cocos-creator--tilemap-%E8%87%AA%E5%8A%A8%E5%AF%BB%E8%B7%AF
论坛用户 @jogi 提供，由技术支持团队升级至3.4.2 版本
-
(v3.4.2) Spine 骨骼控制
工程 git 仓库地址:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.2_2D_SpineDragController
原帖地址：https://forum.cocos.org/t/topic/126989
效果演示
Unity assetstore 用户 Mario Haberle 提供，由技术支持团队升级将游戏移植至 3.4.1 版本
-
(v3.4.1) FPS 单机射击模拟
工程 git 仓库地址:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.1_3D_FPS_FirstPerson
游戏操作键位：W=前进、A=左移、S=后退、D=右移、shift + W=加速跑、C=下蹲、鼠标左键=射击、鼠标右键=瞄准、空格=跳跃、Q=肘击、R=换弹夹、鼠标滑轮=切枪
素材来自：https://assetstore.unity.com/packages/3d/characters/humanoids/sci-fi/easy-fps-73776
效果演示
详细测试视频：https://download.cocos.org/CocosTest/zhefengzhang/NoDelete/20220612_181524.mp4
cocos