闲鱼Flutter互动引擎系列——整体设计篇

什么是Candy引擎

Candy引擎是闲鱼技术团队设计开发的一款:

  • APP嵌入式的、轻量级的、易于开发、性能稳定的互动引擎;
  • 绘制系统高度融合Flutter体系,游戏场景和Flutter UI支持无缝混排;
  • 动画系统对主流格式的支持友好且易扩展。

本文讲解我们为什么要做这款引擎以及我们是如何设计这款引擎的。

缘起

最近APP游戏化成为了一个新的风口,把在游戏中一些好玩的、能吸引用户的娱乐方式或场景应用在应用当中,以达到增加用户粘性,提升DAU的效果,成本较低。同时在一些需要对用户有引导性的场景,游戏化还可以使用户更易于接受并完成引导性任务,并通过激励的形式鼓励用户持续沉浸在任务当中,形成良性循环。

目前APP内嵌小游戏一般采用H5小游戏的方式,而这个方式存在一些隐患,并不被很多应用商店推荐。因此我们需要寻找一种新的安全的方式来实现APP内嵌小游戏,并且我们希望这个方式开发友好、性能稳定、功能齐全;所以我们遵循这三点去寻找一种新的方式。

思考

我们主要通过下面三种思路来探讨APP内嵌小游戏:

  • 采用Native的游戏能力

目前Native开发游戏生态并不是特别成熟,而且采用Native开发,就必须面临双端两套代码的问题,开发成本和后续维护成本都会比较高。

  • 采用游戏引擎,比如Cocos-2dx、Unity等

虽然游戏引擎目前非常成熟,但是游戏引擎一般用于开发重度游戏,所以引擎大小一般比较大,引入游戏引擎会导致包大小增幅不小。而且游戏引擎比较复杂,所以引擎启动耗时较多,比较难做到游戏页面秒开;游戏引擎加载进来后内存消耗都会比较大。游戏引擎和APP间的通信互动相对较为麻烦,目前没有比较好的混合栈支持。游戏引擎的UI能力较弱,无法胜任复杂的APP UI逻辑,若采用游戏引擎开发内嵌小游戏,无法融合小游戏页面内游戏场景和Feeds等UI。

  • 采用Flutter的轻量级互动引擎

Flutter本身是基于Skia这个2D绘制引擎实现的跨端APP解决方案,所以它天然具备2D绘制能力,所以采用Flutter来实现App内嵌小游戏存在可能。目前Flutter存在一些轻量级游戏引擎,比如Flame,这款引擎支持简单游戏逻辑和动画能力,同时整个游戏是以一个Widget的形式最终插入到APP中,可以让小游戏页面中游戏部分和UI部分完美融合。

综上考虑,我们决定采用Flutter的轻量级互动引擎。

Flame?还是自主设计?

Flame引擎目前是Flutter生态中比较不错的一款小游戏引擎,但是依然存在很多问题:

  • 游戏系统不完善:引擎只有Game和Componet,没有Scene和GameObject概念,这样会导致游戏对象嵌套复杂,对多场景不友好。
  • 引擎完全采用Canvas来实现,游戏场景中无法实现局部刷新,存在性能隐患。
  • 缺少GUI系统,场景内嵌套UI比较难。
  • 缺少手势事件系统。
  • 动画支持格式不主流:骨骼动画是通过Flare支持的,不支持DragonBones。粒子动画最近才上,对主流格式支持也不太友好。
  • 资源管理存在内存问题,资源加载后一直不会释放。
  • 缺少机型适配能力。

基于这些考虑,我们决定重新设计一款Flutter互动引擎:

  • 对标集团的EVA引擎和业界的Unity引擎,完善游戏系统。
  • 复用Flutter局部刷新。
  • 复用Flutter UI作为GUI。
  • 复用Flutter手势管理。
  • 实现支持主流格式的骨骼动画和粒子动画。
  • 复用APP资源库(图片库)。
  • 实现全局750适配。

其中2-4点本质上是将互动引擎的绘制系统融合入Flutter的绘制体系中,本文下面按解决上面问题的思路依次介绍我们的引擎设计。

Candy引擎设计

框架设计

首先分析游戏化业务需要哪些能力,分析我们的业务场景,得出游戏化业务需要图4-1所示的能力:

图4-1 游戏化业务能力需求

拆解后,互动引擎需要有游戏系统、绘制系统、生命周期系统、GUI系统、物理系统、动画系统、资源系统、事件系统(手势管理)。

根据我们之前的定位,互动游戏绘制融合到Flutter绘制体系中来,基于这个思路,我们可以复用Flutter的UI系统,同时需要融合Flutter和游戏的手势管理。最终我们得出如图4-2所示的框架图:

图4-2 互动引擎架构

整个互动引擎架构共分为四部分:

  • 接口层

对外暴露的游戏接口,主要包含创建游戏、创建游戏对象、添加游戏组件等接口,同时还封装了一些常用游戏对象、常用游戏组件的工厂接口。

  • 游戏系统

游戏世界的管理系统,主要管理Game、Scene、GameObject和Compoent间的组织关系,还控制游戏子系统和绘制系统的启动与关闭。

  • 游戏子系统

游戏化能力补充,主要包含生命周期系统、物理系统、动画系统和资源系统,被游戏系统调用。

  • 绘制系统

负责游戏的绘制,本引擎的绘制系统会高度和Flutter绘制逻辑融合,所以兼容了GUI系统和事件系统(手势管理)。

游戏系统

对标Unity设计,游戏系统有下列四大元素:

  • Game:游戏类,负责整个游戏的管理,Scene的加载管理以及各子系统管理与调度。
  • Scene:游戏场景类,负责游戏场景中各游戏对象的管理。
  • GameObject:游戏对象类,游戏世界中游戏对象的最小单位,游戏世界中的任何物体都是GameObject。
  • Component:游戏组件类,表示游戏对象的能力属性,比如SpriteComponent表示精灵组件,表示绘制精灵的能力。

GameObject通过组合Component的形式来让自己拥有各种能力,不同的组合让GameObject相互之间不一样。整个游戏系统的组织关系如图4-3所示:

图4-3 游戏组织形式

生命周期

对标Unity和Flutter特性,我们设计了如表4-1所示的生命周期,共有八个回调,基本可以满足互动游戏业务开发。

表4-1 生命周期

渲染系统

基于融合Flutter绘制体系思考,我们就不能全盘用Canvas来做整个游戏的绘制管理,我们需要将游戏对象和Flutter的绘制对象RenderObject结合起来,如图4-4所示:

图4-4 渲染映射

首先是Game的对象数和Flutter的三颗树有效融合,所以每一个GameObject必须对应一个Widget、Element和RenderObject。

融合过程主要需要解决以下问题:

  • 游戏的坐标系与Flutter的布局转换融合。
  • 动态添加和删除游戏对象的处理。
  • 动态修改游戏绘制深度的处理。
  • Flutter Inspector对游戏对象的支持。

整个绘制融合相对复杂,需要解决很多BadCase,后续会另撰文详述互动引擎绘制融合Flutter绘制体系的过程,本文不再赘述。

GUI系统

由于绘制已经融合到Flutter体系,GameObject都会对应Widget,所以我们可以设计一个特殊的GameObject,支持插入一段Flutter Widget树,这样我们就不需要另外实现GUI了,复用Flutter UI作为GUI即可。这个逻辑和绘制融合思路比较一致,将插入的Widget树作为GUIWidget的孩子即可,在GUIRenderObject中打通layout、paint和hitTest逻辑即可。

这里给一段我们GUI的示例实例代码,开发过程相对简单:

finalGUIObject gui = IdleFishGame.createGUI(
'gui',
child: GestureDetector(
child: Container(
width: 100.0,
height: 60.0,
decoration: BoxDecoration(
color: constColor(0xFFA9CCE3),
borderRadius: constBorderRadius.all(
Radius.circular(10.0),
),
),
child: constCenter(
child: Text(
'Flutter UI示例',
style: TextStyle(
fontSize: 14.0,
),
),
),
),
behavior: HitTestBehavior.opaque,
onTap: () {
print('UI被点击了');
},
),
position: Position(100, 100),
);
game.scene.addChild(gui);

事件系统

在绘制融合到Flutter体系的基础上,我们融合了事件系统,增加了手势处理组件GestureBoxComponent,如图4-5所示:

图4-5 手势竞技

整个融合过程分下列几步:

  1. GestureBoxComponent将开发者注册手势回调方法注册到手势识别器中。
  2. GameObject对应的RenderObject复写hitTest逻辑,按Flutter规范来处理点击的hitTest。通过GestureBoxComponent来判断点击是否该被消费。
  3. GameObject复写handEvent来将点击事件传递给GestureBoxComponent消费。
  4. GestureBoxComponent收到点击事件后,传递给手势识别器处理。
  5. 手势识别器在将点击传给手势竞技场开始手势竞技,最终将胜出的手势返回手势识别器,最终返回并做出手势事件响应,当然这一步属于Flutter逻辑了。

动画系统

我们目前动画主要支持骨骼动画和粒子动画,骨骼动画资源目前支持DragonBones,粒子动画资源目前支持EgretFeather。本文篇幅有限,动画的具体实现我们后续撰文专门讲述。

资源系统

目前互动引擎的资源系统相对简单,本文就简单介绍下。资源系统的设计思路是复用APP的资源系统,确保整个APP只有一份资源库,减少内存开销和增大资源复用率。资源系统架构如图4-6所示,在游戏系统和资源系统中间增加了一层代理,兼容APP资源系统和兜底资源系统。若我们没有注册APP的资源系统,系统会自动调用兜底的资源系统。

兜底资源系统目前分两部分:

兜底图片库,复用Flutter的ImageCache,复用Flutter的能力做内存管理。

动画JSON资源管理,目前只实现了JSON读取逻辑,由于JSON复用性不高,所以目前并没有实现缓存管理。

图4-6 资源系统

目前资源系统没有做远程加载和预加载的能力,这部分在我们的后续规划中,后续我们再撰文分享具体设计实现。

说在最后

本次主要从全局上分析介绍了我们正在做的Flutter互动引擎设计,后续我们会通过《闲鱼Flutter互动引擎系列》的系列文章分别来详述一些具体系统的设计,如渲染系统设计、动画系统等。

本文主要讲述了Candy互动引擎的设计,而我们在设计实现过程中遇到了很多问题,如发现了Flutter在绘制过程中存在一定的内存泄露,内存回收不及时等,我们后续会撰文详述这些问题的排查与解决,同时还会对Candy引擎的性能与稳定性方面做详细测试分析,敬请关注。

Image placeholder
IT头条
未设置
  85人点赞

没有讨论,发表一下自己的看法吧

推荐文章
Stylus系列——webpack-spritesmith配合stylus使用示例

一、前言基于Webpack的CSSSprites实现方案,若是直接在html中调用雪碧图图标已经很方便,但是实际开发过程可能遇到需要在伪元素中使用雪碧图,或者需要hover切换另一个图标,这种情况下就

基于JS的高性能Flutter动态化框架MXFlutter

导语:18年10月份,手机QQ看点团队尝试使用Flutter,做为iOS开发,一接触到Flutter就马上感受到,Flutter虽然强大,但不能像RN一样动态化是阻碍我们使用她的唯一障碍了。看Goog

Flutter高内聚组件怎么做?闲鱼打造开源高效方案!

fish_redux是闲鱼技术团队打造的开源flutter应用开发框架,旨在解决页面内组件间的高内聚、低耦合问题。开源地址:https://github.com/alibaba/fish-redux从

走近科学,探究阿里闲鱼团队通过数据提升Flutter体验的真相

背景闲鱼客户端的Flutter页面已经服务上亿级用户,因此用户体验尤其重要,完善Flutter性能稳定性监控体系,以便及早发现线上性能问题,也可以作为用户体验提升的衡量标准。那么Flutter的性能到

Flutter路由项目实战之fluro

github:https://github.com/zhengzhuan...关于flutter路由,在小项目中,就按照原生写法,但是在大型项目中,这样的我就不会进行推荐,我这里使用的fluro路由管

揭秘!一个高准确率的Flutter埋点框架如何设计

背景用户行为埋点是用来记录用户在操作时的一系列行为,也是业务做判断的核心数据依据,如果缺失或者不准确将会给业务带来不可恢复的损失。闲鱼将业务代码从Native迁移到Flutter上过程中,发现原先Na

重磅|庖丁解牛之——Flutter for Web

Flutterfor Web在2018年冬的Flutter1.0伦敦发布会上,Flutter产品经理TimSneath通过一个滑动拼图的例子介绍了如何让Flutter运行在Web之上。这一当时代号Hu

揭秘!闲鱼拉新投放系统如何设计

背景闲鱼目前已经是国内最大的闲置物品交易平台。随着闲鱼体量的增长和用户规模不断扩大,闲鱼App上的一个普通banner抑或是feeds中的一张普通的卡片,每天都可能被数以千万计的人看到。为了更好地服务

Nebula 架构剖析系列(二)图数据库的查询引擎设计

摘要上文(存储篇)说到数据库重要的两部分为存储和计算,本篇内容为你解读图数据库Nebula在查询引擎QueryEngine方面的设计实践。在Nebula中,QueryEngine是用来处理Nebula

腾讯云游戏行业整体解决方案

点击观看大咖分享随着游戏行业的迅猛发展,游戏行业竞争日益加剧,好的用户体验度和快速反应能力成为游戏网站发展的关键。游戏行业整体解决方案将能够为游戏厂商提供优质全面便捷的服务。腾讯云结合自身在云计算业务

跨平台开发的救星-让我们来了解一下flutter

第一次看文章的朋友可以关注我,会不定期发布Android面试内容、进阶专题等等。简介很多人已经用上了flutter,今天就来介绍一下Flutter架构Flutter框架分三层 Framework,En

Flutter环境搭建记录

1.下载安装包之后执行flutterdoctor报错:zsh:commandnotfound:flutter下载的是源码,去这里下载SDK 2.执行flutterdoctor,按照提示升级xcode、

看!闲鱼在ServiceMesh的探索和实践

背景在阿里服务端开发以Java为主的大背景下,其他异构语言业务如何调用现有Java服务,如何与集团中间件打通,就成为使用非Java语言团队必须要解决的首要问题。现状在ServiceMesh方案成熟之前

一个多业务、多状态、多操作的交易链路?闲鱼架构这样演进

前言双十一刚刚结束,成交额2684亿震惊全世界,每秒订单峰值达54.4W笔。在闲鱼2000万DAU,交易数额同样增长迅速的今天,我们如何保障交易链路的稳定与快速支撑业务?这篇文章从客户端开发的角度,介

与聊天机器人相比,87%的消费者更喜欢与人类进行互动

最近对人工智能进展的调查、研究、预测和其他定量评估发现:·企业领导者表示,聊天机器人平均增加了67%的销售额·超过60%的美国人认为政府和企业每天收集他们的数据·到2020年,全球只有14%的大型组织

闲鱼如何高效承接并处理用户纠纷

背景闲鱼是一个基于C2C场景的闲置交易平台,每个用户既是买家也是卖家,在自由享受交易乐趣的同时也容易带来一些问题,如发一些侵权违规商品而不自知,发一些带情绪化言语对他人造成了伤害等,因此这也带来了一个

TPC-C解析系列04_TPC-C基准测试之数据库事务引擎的挑战

OceanBase这次TPC-C测试与榜单上Oracle和DB2等其他数据库在硬件使用上有非常大的不同,OceanBase的数据库服务器使用的是204+3台型号是ecs.i2.16xlarge阿里云E

Spring WebFlux 的设计及工作原理剖析

前言 Spring5发布有两年了,随Spring5一起发布了一个和SpringWebMvc同级的SpringWebFlux。这是一个支持反应式编程模型的新框架体系。反应式模型区别于传统的MVC最大的不

日志监控实践 – 监控Agent集成Lua引擎实现多维度日志采集

作者简介:董涵   百度资深研发工程师负责百度智能运维(Noah)服务管理和分布式监控架构研发工作,在分布式系统和大规模数据处理、可用性工程方向有广泛的实践经验。干货概览对于互联网行业来说,最有价值的

SQL Server 2014的数据库引擎新增功能(参考sqlserver官方文档)

SQLServer2014数据库引擎引入了一些新功能和增强功能,这些功能可以提高设计、开发和维护数据存储系统的架构师、开发人员和管理员的能力和工作效率。  以下是 数据库引擎已增强的方面。数据库引擎功

Hyperf 发布 Session、极简 DB、zk 配置中心组件和支持 Twig/Plates 视图引擎支持

更新内容 本周更新主要新增极简DB组件,Zookeeper配置中心,和Session组件,以及为视图组件增加了Twig和Plates视图引擎的支持,同时为计划任务组件增加了集群执行的支持。极简DB组件

为什么RedisCluster会设计成16384个槽呢?

RedisCluster是Redis的集群实现,内置数据自动分片机制,集群内部将所有的key映射到16384个Slot中,集群中的每个RedisInstance负责其中的一部分的Slot的读写。集群客

个人学习系列 - httpd的简单应用

想学习一下前端的代码,自然而然就希望能部署并观察一下自己写的烂代码了。所以,就研究一下httpd这个工具了。httpd的使用docker中的httpd的获取查询httpd的镜像并下载 查询httpd

InfluxDB 管理工具

配置 vim/etc/influxdb/influxdb.conf[admin] Determineswhethertheadminserviceisenabled. enabled=true The

influxDB集群模式实践

influxDB数据库以其优秀的时序数据存储和查询能力,在处理和分析类似资源监控等时序数据方面得到了广泛的应用。而influxDB自带的各种特殊函数如求平均值、标准差、随机取数据,使数据分析变得十分方