同时开发两款H5的ARPG游戏的设计和实践

本文分享了同时开发两款ARPG游戏的实践经验,探讨了如何通过整合项目、复用代码来提高开发效率,并讨论了在实际操作过程中遇到的问题及解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前话

这里主要是想记录一下自己的想法,以及一些设计思想,然后在实际开发过程中,是否会遇到一些自己所想不到的事情,以及怎么的解决过程。事实上,写这种文章,远比写技术性的文章难多了,个人感觉还很难写好。这里写也仅是自己的观点,一种想法和思考,不代表完全正确,共勉而已。

一、开发背景

两款ARPG游戏,一款相对简单一些,偏挂机的ARPG游戏,另外一款是比较类似传统的ARPG页游。跟传统的项目换皮再上线还是有比较的的区别的。
1. 确定战斗系统的机制是一致的,其他细节的功能会有所区别
2. 已有AS3的回合制以及ARPG项目和相关开发经验
3. 多页游积累的相关工具以及流程
4. H5的arpg demo已经实现了基本的角色、地图和基础简单的战斗系统(前期做的技术预研)
5. 几乎要重新开发全部客户端Html5的代码(基于TypeScript,但可移植部分之前AS3代码)
6. 服务端相对好点,上个页游也是用Java写的,所以服务端可以进行比较好的迁移。

二、两项目之间复用代码的设计思考

由于几乎是同时开发两个类似项目,又没有一个比较接近项目进行换皮。再者项目开发进度也紧,人力也有限。为了最大限度提高开发项目效率,节省资源。对两个项目进行整合,尽量复用代码,最好也最快的解决方案。下面是一些考虑执行的方案。

基础通用设计

最基础的,和具体的业务逻辑没有关系的代码和设计放到这里,不用考虑和纠结的。基础也大量移植原有AS3的代码,在稳定性和实用性都有一定的保障。
非代码类
1. 保持代码结构一致(代码包名等等)
2. 保持游戏资源目录结构一致(ui、场景、角色、物品等等)
3. 保持动画格式、ui编辑、动作编辑器等工具保持一致
4. 保持各种目录结构、ftp、持续集成服务器一致
5. 其他开发流程,相关规则保持一致
6. 项目配置、编译参数、编译工具(Egret Wing IntelliJ IDEA)
7. 通讯协议、策划数据尽量采取类似或者通用的方案
具体的版本管理图:
这里写图片描述

代码库
1. 自研基础代码库(通用类、工具类、mvc框架类……)主要移植和编写基础代码,跟具体的游戏类型没有关系的通用逻辑代码。
2. 第三方代码库(Json,MsgPack等等……)
3. 游戏引擎包(场景、地图、角色体系……)这里算是指定是开发游戏用的,但是这里还是根据可以做到不跟具体游戏类型。保留通用的游戏机制的代码库。
4. 战斗系统。战斗系统是引用前面3条的代码库,这里做得只能是arpg的战斗系统。这里会处理两个项目通用的战斗逻辑。以及面向接口开发,部分具体的实现是在不同的项目里开发的。

项目代码设计
1. 通过基础库和core库的分离设计,项目集中在写自己的项目,core库不能引用具体的项目代码
2. UI布局和逻辑分开。每个项目UI布局肯定不一样,但是部分逻辑是通用的,所以重点是这方面的设计。提取出公共的UI接口,然后项目分别实现。根据项目类型来不处理某些接口(单个项目独有),如图:
这里写图片描述
会有专门存放接口的包名(其实应该放在core里,然后实现类放在具体的项目),UI结构示意图
这里写图片描述
UI的接口和实现
技术分享
另外一种情况,就是UI功能变化比较大的时候如何处理呢?假如有一半一样一半不一样
这里可以采用共享LoginView基类了,在这里处理公共逻辑,具体的子类处理不同的UI逻辑。如果要更多的
重用,就得把基类的粒度做得更加细一些,当然做太多其实反而是浪费精力,应该根据项目具体的情况来决定使用什么的设计技术。
3. 功能模块之间采用事件派发,这样只需要处理事件,不具体处理项目,可以做到逻辑共享了。 这里分几种事件机制:core事件、cmd事件、mvc事件,项目独有事件。做了细致的分离,根据不同的功能使用不同的事件,提高开发和运行效率。

非技术方面
1. 两个项目都会指定负责人,希望项目进度和管理能够及时跟进
2. 两个项目的开发人员会交叉开发,类似和相同的功能模块,尽量同一个人开发,节省人力资源
比如背包、登录、创角、聊天等一些功能。
3. core库只能有1,2个人才能维护,其他人只有使用权,没有修改和提交权。不同项目还会开分支,同步到主干之后,还需要两边项目都调通。
4. 策划层会也会尽量沟通,除去玩法之外的一些功能模块,也会互相探讨,尽量做到至少是在数据结构上可以保持一致。比如技能、地图、角色设置等一些通用的设置

三、实践

刚开始基本上是按照前面的设计来进行的。挂机类aprg(见现在到处跑的传奇世界H5类型)先进行开发了半个月,所以这半个月首先是开发一些最基础和最通用的功能,同时也是完善角色场景以及战斗体系。
先做基础功能主要也是为了第二个项目也能够使用这些开发好的模块。

半月后同时进行第二个项目,刚开始其实还是蛮顺利,大部分也按照开始的设计来进行。只是后来因为项目原因,工作量也大,开始出现了一些问题了。比如因为项目赶,有部分功能没考虑设计,使用了简单粗暴的移植法。虽然快速做好了,但是有bug的时候,就必须在两个之间进行修复了。

另外就是core库的战斗系统设计得不够严谨,会修改得比较多,一不小心就会造成另外的项目跑不起来了。
所以在一些系统稳定前,总会踩下这些坑,得小心翼翼了。

人员的不足,不是每个模块都能按照之前设计那样,两个类似的模块同一个人维护,所以有时难免要维护或者移植别人开发的模块。

后面也是有陆续根据项目的具体情况调整一些方案,以及陆续补充core库的代码。

四、后记

其实这blog的内容一个多月前就开始了,结果直到现在才算是勉强写好。双开的结果就是连写blog的时间都没有,一天至少是当1天半来使用,写这个文章的热情也淡下来了。好在之前也写得差不多了,现在也没做太大的修改,有些设计和想法还是挺好的,在实践中也得到验证。总体有这种想法和设计,对于团队后面的工作展开还是有很大帮助的。

最后团队这种高压下,进步也是挺大的。同时也看到了团队强大的应变能力以及开发能力。
双开的很多的,发现真的很难用一些言语来描述,跟换皮做项目是两回事。不过总体还算顺利,虽然有些坑,不过也后续中慢慢填补上来,尤其是招到了足够的人手后,很多问题都得以解决了。

http://blog.csdn.net/xiaoxiao108/article/details/8913616 html5 挺火,写个html5游戏玩玩吧,想起cocos2d 貌似各个平台都有,网上找了找,下载了个Cocos2d-html5引擎包。 貌似另一个开源引擎lufylegend.js也很好,下次用用lufylegend.js试试。 开发环境 chrome Cocos2d-html5 游戏地址:http://hehe108.sinaapp.com/cocos2d/ (adsw回车) 实现方法如下 1.创建好 LayerGradient的子类 (里面放坦克子弹) 2.重写 onEnter 方法添加一些基本按钮 跟一些初始坦克,子弹 3.通过schedule方法 控制 坦克 子弹的重画 4.根据键盘按键(ASWD)确定出坦克的方向,根据坦克的方向修改坦克的X,Y轴坐标,来实现坦克的移动 5.通过cc.rectIntersectsRect函数来进行碰撞检测,实现子弹打击坦克 具体代码 1.在项目里面添加方向 var Direction = { L:0, U:1, D:2, R:3, STOP:4 }; 2.添加子弹类的相关属性 SPEED:10, WIDTH:15, HEIGHT:15, x:null, y:null, dir:null, live:true, tankClient:null, //LayerGradient子类TankClient 的引用 good:null, 3.子弹初始化,重画 ctor:function (x,y,good,dir,tankClient) { cc.associateWithNative( this, cc.Sprite ); this.x=x; this.y=y; this.dir=dir; this.tankClient=tankClient; this.good=good; this.initWithFile(s_missile); this.setPosition( cc.p(this.x, this.y) ); this.tankClient.addChild(this); }, Draw:function(){ if(!this.live){ this.tankClient.removeChild(this, true); return; } this.setPosition( cc.p(this.x, this.y) ); this.Move(); }, 4.添加子弹打击坦克的方法 HitTank:function(t){ if (cc.rectIntersectsRect(this.GetRectangle(), t.GetRectangle()) && t.live && this.live && this.good != t.good){ t.live = false; this.live = false; return true; } return false; }, 5.添加坦克类相关属性 SPEED:5, WIDTH:58, HEIGHT:58, x:0, y:0, l:false, u:false, r:false, d:false, dir:Direction["STOP"], ptDir:Direction["D"], tankClient:null, good:null, step:0, live:true, 6.在tank类中 坦克初始化,重画 ctor:function (x,y,good,tankClient) { cc.associateWithNative( this, cc.Sprite ); this.x=x; this.y=y; this.tankClient=tankClient; this.good=good; if(good){ this.initWithFile(s_tank); }else{ this.initWithFile(s_enemy); } this.setPosition( cc.p(this.x, this.y) ); this.tankClient.addChild(this); }, Draw:function(){ if (!this.live){ if (!this.good){ this.tankClient.removeChild(this, true); } this.tankClient.removeChild(this, true); return; } this.setPosition( cc.p(this.x, this.y) ); switch (this.ptDir) { case Direction["D"]: this.setRotation(0); //旋转精灵控制 炮筒方向 break; case Direction["U"]: this.setRotation(180); break; case Direction["L"]: this.setRotation(270); break; case Direction["R"]: this.setRotation(90); break; } this.Move(); }, 7.tank发子弹的方法 Fire:function() { if(!this.live) return null; for(var i=0;i<this.tankClient.missiles.length;i++){ var m = this.tankClient.missiles[i]; if (m.live == false){ m.x=this.x; m.y=this.y; m.live=true; m.dir=this.ptDir; m.good=this.good; this.tankClient.addChild(m); return m; } } var missile=new Missile(this.x,this.y,this.good,this.ptDir,this.tankClient); this.tankClient.missiles.push(missile); return missile; }, 8.LayerGradient加入坦克 this.tanks = []; this.myTank = new Tank(60,20, true, this); for (var i = 0; i < 10; i++){ this.tanks.push(new Tank(50 + 70 * (i + 1), 420, false, this)); } 9.LayerGradient中调用子弹打击坦克的方法 for(var i=0;i<this.missiles.length;i++){ var m = this.missiles[i]; m.HitTank(this.myTank); m.HitTanks(this.tanks); m.Draw(); } 10.控制坦克移动射击的部分代码 onKeyUp:function(key) { this.myTank.KeyReleased(key); }, onKeyDown:function(key) { this.myTank.KeyPressed(key); } 11.用Antcompiler合并压缩js后发布到sae 如果你发现有什么不合理的,需要改进的地方,请留言。或者可以通过 328452421@qq.com 联系我,非常感谢。 http://blog.csdn.net/xiaoxiao108/article/details/8913616
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值