为喵扎特IP品牌开发的微信小游戏"元宇宙"产品,融合收集、互动、社交等玩法,服务于品牌宣传和用户运营。
核心功能模块:
1. 百猫图收集系统:253个角色的收集玩法,包含图鉴解锁、任务系统、积分排行等
2. 社团系统:用户加入社团,社团积分排行,邀请好友绑定关系
3. 互动画板:像素风格涂色画板,支持作品保存上传
4. AR识别场景:Spine动画与AR结合的互动体验
5. 反诈宣传模块:情景剧式的反诈知识科普互动
6. 多场景地图:521展馆、万事屋、科普馆、邮局等多个互动场景
业务流程:用户微信授权登录 → 选择/加入社团 → 进入主地图 → 探索各功能场景 → 完成任务获取积分 → 解锁角色收集图鉴 → 参与排行榜竞争
技术架构:
基于 Cocos Creator 3.8 + TypeScript 开发,采用单例模式管理全局状态,设计统一的场景加载过渡机制,实现微信小游戏与Web双端兼容。
我负责的模块及成果:
- 整体前端架构设计与全部代码实现(约100+个TypeScript控制器)
- 场景管理系统:设计 init → transition → target 的三层场景加载流程,实现带进度条的平滑过渡
- 平台适配层:封装 HTTP 请求模块,自动适配 fetch API 和 wx.request,一套代码双端运行
- 内存管理:实现场景自动释放、资源手动释放机制,解决小程序内存限制问题
- 横竖屏切换:部分场景需横屏展示,实现运行时动态切换屏幕方向
- 友盟统计集成:自定义构建模板,埋点追踪用户行为
遇到的难点与解决方案:
1. 小程序包体限制:将资源拆分为远程Bundle动态加载,主包控制在2MB内
2. 内存溢出:大量Spine动画导致内存飙升,通过可视区域判断动态加载/卸载解决
3. 场景切换卡顿:采用预加载+过渡场景方案,用户体验流畅