15个 Cocos Creator 技术解决方案免费开源!更多资源持续更新中…
期望的游戏效果不知该如何实现?被繁琐的操作劝退?想要提升开发效率?应广大开发者的需求,Cocos 技术支持团队将持续为大家整理提供一些实用的技术解决方案,通通免费开源!
这些方案部分来自 Cocos 引擎开发团队、技术支持团队,更多的则是源于社区开发者、GitHub、Gitee 用户的创作,感谢大家的支持与分享!官方技术支持团队将持续整合优化,并随着 Cocos Creator 更新迭代,确保方案在新版引擎中可运行。
本文为大家盘点了近期的15个优质技术方案,每个方案的详细介绍和使用说明请至相应的代码仓库查看。
动画指定帧播放
骨骼动画
龙骨动画
Spine 动画
基于 v3.4 实现的骨骼/龙骨/Spine 动画指定帧播放工程,由技术支持团队提供。
工程仓库:
骨骼动画丨https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_3D_SkeletalAnimationSpecifiedFrame
龙骨动画丨https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_2D_DragonBonesSpecifiedFrame
Spine 动画丨https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_2D_SpineSpecifiedFrame
四叉树碰撞优化
四叉树碰撞检测优化由 GitHub 用户「xjz1994」提供开源方案,技术支持团队升级至 v3.4.1。
工程仓库:
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
3D 模型切割
此方案受 GitHub 上的开源方案「mesh-cutter」所启发,技术支持团队使用 TypeScript 在 v3.4.0 上实现了相似功能。使用注意事项详见仓库,团队将持续更新优化、增加更多功能。
工程仓库:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_3D_MeshCutter
素材来自:
https://sketchfab.com/
自定义形状遮罩
在 v3.4 中实现自定义形状遮罩,由 GitHub 用户「kirikayakazuto」提供、技术支持团队升级。
工程仓库:
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
Tween 贝塞尔运动和运动变速
由技术支持团队带来的 Tween 执行贝塞尔运动以及运动变速工程,支持 v3.4.1。
工程仓库:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_GameTimeScale
素材来自:
https://sketchfab.com/
3D 植被卡通渲染与植被交互
塞尔达风格的 3D 植被卡通渲染工程,由引擎开发团队提供、技术支持团队升级至 v3.3.1(点击查看教程详解)。
工程仓库:
https://github.com/cocos/cocos-example-cartoon-vegetation
素材来自:
https://gitee.com/mirrors_cocos-creator/cartoon-vegetation
原生App内主动切换横竖屏
支持全平台的屏幕旋转实现方案,由社区开发者「tuyazuo」提供、技术支持团队升级至 v3.4.0。需要注意的是 v3.0.0-v3.4.1 在 iOS 调用原生转屏功能后,点击位置会发生偏移,需要手动合并,Demo 中有附带合并 pr 后的文件。
工程仓库:
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
区域截图、截图保存
由技术支持团队提供的区域截图、截图保存方案,基于 v3.4 创建。目前引擎还不支持 jsb.saveImageData,计划在 v3.5 提供支持 。
工程仓库:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/3.4.0-release/demo/Creator3.4.0_PartialScreenshot
画板
基于 v3.3.2 的画板方案工程,目前已实现绘画、橡皮擦、清屏、回退、画布替换、截图并保存截图(Web)、渐变色画笔等功能。由 Gitee 用户「skyxu123 随风」提供、技术支持团队补充功能。
工程仓库:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/main/demo/Creator3.3.2_2D_DrawingBoard
素材来自:
https://gitee.com/skyxu123/drawing-board
http://www.yini.org/liuyan/rgbcolor.htm
图片分割
简单易用的图片分割工程,支持 Web、iOS、Android、Windows、微信小游戏等平台。由 Github 用户「kirikayakazuto」提供、技术支持团队升级至 v3.3.2。
工程仓库:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/main/demo/Creator3.3.2_2D_SpriteSplit
素材来自:
https://github.com/kirikayakazuto/CocosCreator_UIFrameWork/tree/SplitTexture/assets/Script/test
https://forum.cocos.org/t/topic/103699
Gif 图片资源加载
基于 v3.3.2 创建的 Gif 图片资源加载工程,支持多平台。由 Github 用户「shachaf、baibai2013、newGy、2van、waiter」提供、技术支持团队升级。
工程仓库:
https://github.com/cocos-creator/CococsCreator-public-technology-solutions/tree/main/demo/Creator3.3.2_2D_Light
素材来自:
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
防沉迷实名认证接入
基于 v3.4 创建的实名认证测试工程,接入了实名认证、实名认证查询、数据上报等功能。Github 用户「zihuyishi」提供了 SDK,技术支持团队进行了接入调试、实名认证客户端制作以及文档撰写。
工程仓库:
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
2D 光照
基于 v3.3.2 创建的 2D 动态光照 Demo,由技术支持团队提供(点击查看教程详解)。
工程仓库:
https://github.com/cocos-creator/CococsCreator-public-technology-solutions/tree/main/demo/Creator3.3.2_2D_Light
素材来自:
https://www.codeandweb.com/blog/2015/05/12/lighting-demo-cocos2d-x
https://github.com/CodeAndWeb/cocos2d-x-dynamic-lighting
2D 阴影
在 v3.3.2 中实了现基于 2D 点光源的动态阴影,且对不透明像素做了阴影处理、光源和阴影的边缘做了柔和处理,由技术支持团队提供(点击查看教程详解)。
工程仓库:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/main/demo/Creator3.3.2_2D_ShadowMap
素材来自:
https://github.com/mattdesl/lwjgl-basics/wiki/2D-Pixel-Perfect-Shadows
2D 流体
动态 2D 流体解决方案,由 Github 用户「caogtaa」提供、技术支持团队升级至 v3.3.2(点击查看教程详解)。
工程仓库:
https://github.com/cocos/cocos-awesome-tech-solutions/tree/main/demo/Creator3.3.2_2D_Fluids
素材来自:
https://github.com/caogtaa/CCTricks/tree/caogtaa/20200709_metaballs
点击文末【阅读原文】至 Cocos 论坛专贴查看更多技术解决方案,如果你有什么建议或疑问,都可以在帖子里留言。
再次感谢和我们分享技术方案的开发者!如果你也有技术干货、尝试过某些效果实现、或是有想要和我们分享的东西,不妨来参加「社区第4期征稿活动」,尽情地展示自己吧(PS. 还有丰厚大礼哦)!
点击参与社区征稿
福利时间
转发/分享本篇文章,并在本文评论区告诉我们「你最想了解哪类技术解决方案」,说不定就会被写进技术支持团队的 list 里