手把手教你开发互动游戏,看EVA互动

今年金币庄园迎来了一次改版，改版后的金币小镇给用户带来了更丰富的视觉风格和全新的玩法。EVA体系是我们团队在互动业务多年探索的基础上产出的，它是一套上手快、开发效率高、能力完善的互动研发体系。EVA体系能大幅提升研发效率，小镇快速改版上线就是一个很好的范例。本文将介绍EVA体系是如何在小镇项目中实践以及一些个人的总结。

如下图就是金币小镇的首页界面，它包含了上方的游戏区域和下方的商业化部分，今天主要介绍上方的游戏区域。

2.5D简介

小镇的游戏方案采用了2DIsometric（等轴测或者等距)的方案来实现，2DIsometric一般被简单称为2.5D。2.5D是指一种在2D游戏中制造出3D效果的显示方法，这种方案更多的是对于视觉设计的规范，视觉按照一定的规范来设计素材，游戏开发同学基于素材来做放置拼接素材来搭建场景。

2.5D游戏素材，拼接后的效果（注：图片素材来源kenney网站）

细心看就会发现上方右侧图片地面上有一个个平行四边形的格子，素材就是基于这一个个格子作为基线来摆放拼接的，这就是我们经常说的TiledMap(瓦片地图)。TiledMap是使用一些小单元（瓷砖）来拼成一副大地图的游戏做法，TiledMap可以通过TiledMapEditor这类工具来搭建。

小镇用的就是用的上方的方案，下图就是小镇游戏区域的TiledMap视觉示意图，其中数字代表的是每个建筑的点位。

小镇游戏分层

小镇项目整体涉及建筑部分逻辑相对比较单一（渲染和升级替换资源），整体逻辑集中在领金币和多人的助力合力业务玩法部分。针对这种互动游戏中碰到的普遍情况，既有Canvas又有DOM+CSS，我们一般使用混合开发的开发方式。

小镇项目中会将游戏区分为三层，具体分层如下：

Background层负责游戏场景的背景图片，Scene层（游戏引擎开发）负责建筑的排列渲染，Hud层负责业务逻辑的展示，利用传统DOM和CSS的排版优势,更能跟上业务的节奏。

开发链路

小镇开发的基本工作链路如下：通过EVAStore的一站式上传、预览、代码导出流程后就能交付游戏引擎的资源了，然后将交付后资源使用EVA编辑器搭建场景后输出场景数据，最终将场景数据交由EVAJS渲染游戏场景，业务UI层使用DOM+CSS开发。

基于上方的三层分层后，Scene层渲染使用到EVAJS游戏引擎，EVAJS采用了ECS的设计模式作为底层架构，EVAJSECS设计如下：

了解Unity的同学一定对这个不陌生，EVAJS提供了全套对于EVAStore丰富素材System、Component的支持。

我们举例要渲染一个龙骨动画，这时候我们需要创建一个实体，然后将龙骨动画（Dragonbones）组件添加到实体上，最终龙骨动画渲染系统来管理相关的龙骨动画组件。伪代码如下：

import{Game,GameObject,resource,RESOURCE_TYPE}from

互动素材准备

我们了解了如何使用EVAJS渲染一个龙骨动画到场景中，小镇中每个建筑对应的是一个龙骨动画，小镇中随着用户等级提升龙骨动画素材个数会达到个以上，这时候这么多的素材要如何管理呢？

互动中的素材管理面临如下三个问题：

素材格式众多：面对图片素材、模型素材、动效素材、音视频这么多个素材格式，每个素材格式又可能包含多个资源文件，如果我们采用单独上传到CDN，对于引擎使用和后期的维护都是相当困难的。

如何最优化素材：不同格式的素材在上传后如何才能最优的跑在引擎上，如何让设计师同学即时预览到素材效果？

多人协作：在协作流程中，如何让不同角色的人协作起来

针对上面三个问题，EVAStore给出了很好的一站式解决方案：

1、EVAStore支持的如下众多格式，并且这些互动素材的协议标准是由经济体互动小组统一制定的，这就意味这些沉淀在平台上的素材资源可以放心的使用。

2、针对每种不同的素材格式，EVAStore都有相对应的算法进行优化，如帧动画的图片合成压缩、龙骨动画（DragonBone)的顶点优化、雪碧图最小内存占用压缩等，这些操作可以保证素材达到最优化的效果，同时上传后给提供了即时预览方便设计同学查看效果，如下

3、由于游戏有好多章节，每个章节有对应各自建筑的素材，借助EVAStore我们可以将每个章节设置一个项目并且设置权限方便不同角色之间的分工协作。

同时EVAStore的代码预览和在线实时编辑功能也能帮助前端定位资源问题：

场景搭建

素材管理的事情EVAStore很好的帮我解决了，接下来就是如何将这些素材按照视觉稿样子放置龙骨动画后生成场景数据，上面我们提到了tiledMapEditor工具能帮助我们搭建场景，但是现阶段要和我们的EVA体系进行整合还是需要费点力气:

小镇中建筑使用的龙骨动画，这个很难在tiledMapEditor中实现所见即所得的效果，同时在面对后期更多的素材资源格式也不能很好适应。

前端要基于视觉稿中的点位来放置建筑，类似于数格子后将建筑放上去，这是一个比较枯燥费时的事。

需要产出基于我们EVA规范的数据地图文件，方便后期二次开发。

我们做了个简单的编辑工具来解决上述问题（EVADesign已经在开发中）：

1、我们提供了基于EVAStore素材格式导入（未来打通个人权限下的素材，选择项目素材后导入资源面板）

2、采用将视觉稿叠加在搭建场景下方层来协助我们将素材资源放置在对应的点位即可

3、支持导出json格式保存到EVAStore，我们制定了基于这类2.5D游戏场景格式，如下格式：

{"mapConfig":{"width":30,"height":30,"tileWidth":,"tileHeight":54},"layers":[{"layerName":"buildings","align":[-0.5,-1],"data":[[9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0],[9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0],[9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0],[9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0],[9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0],[9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0],[9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0],[9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0],[9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0],[9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0],[9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0],[9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0],[9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0],[9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0],//1这个数字又对应的下方objects数组中index为1的元素（即：building1建筑）[9,0,0,0,0,0,9,0,0,0,0,0,1,9,0,0,0,0,0,9,0,0,0,0,0,0,0,0,0,0],[9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0],[9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0],[9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0],[9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0],[9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0],[9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0],[9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0],[9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0],[9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0],[9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0],[9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0],[9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0],[9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0],[9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0],[9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0,9,0,0,0,0,0]],"layerOrder":0,//对应上方数组中的index"objects":[{},{"resourceKey":"building1"}],//对应上方的objects中的resourceKey,building1描述的是个龙骨动画"resources":{"building1":{"name":"building1","type":"DRAGONBONE","src":{"image":{"type":"png","url":"

转载请注明：http://www.jinchangjk.com/afhzp/2376.html