优酷游戏化互动-街舞云蹦迪

1. 优酷游戏化互动-街舞云蹦迪王志月（凡与）阿里巴巴无线技术专家

2. 目录 01 背景-游戏化互动与街舞 02 优酷App游戏化互动基建-How to do 03 游戏化落地-街舞云蹦迪-问题与解法

3.

4. 背景-App中的游戏化互动多多果园腾讯虚拟音乐音乐嘉年华游戏化互动拼多多京东捉猫头号剧场天猫支小镇支付宝抓取用户注意力用户达成某种行为手淘蚂蚁森林东东农场芭芭农场创造更大的价值

5. 背景-街舞与游戏化互动街舞文化 2018~2022 街舞活动圈子城市全国世界宇宙 Weex活播放页游戏化街舞AI 元宇宙动点赞打Call 合拍游戏预热期 • 战队专属卡通形象、礼盒、道具街舞元宇宙舞房，热播期 • 战队Party、弹幕互动、全场特效、个人特效长线玩法 • 抽盲盒、元宇宙虚拟形象、nft数字藏品

6. 街舞游戏化互动-效果视频训练厅-街舞之城蹦迪厅-街舞云派对蹦迪厅-电音超感CLUB

7. 优酷App游戏化互动基建 How to do? 游戏 App

8. 优酷App游戏化互动-应用场景分发场景⻣骼动画、粒子特效烘托节日气氛，提升app的格调点播消费场景互动广告、AI小游戏、弹幕氛围，提供好看又好玩的观影体验直播消费场景酷炫的付费道具，结合物理引擎的互动打赏效果 How to do ? 技术选型路线规划技术攻坚

9. 游戏化互动技术选型-游戏引擎特效效开发成果本动态性 CPU内存开放性技术栈运营成包体积本引擎 2D 3D 工具&生态动态性内存&CPU 开放性&定制成本 XR 开发语言 Cocos 强中可跨端开发工具易用编辑器免费动态性良好支持运行时热更新单个简单游戏内存105MB CPU 24% 引擎代码开源，支持定制弱 JS/CPP Unity3D 强强可跨端工具易用开发生态繁荣引入三方工具可支持热更新单个简单游戏内存125MB CPU30% 引擎代码部分开源，定制难强 C#/Lua

10. 游戏化互动路线规划预研阶段技术选型 • Cocos VS Unity VS Egret • 三种接入模式 • 工具链游戏Demo • • • 单点验证技术攻坚单实例模式多实例模式渲染容器（全屏、 • 独占式多实例半屏透明） • 并行多实例窗口层级（顶层、 • 游戏框架底层、混合） • 发布工具热更新及工具链首页-春节候三迷播放页-街舞打Call 产品化多场景应用 • 投放系统 • 模板化 • Playground • Demo库 • 最佳实践 • 全家桶

11. 游戏化互动技术攻坚-并行多实例启动App 启动App 页面播放器/浮层组件全屏游戏实例小屏游戏实例组件游戏实例游戏APP 游戏实例热更新场景1 场景2 全屏游戏容器游戏引擎实例 V8引擎实例优酷Inside 场景3 场景1 场景2 场景3 全屏游戏容器自适应游戏容器嵌入式游戏容器游戏引擎实例游戏引擎实例游戏引擎实例 V8引擎实例 V8引擎实例 V8引擎实例回收复用回收复用多实例管理器退出App 热更新热更新游戏结束退出App 回收复用

12. 游戏化互动技术攻坚–多实例沙盒模型游戏1 内存隔离文件访问隔离 JS VM 1 O1 O2 O1 JS VM 2 …/游戏资源目录/GameBundel1 …/游戏数据目录/GameBundel2 O2 资源文件a 资源文件b 资源文件c …/游戏资源目录/GameBundel2 …/游戏数据目录/GameBundel1 游戏2 资源文件d 数据文件a 数据文件b 数据文件c 数据文件d

13. 游戏化互动落地-线上案例消费-商业化奇妙连击分发-圣诞氛围消费-弹幕氛围化 AI艺能挑战

14. 街舞游戏化落地问题与解法

15. 云蹦迪游戏化关键问题场景场景组装性能优化 01 渲染 02 03 Weex与游戏游戏画面与视频画面融合渲染消息系统帧同步避免穿人

16. 街舞游戏化场景搭建技术-场景模块组装游戏背景视频播放器路地贴底Bar

17. 街舞游戏化场景搭建技术-性能事项优化方法收益地图瓦块图地图浏览平滑、无卡顿游戏包体积优化远程游戏 Bundle 技术模块裁剪游戏包体积 6.7MB->2.4MB 视角移动多相机技术一个相机用来捕捉地图画面一个相机用来捕捉固定的UI 画面减少移动地图性能损耗 • 45人偶+实时互动+随机特效+随机弹幕+随机移动，内存 300M （上限） • 20 个人偶，内存 137MB （中位数）

18. 街舞游戏化渲染技术-Weex与游戏快速迭代基础设施动态能力云蹦迪电音半屏功能区加载/事件通讯游戏降级弹窗弹起/回调 cc-game component 活动页面配置组件复用弹窗、浮层（活动页组件）活动主场景（游戏容器）街舞之城页面搭建热区列表 Weex 游戏组件状态管理数据统计浮层

19. 街舞游戏化渲染技术-挖洞的难点云派对游戏背景画面中有一面电视墙，需要满足如下特点： • 可播放街舞节目相关视频 • 画面移动时，电视墙与游戏画面保持同步移动 • 电视墙不能遮挡游戏画面

20. 街舞游戏化渲染技术-挖洞技术实现挖洞组件：图形挖洞 Shader（透明化）视频组件：计算视频区域边界

21. 街舞游戏化消息系统-帧同步技术选型互动玩法坐标贴贴皮肤 DJ 状态更新个人信息交互请求 RPC通信网关 … 常驻明星游戏状态帧数据游戏干预指令状态汇总推送状态数据直播 Server 直播 Client RPC 通信SDK 队伍消息通道交互请求全局消息通道游戏状态帧数据玩家交互更新游戏状态游戏指令方案选择 • SOCKET • 集团长链通道 • 优酷直播通道

22. 街舞游戏化消息系统-帧同步如何避免穿人用户云派对游戏移动到(x,y) loop 街舞游戏互动服务计算到终点(x,y)的路径 [未达到终点(x，y)] 从路径中选择下一步节点(x’, y’) 移动端(x’, y’) 检查(x’, y’) 是否可达帧同步用户位置(x’, y’) 移动虚拟人偶到(x’, y’) 用户云派对游戏街舞游戏互动服务人偶移动 • A* 路径规划算法 • 避免穿人的规则 • 移动速度与帧同步频率解耦

23. 游戏化思考 Q&A

24. 感谢大家观看