信也虚拟互娱开发引擎——XPlay
一、背景
一个高速发展的业务，一定会去做拉新、留存、促活、转化。虚拟互动娱乐业务的社交欲、归属感、成就感等正是令人沉浸的元素，合理的将业务与互娱相结合，实现互动化，增加趣味性，可以提高产品的用户数和成交量。我们的XPlay虚拟互娱开发引擎就是为了增加业务趣味性、提高用户留存而设计和研发的，目前已在权益猫板块使用，后续将继续用于合成大西瓜等活动板块。
二、为什么使用XPaly
为了让前端工程师更低成本的开发有趣的虚拟互娱活动，我们做到了
简单易上手的开放API 支持场景编辑器 高渲染性能 动画资源类型完备 友好的用户体验 高扩展性的引擎架构 提供最佳实践方案
三、引擎架构
使用引擎开发最佳实践的ECS模式，即Entity-Component-System（实体-组件-系统）架构。互娱场景内的每一个基本单元都是一个实体，每个实体又由一个或多个组件构成，每个组件仅仅包含其特性数据，即在组件中是没有任何方法的。
ECS的设计模式在XPlay中是由GameObject/Component/System三个模块构成的。GameObject：互娱中的物体，只能用来存放Component。Component：描述物体的能力，存放数据，即每个动画中的元素都是个集合，都有自己的生命周期，自己又是一个独立的个体，维护自己的状态。System:系统实现能力，是对动画渲染的管理和收口。
四、渲染方式
底层采用PixiJS作为基础的渲染引擎，PixiJS对WebGL具有完整的支持，并且可以无缝地回退到HTML5画布来兼容低版本设备。作为一个框架，PixiJS是用于创作交互式内容的绝佳工具，适用于图形丰富的交互式网站、应用程序和HTML5互娱业务。
五、 技术解析
1.稳定性的保障
互娱场景中存在大量的动效，渲染时如果内存占用过高会引发客户端Crash，影响用户体验。一边是更炫酷的玩法来支撑业务发展，一边是避免设备较差的用户发生卡顿，那么如何让更多的用户体验到高清、流畅的互娱内容呢？
1.1 内存优化
保证不失真的情况下，合理压缩资源，平均压缩80% 在合理范围内，对大型资源进行抽帧 完善的内存管理机制，用完即放
1.2 加载优化
一般互娱场景都是在资源加载后才会创建互娱对象，互娱对象使用资源时再去解析，比如骨骼动画这种资源解析时间就比较长，在低性能手机上显示会很慢。而在浏览器中可以使用加载不影响 CPU 运行的特性来对资源加载做一系列的优化:
资源加载和解析并行 创建对象和资源加载并行 渲染和资源加载并行 使用预加载和离线包 资源按需加载 缓存资源 控制首屏资源大小
1.3 优化前后对比
我们以Android机型为例对比优化前后的首屏内存占用情况:
优化前：140M 优化后：20M
2.动画体验
采用三维建模，三维的视觉效果，材质更加真实、生动、逼真，同时增强了趣味性和诱惑力。 相对于平面化的效果，三维是一次重大的互娱体感升级。逼真细腻的互娱形象，生动的活力值气泡，有趣的猫吃猫粮行为。 为了舒适的用户体验，权益猫中一些Tip和文案都采用动画渲染，以达到动画和非动画的焕然天成。
3.代码优化
在项目中我们采用Typescript研发，提供更好的维护和检错机制 高内聚低耦合的方式，每个动画都是一个独立的对象 在业务和动画中经常出现异步的情况，封装Promise方法, 将异步统一为同步 为了实现互娱动画与业务流程的灵活交互，集成出了一套完善的事件通信机制
4.为了更一流的互娱动画
互娱是通过产品娱乐化来满足用户内在需求的，目的是打造出用户增长新模式，提高留存。动效则是娱乐化的重要表现形式之一，业务有了交互动效，趣味性增加很多。为了支撑起更多、更大的动效，后续还会继续优化。
更合理的选项，体验分级。即根据设备评分来分级展示，设计一个过滤器分别支持不同的系统版本。 支持更多的动画，列如骨骼动画。 支持更多的玩法，专属皮肤、领养不同的猫咪、大西瓜发奖品等。 交付更多的互娱娱乐内容，权益猫、合成大西瓜、种水果等。
作者介绍
YH，负责主营权益体系的前端研发，负责成长权益、权益猫的业务交付
CC，负责借款前端团队，负责大前端技术委员会