// 不知道对大家是个好消息还是坏消息呢.. 我因这个游戏而被聘去做游戏了. 当然,会是基于这个游戏引擎继续做下去. 为了防止游戏被抄袭,我在得到一套商业化代码保护方案前是不会发布demo的
// 以后会是团队开发,速度比我个人做要快多了,所以对此感兴趣的可以等待游戏的正式版!
// 关于游戏的一切，还是会记录在这里.
http://new.qzone.qq.com/57085445
在正文前，先简短介绍自己。
我任职于广州的某个网站服务公司的系统开发员，主要任务是以.Net编写各种web系统，例如CMS.EIP。
大家都知道，编写服务端程序相对客户端程序要枯燥一些。 为了调剂一下业余生活，我从半年前开始学习了javascript。 在那之前，js在我眼里和大多数开发者一样，只是用来验证表单之类。
但慢慢我觉得js是个很有意思的东西，它在我的手里开始变得听话，总是很顺利的完成我所想要的一些界面效果。
萌生做游戏的想法也是受到国外某js游戏以及国内的web星际和剑侠的影响。
计划开始时我对js还没达到熟练的程度，即使到现在，我对js的一些基本语法仍然没能掌握，比如正则（总忘）。
为了实现这个计划，我每天从休息时间里拿出了4小时去学习js以及它的一些优秀框架，比如jq,prototype。
这个游戏动工于一个月前，总体上来说，还是较为顺利的。基本上每天都能有新的收获，这种感觉是混杂着疲惫与欢乐的．
伴随着这个游戏的开发进度，渐渐引起了同事的好奇与关注．于是我便充满动力的坚持了下来．
当然，不能忘记的是．在这个开发过程中，51js.com上的各位前辈的文章给了我很多很多的启发与帮助．非常感激．
在接下来的日子，我会不断的更新日志，将游戏实现的思路与心得记录下来，直到这个游戏完成．希望在这个过程中，各位能指出程序中的错漏以及改良方案．
所要重现的游戏是03年末在中国上市的<魔力宝贝>,该游戏在04到05年达到颠峰,其后因为制作组的更换,游戏质量的下降,以及外挂等因素,导致该游戏走向衰落.
这个伟大的作品出自Enix,是石器时代制作组Dwango的续作. 与该公司旗下的大部分游戏一样,也是正统日式幻想RPG,有着标准的RPG设定. 从它身上可以看到很多经典日式游戏的影子. 这款集大成之作伴随了我五年时光,给我留下了数不尽的回忆.
今天,我期待它以另种形式重生.. 暂命名: CrossGate(十字之门,其实就是这个游戏的原名)
以下是目前进度的测试地址( 目前进度已远超这些, 但未传 ):
提示: 1.大部分动作第一次显示的时候都会卡一下,这是图片未做预载的原因(目前没想到的好的办法),图片载入完全后就会正常.
2.地图测试中,关闭地图格可以明显提高运行流畅度.(实际游戏里也是不存在的) 这些格子是用来辅助debug的.
http://www.xgate.net.cn/cg/
游戏的特性:
1. 客户端:javascript,xml,css,div 服务端:.Net WebService(C#),MSSQL
2. 代码与css都尽量遵循标准,在目前的测试中,所有浏览器都顺利通过.并且每个浏览器都有自己独特的方面,Chrome综合表现最好.
目前已经测试过的浏览器有:IE6,IE8(兼容模式),FF,Chrome,Opare,Safari.以及一些IE内核的. IE7在图形显示上略有问题.
3. 程序核心,地图资源,NPC资源 都是两两分离的.编辑剧情较为方便(可能是做系统的惯性思维导致的)
4. 性能上依照本人的IBMX40为基准,尽量在迅驰1.3GHz+855集成显卡这样配置下流畅.目前基本达标(地图关闭格子才行)
操作:
战斗) 目前还没操作可言, 只有技能脚本测试. 过几天与地图结合后,才会有.
地图) 右键行走,左键转身与调查.
顺便问下是否不能上传图? 还有,有人告诉我这个论坛的群号吗.
相关截图:
// 10月2号下午 更新:
这两天我在做地图编辑器, 这是一个相当难的事.. 目前我完成了大约2/3, 预计明天或后天可以更新到网上.
虽然我做不少系统,但地图编辑器显然比起那些东西来说,需要考虑更多.不光是系统结构和数据存储.还要考虑到界面的一些问题.
well .. 不是一些,是很多!
目前编辑器所具备的功能: 设置地图图象,起点,大小,障碍点,静态遮罩物,拖拽定位,脚本生成.
// 10月4号晚上 更新:
编辑器的最初版本终于完成, 这个玩意足足用去了我70个小时以上. 我的大半个国庆就这么过去了..
开发的过程是很艰辛的,就像前天我说的. 必须考虑到很多界面性的东西,这就要求我不能再采用以后台程序为主的开发思路.因为那样可能会导致一点小小的改动就要刷新整个页面.
所以我采用的思路是纯js操作,一切数据都储存在变量中.提交保存的时候汇总这些变量,序列化储存到数据库里. 编辑的时候再读取出来,按顺序还原变量。
至此,这个程序的基础引擎就算完成了. 战斗.人物属性,买卖.物品,这些就可以独立出来做了.
这次我把地图格默认关闭了,看看是不是顺了不少呢? (图象的预载仍然没做,见谅);
编辑器测试地址, 创建地图后需要保存地图,然后返回列表点测试地图就可以看到效果了:
http://www.xgate.net.cn/cg/system/maplist.aspx
以下是编辑器操作与程序中某些功能实现的思路,有兴趣可以看看。
编辑器操作指南:
1. 全局
1) 地图卷轴: 将鼠标放在地图区四周的箭头上.
//以下是下方按钮.
2) 显示选区: 显示鼠标在绝对坐标系上的位置. 如果要设置障碍点,地图起点,NPC坐标等,则必须先开启这个功能.
3) 显示边界: 只将地图四周的tile显示出来,目的是简化的显示地图范围.用于大地图情况下显示全部格子会影响性能的情况.
4) 显示网格: 显示地图所有tile,本操作会明显影响性能.适用于小型地图.
5) 设置障碍: 作用就不多说了. 如果对一个障碍点再次点击,则取消此点.
6) 停止设置: 解除鼠标所绑定的任何操作,如果不确定给鼠标绑了什么操作,可以点点.
7) 显示特殊点: 只显示障碍,起点,出口(暂无);
8) 隐藏所有: 隐藏所有格子,包含特殊点.
9) 重定位NPC: 地图原点被修改后,点此可以重新定位NPC到正确的位置.
10) 保存地图: 将地图数据保存到数据库.如果提示"已锁定",表示该地图被我锁定了,无法被保存.
11) 返回列表:略.
2. 地图设置
1) 名称: 略;
2) 原点: 指游戏中,坐标为0,0的地图块所在的位置. 要填写的就是该点css中的left与top属性. 作用是和地图图片进行照准.
点击"设置原点",可以给鼠标绑定一次性操作. 此时在地图区,点击一个位置,即可设置原点.
如果你更改了原点,网格和NPC并不会改变位置,这是出于性能考虑.可以点"重定位NPC"和"显示网格"修改位置.
3)大小: 略;
4)起点: 主角初试位置,填写的是绝对坐标.
5)图象: 地图所用的图片,目前只有map_test.jpg可用.
以上所有操作都要点"更新数据"才会有效,以下所有功能都一样.
3. 静态遮罩 ,作为永久性遮罩与地图一起卷轴,如树,石柱.
1) 名称:略
2) 坐标: 点设置坐标,给鼠标绑定一次性操作. 移动鼠标在地图区, 该遮罩会变为半透明. 点一个位置后,设置完成.
3) 路径: 默认为空,所以添加一个遮罩后显示的是X. (目前可用的只有m.gif )
4.NPC
1) 名字:略
2) 偏移: 由于NPC图象大小不一,需要对图象的位置进行修正.修改后需要点更新数据.
3) 坐标:点"设置坐标"给鼠标绑定一次性操作,在地图中点一个绝对坐标完成设置.
4) 对话: 在内容框里添加一条对话内容,添加到列表中. 可以点"测试对话"进行测试,该对话效果与游戏中一样.
规则: 普通对话, 选中"对话", 取消"分支".
事件: 选中事件,其他选项则被忽略. 事件是指各种行为,如战斗,买卖..
内置的行为有: #goon() ,#stop() , #goto(n) 分别代表继续对话,停止对话,跳转到第n条对话.
分支: 选中对话,选中分支,选择类型. 游标A是指当主角选了肯定回答后对话流程的走向.
如第2句选择是后要转到第5句,则填写4(从0开始). 游标B即选否的情况下,原理一样.
下面是利用封装后的类新建一个NPC的代码:
M.npc["2,3"]=new NPC(2,3);
M.npc["2,3"].name="吉拉";
M.npc["2,3"].jid="jila";
M.npc["2,3"].img="../img/npc/jila.gif";
M.npc["2,3"].word=[["虽然我是女孩子,但我一点也不弱 !"],
["什么,你要向我挑战?",1,2,4],
["美丽的鲜花也是有刺的!"],
["alert('战斗事件发生');",1],
["原来是误会啊. 抱歉了!<br/>那么,我能为你做点什么呢?<br/>嗯.. 我帮你去掉地图的格子好吗? 这样游戏的运行速度会提高很多哦!<br/><br/>你也一定是这样想的吧 ? ",2,5,8],
["$('.Map_Piece').remove();#goon();",1],
["哈哈!怎么样,我厉害吧?"],
["#stop();",1],
["你真没劲!"]
];
M.npc["2,3"].bind();
5. 生成脚本: 用于debug,生成的信息即是地图的"资源".
之后的道具编辑器,战斗编辑器之类我就不再继续传到网上了,这里涉及到服务器的配置. 我会沉寂一小段时间,然后等战斗,地图,交易,人物属性等基本完成的时候,发布Demo. 各位,再会.
//10月9
这些天我完成了数据库的一部分设计,以及角色能力,小地图等UI. 而游戏本身也决定交由本公司运营,所以之后的开发必须严格遵守商业协议了. 大约一到两个月后,我会放出第一个demo.(不过到时候可能是以那个公司的名义了~ 而且很可能会换掉素材,避免版权问题)
总体界面:
使用中的:
//10月12日
呵呵松下的单子终于做完了,昨天好好睡了一天. 今天一鼓作气把人物属性的UI部分给做了. 目前正在思考与数据库的连接.
这些天做UI部分,发现处处都要三思后行. 每一个span每一个div,都要小心的设置,生怕某个操作留下性能隐患.
此外有些小心得: 1. DIV 包裹住一些图象和span,移动DIV所产生的消耗要比移动他们本身的消耗要低得多,尤其是地图和遮挡物.
2. 如果一个语句要反复获取某个id,那么用个变量存储下这个id所指向的元素会提高很多速度
3. SPAN里如果没有文字的话,是不能接受onclick操作的,这是IE6的bug,解决办法是打空格或设置背景.
4. 文字的阴影目前可以用两个span绝对定位,下层span偏一像素来模拟.这样可以全浏览器兼容,但对性能是不小的开销.
图:
1.界面
2.人物明细 Ctrl+W 打开
// 10月18号
果然,作为Coder 来说休息是种奢侈的东西.. 结单后,停工已久的EIP项目又启动了.
所以这几天我的进度比较慢,甚至前天一回家就睡觉了. 今天有点私事请了假, 刚好明天连假. 于是好好睡了一觉, 醒来后精神很好. 思路也很清晰.
趁着这机会把任务系统完成了,顺便把"立体效果"完善了.
先说立体效果. 如下图
┌───────┐→─── 背景
│┌───────┐→── 人物
││┌───────┐→─ 前景
│││ │
└││ │
└│ │
└───────┘
一般来说,斜视角游戏都会有这样的设计,目的是让游戏看上去更"符合人的视觉". 目前很多2D游戏都是这样设计,从古老的仙剑1到现在的大部分的2DRPG游戏.
所以一个问题就是NPC 与 主角之间的关系,如果单纯的把NPC设为前景或背景都不可以,因为主角是可以在他们的身前或身后的. 如果固定层级那就可能会产生主角站在NPC头上的滑稽现象.
仔细思考后,决定加入一个
┌───────┐→── 背景
│┌───────┐→── 人物
││┌ - - - - - - - - - - -┐→── NPC
│││┌───────┐→── 前景
└│││ │
└││ │
└│ │
└───────┘
你可以看到NPC是虚线的，代表它是可变层。作用是主角靠近这个NPC的时候，根据主角与NPC的坐标对比来动态改变NPC的层级。
任务系统，实现了任务链，可重复，一次性等各种任务。
这个任务系统思路借鉴了EIP中的“工作流”思想，在能实现任务系统的情况下，也可以作为“角色行为历史“来使用。
比如你打败了魔王，路人甲应该说“啊，谢谢你，又可以和平生活了。” 而不是“ 唉，因为魔王的作坏，庄稼都没收成了”。
另外，虽然不想，不过还是下手把战斗部分给重新做了.目前进度50%左右.
简单说来就是把原本面向过程且凌乱的脚本改写为面向对象的代码.
此次改进将会有以下几个方面:
1. 优化了Jq对象的获取速度,现在在角色的构造函数Fighter()里一次性绑定角色元素,避免了之前在战斗动画中反复寻找DOM元素的资源消耗. 这个改进体现在动画流畅度明显上升.
2. 预载了常用gif图. 寻觅很久,仍然没有找到像flash那样方便且准确的loader函数,只好先用image判断了(但image函数在载gif的时候可能卡住).现在在构造函数里将会预先载入一些常用的图片,如普通攻击效果之类.
3. 面向对象,代码清晰,效率高. 另外修正了IE7的一些问题, 终于达成了全浏览器兼容。。
4. 类中大量采用prototype减少内存浪费,之前很少用的..
这次重制完成,就会完成与地图部分的对接. 一个可运行的基础版本就完成了.
由于大部分功能都需要依赖数据库与服务端了，SQL2005的空间贵得惊人~ 所以Demo的发布时间现在还不能确定~
//10月28号
战斗UI部分完成了, 目前正制作服务器端的运算部分. 由于之前毫无做游戏的经验, 一开始着实让我郁闷了很久都无法下手.
从开始设计数据库到目前完成基础框架用了4天的业余时间, 一个清晰可靠的流程框架可以大大减少以后修改或是程序错乱的可能性.
我设计的基本流程是:
1. 和js一样,先创建一个 Class Figther , 但成员显然要比js那边要丰富多了,除了名字形象种族这些基础信息外,还包含了角色的攻击,防御,敏捷,精神力,回复力,闪躲,必杀,命中,魔伤..等,用于战斗运算. 这里没什么难度,就是声明N个Int和string 类型的全局变量.
2. 在获取战斗信息页面以Session 记录下敌人的信息(用类).
3. 创建计算类, 用swith区分技能, 然后根据公式算出战斗结果, 输出脚本.
4. 根据敌我双方敏捷排序, 按照各自的技能调用计算类,输出脚本.==> 前台显示动画,同步数据.
制作完这块,基础框架就算完成. 但还需要一点时间设计几个demo地图和一些敌人. . 以及角色选择画面.( 做着做着才发现，很多地方都要很多时间的.. )
//10月31号
战斗部分的流程框架基本完成 ,但肯定不会是最优流程. 其中对敌我双方的敏捷排序用了很jiong的双冒泡排序再对比的方法. 由于这部分运行在服务器，速度比脚本要快很多, 也就暂时不考虑性能消耗.
完成了游戏中物理伤害的计算. 这一个很严肃的问题. 一个游戏如果一堆属性,而战斗时用得着的却只有几个,那绝对是游戏策划和设计的严重失误. 在下见识过一些网络游戏, 虽然人物属性繁多,但实际战斗中只有一个"战斗力"决定了一切. 其他全成了摆设.
这个物理伤害公式参考了原作和许多游戏的设定,加上了我自己的一些看法, 调整了约3个小时.
我略过了魔法公式,先测试了整个战斗流程. 结果是令我欣慰的, 和服务器的交互是几乎察觉不到的,NPC总算有了一些AI.
NPC的设置我建立了四个表去存储,包含敌人属性, 技能, 口头禅,特殊事件. 我想用来表现一个NPC是足够了的.
完成后我没有继续去做技能函数,而是去完成地图与战斗的对接.
这其实是我一直担心的问题. 之前设计程序结构的时候,考虑到脚本的条理性以及性能,而将战斗与地图分开做成两个页面. 这样的话将战斗iframe进地图的时候也可以拥有独立的页面资源,相当于两个页面运行，这样保持程序的流畅.
我设置了一个NPC, 原作中很受欢迎的小美女露比. 加了一些对话,测试特殊战斗.
结果确实出了问题: 1.iframe背景不透明,这个问题在于兼容全浏览器，我尝试同时给iframe加上IE和FF分别可行的属性,结果成功解决了.
2.IE6中 , iframe页面的鼠标右键菜单失去作用。 正确的说是鼠标事件无法捕捉. 但后来我发现放置一个全屏幕的div,背景设置为一个透明gif,就可以让iframe中的鼠标事件生效. 当然,兼容所有浏览器 .
3. IE6中,键盘事件也无法捕捉, 办法是给body加上onkeypress=return false ,再捕捉keydown就可以了.原因目前不明.
解决了这些，又添加了切换战斗时的效果. 终于像个样子了. Demo预计在两周后左右发布. Demo包含一个城（20个地图块这样），两个村子，一些随机战斗，两个boss战。 以及各类任务若干。
人气角色露比, 经典之战再现.
iframe的透明+ Gif的篓空透明, 和原作效果相似度90%
操作界面, 目前只有攻击和技能可用.
技能还要包含等级和满级名字,这点我费了不少脑筋,最后用jq的data缓存解决了
技能光芒, 音效, 背景音乐, 一个都不能少
其实屏幕的大小比原作要高出1/5 .
[
本帖最后由 阿伍 于 2008-11-9 18:42 编辑 ]
