高手问答第 264 期 —— 聊聊前端互动游戏引擎 Eva.js

白开水不加糖 发布于 07/26 10:03
阅读 6K+
收藏 37

阿里巴巴历时2年自研开发的互动游戏引擎Eva.js正式开源,致力于让前端工程师更低成本的开发互动游戏,并已经在淘宝、天猫、支付宝、优酷、考拉、菜鸟、盒马等业务场景中使用。

官网:https://eva.js.org/#/

Github:https://github.com/eva-engine/eva.js

一个高速发展的APP,一定会去做拉新,留存,促活,转化。而游戏中的使命感、社交欲、拥有感、成就感等等正是令人上瘾的元素,将业务与游戏相结合,进行“游戏化”,可以实现产品的运营目的。所以,市场上出现了很多游戏化产品。比如淘宝、支付宝、京东、饿了么、拼多多、招商银行等等 APP 都有类似的游戏化互动项目。

愿景和目标

Eva.js的愿景是让前端工程师更低成本的开发互动游戏,我们希望做到

  • 高效开发:Eva.js 提供最基础的互动游戏组件,让前端工程师几行代码就能做出效果。
  • 性能:提供高效的运行时以及渲染能力。
  • 可扩展性:使用 ECS 架构,最小化ECS内核+渲染(目前 gzip 130K),通过插件机制可以扩展插件。

我们做了什么

Quike Start

Articles

Projects

Tools

OSCHINA 本期高手问答(7 月 26 日 - 8 月 01 日) 我们请来了 @明非 和大家一起探讨以下问题:

  • 前端互动游戏引擎技术
  • 前端图形互动领域
  • Eva.js

可讨论的问题包括但不限于以上内容其他相关问题也欢迎大家积极提问!

嘉宾介绍:

明非,阿里巴巴淘系技术部前端互动团队成员,Eva.js 核心开发者。

为了鼓励踊跃提问,《人民邮电出版社》会在问答结束后从提问者中抽取 5 名幸运用户赠予 游戏编程模式 一书。

购买链接:https://item.jd.com/12036824.html 

OSChina 高手问答一贯的风格,不欢迎任何与主题无关的讨论和喷子。

下面欢迎大家就相关问题向 @明非  提问,直接回帖提问即可。

加载中
0
白开水不加糖
白开水不加糖

高手问答第 264 期 —— 聊聊前端互动游戏引擎 Eva.js

@赤脚小子@许雷神@夏鱼的鱼@开源中国首席罗纳尔多@Flutter2web

恭喜以上五位网友分别获得游戏编程模式图书一本
请私信 @白开水不加糖      告知快递信息(格式:姓名+电话+地址)

1
昵称昵称没有呀
昵称昵称没有呀

@明非 想知道插件机制提供的可扩展性是对ecs模式中system的扩展嘛?还有插件机制大概的实现原理是什么呢?

明非
明非
其实Eva.js的Component也是有完整的生命周期的,一个插件可以只包含Component,但是建议还是在Component上面去设置数据,在System中实现能力。
明非
明非
插件机制是ECS中的Component和System的组合。所以插件机制的原理其实就是Eva.js提供了整个ECS的运行时,需要什么功能的时候可以实现System加入到游戏的systems里面,然后当添加 System 关心的 Component 的时候,System 去实现对应的功能。
1
LeoXu
LeoXu

@明非 您好,请问这个框架适合做社么类型的游戏,需要开发团队具备那些技术和业务能力?

明非
明非
Eva.js 的定位是让前端更低成本的开发互动游戏,所以,开发团队需要具备最基础的前端开发能力,HTML/CSS/JS,以及基本工程能力例如NPM/Webpack等。如果说是单纯开发业务的话,需要会使用JS,理解 Eva.js 的开发的基础API,游戏业务还需要编写很多游戏逻辑的,Eva.js提供了各种组成游戏的元素,内部并没有集成游戏逻辑,就像Vue/React框架一样,并没有提供业务逻辑。
明非
明非
在阿里巴巴,Eva.js 经常被用来做一些互动类型的游戏,例如芭芭农场、金币小镇、双11星秀猫、双11盖楼,这些耳熟能详的互动游戏,当然也有模仿热门游戏例如合成大西瓜做成自己的游戏发布的。我们团队也在使用Eva.js开发斗地主这种棋牌类游戏。有一些不太会前端的游戏开发者来开发前端应用,也非常喜欢使用Eva.js来开发前端的小游戏。
1
赤脚小子
赤脚小子

@明非 你好,请问物理引擎选用的哪款?出于什么样的考虑呢?

明非
明非
物理文档:https://eva-engine.gitee.io/#/tutorials/matterJS MatterJS:https://github.com/liabru/matter-js 使用了 MatterJS,目前支持 Web 2D 文档比较全,也比较完善
0
许雷神
许雷神

@明非 大师傅,后续考虑支持gulp,vite打包吗?

明非
明非
如果说是业务开发中使用的打包方案,现在就是支持的 gulp/vite的,一般使用什么打包方式都是业务自行决定的。 目前Eva.js的源码仓库是使用rollup打包成了 esm/cjs/umd 三种模块,可以支持多种引入情况。在业务中使用Eva.js的时候,可以使用 gulp/vite/webpack 等等构建工具进行构建。
0
夏鱼的鱼
夏鱼的鱼

目前文档里面蛮多失效连接的,后续会有更多的实战案例和视频之类的提供给开发者么

明非
明非
关于失效链接可以具体贴一下失效链接的位置,我们来修复。 我们一方面会把一些我们内部开发的项目通过对外分享的方式将技术方案分享出来,可以关注一下“淘系前端团队”公众号,一般我们的一手资料会发布到那里。另外我们也会把收集社区里面一些优秀的实战案例,例如上面Projects里面的这些游戏。 我们会在有余力的情况下考虑视频之类的教学方式。对于社区建设上,我们还是要把官网、文档做的更加易懂,更加完善一些。
0
开源中国首席罗纳尔多
开源中国首席罗纳尔多

@明非 您好,请问兼容PC移动多端吗?

明非
明非
是的
0
pyboy58
pyboy58

@明非    您好,

  1 .Eva.js入门难度怎么样? 适合小白上手开发吗?

2.Eva.js的开发可以和vue无缝结合吗?淘宝的合成大西瓜等小游戏也是用eva.js开发的吗?

3.  cocos2d直接开发小游戏不好吗?为何还要 开发eva.js? cocos2d和eva.js对比有什么优缺点?

cocos2d可以直接用eva.js吗??

明非
明非
Cocos 不能直接使用 Eva.js。之前有同事做过 Cocos 编辑器直接导出成 Eva.js 的能力,不过没有对外开放哦~
明非
明非
cocos2d/laya/egret可以去做一些大而全的游戏,一体化比较好(从编辑器到发布),跨平台能力比较好(前端、客户端) Eva.js 的目标是为让前端更低成本的开发互动游戏,大多数的互动游戏知识一些交互和动画,例如双11星秀猫,芭芭农场;很多优化和设计也是针对前端这个环境特意设计的,例如加载的过程(加载+实例化+渲染);对于前端而言,用HTML/CSS来做HUD部分是非常的快的。
明非
明非
Eva.js 的渲染只需要提供一个 canvas 来提供渲染的画布,一般在 vue 里使用,只需要在 template 里写一个 canvas 标签,然后在 mounted 生命周期中来创建一个 Eva.js 的游戏对象,将 canvas 传入即可创建,但是在整个游戏过程中,尽量保持这个组件的生命的持续性,因为目前 Eva.js 还无法支持多实例。
明非
明非
Eva.js的目标就是让前端更低成本的开发互动游戏,入门并不难,我写过一篇2d互动入门文章可参考:https://mp.weixin.qq.com/s/0_i56TkYEet1YYQmC4UZ_w
0
pyboy58
pyboy58

@明非  1.Eva.js实现3d游戏吗?Eva.js可以搭配 Three.js  ,实现3d效果吗? 

2. 淘宝的动画的骨骼 是用的 obj格式的3d文件吗?还是fbx文件做骨骼? eva.js是怎么实现骨骼的?

3.Vue也可以实现过渡动画,为何 eva.js还要继续重复做过渡动画?eva.js 的过渡动画这一点有什么优势, 用户在等待页面的过程中,应该怎么设计留住客户?

 

明非
明非
关于等待页面的过程中,应该怎样设计留住用户,这个属于一个业务问题,之前我们的loading中会有一些对游戏内容、游戏活动的透出,参考业界的游戏中,例如塞尔达、最终幻想之类的游戏,在loading的过程中会有游戏的秘籍提示。
明非
明非
Vue 的过渡动画实现了对DOM的动画,Eva.js 的动画是实现了 Canvas 里面元素的动画。Eva.js 目前的过渡动画是基于配置的,我们也在开发基于手写代码实现的过渡动画的开发方式。
明非
明非
2D 互动游戏常用的骨骼动画是 Spine 和 Dragonbones,Eva.js 的骨骼动画可以使用 Spine 和 Dragonbones 来实现骨骼动画。
明非
明非
目前 Eva.js 只实现了 2D 渲染的插件。 因为所有的插件都是单独实现的,所以,可以把 Eva.js 作为上层框架,开发基于 Three.js 的渲染插件实现一个基于 ECS 的 Web3D 互动引擎。
0
peace710
peace710

@明非 您好,请问前端互动游戏引擎Eva.js的入门难度如何?内存使用,动画渲染等性能上有什么优势?对于不同平台的兼容特性又是怎样的?

明非
明非
在Loading加载方面,我们合理利用了前端的一些特性,最大化利用了加载过程中CPU的运算时间,比起一些常用的加载方式,游戏Loading会稍微快一些。具体可以参考前文中的Articles,目前依赖了Pixi能够提供一个相对强大的渲染性能。目前优先支持移动端。
明非
明非
Eva.js的目标就是让前端更低成本的开发互动游戏,入门并不难,我写过一篇2d互动入门文章可参考:https://mp.weixin.qq.com/s/0_i56TkYEet1YYQmC4UZ_w
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部