《游戏脚本的设计与开发》--- 队员列表和人物属性

本节主要是为接下来进入战场做准备,要做战斗画面,必须有参战的队员,所以就需要有队员列表,有了队员列表,那么为了确认每个队员的战斗力防御力等,则需要有人物属性的显示,本次主要来介绍一下队员列表以及人物属性的显示。

先看一下效果预览:

队员列表的作用就是保存我方能够参战的人员的信息,简单来说一个数组就可以完成。但是我们需要考虑,这个数组里需要保存哪些信息,对于早期简单的RPG游戏来说,比如《勇者斗恶龙》,《吞食天地》等,每个人的相应等级的能力是固定的,所以对于这些游戏来说,只需要保存人物的ID和等级就足够了。但是现在游戏都讲究多样化,如果还这样做,恐怕就该被吐槽了。当然,不怕被拍砖的话,你可以说,我们是资深的剧情派,只要剧情好,其他的都是浮云。我的脑袋已经是扁的了,不能再被拍了,所以我希望这个功能可以相对的容易扩展一些,能够满足我后面的一系列的功能。说的貌似挺深奥的,其实就是装一下,我的想法其实很简单,就是把每个队员的信息放到一个类中,这个类中除了有人物的基本信息(等级,HP,武力等),还可以有人物的装备,还可以有人物的状态,还可以有根据外部条件计算临时能力的功能等等。

好了,新建一个类MemberData,如下。

https://github.com/lufylegend/lsharp/blob/3.6/Libraries/character/MemberData.js

在这个类的构造器中,需要传入一份chara.json中设定的初始数据,或者经过成长从存档中读取来的数据,存档部分以后会细讲。当有了这个数据后,人物的每个属性,都进行了封装,当然目前我只是临时封装了几个属性而已,比如装备信息,状态信息等,都会在后面讲到的时候,再具体对其进行封装。

我依然将人物列表放到LRPGObject中,如下。

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. LRPGObject.memberList = [];  

然后,也需要准备两个函数,用来操作这个数组列表。

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. LRPGObject.addMember = function(index){  
  2.     var characterData = LMvc.datalist["chara"]["peo"+index],i,l,chara;  
  3.     if(!characterData)return;  
  4.     for(i=0,l=LRPGObject.memberList.length;i<l i="" chara="LRPGObject.memberList[i];" if="" index="" characterdata="" return="" lrpgobject="" memberlist="" push="" new="" memberdata="" removemember="function(index){" var="" for="" -="" 1="">=0;i--){  
  5.         chara = LRPGObject.memberList[i];  
  6.         if(chara.index() == characterData.Index){  
  7.             LRPGObject.memberList.splice(i,1);  
  8.             break;  
  9.         }  
  10.     }  
  11. };</l>  

接下来是脚本,我们需要利用脚本来让一个队员加入或者离开,看下面的脚本。

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. //队员加入,参数:人物序号  
  2.     RPGMember.add(8);  
  3.     //队员离开,参数:人物序号  
  4.     RPGMember.remove(8);  

下面是脚本解析。

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. /* 
  2. * LRPGMemberScript.js 
  3. **/  
  4. LRPGMemberScript = function(){};  
  5. LRPGMemberScript.analysis=function(value){  
  6.     var start = value.indexOf("(");  
  7.     var end = value.indexOf(")");  
  8.     switch(value.substr(0,start)){  
  9.         case "RPGMember.add":  
  10.             LRPGMemberScript.add(value,start,end);  
  11.             break;  
  12.         case "RPGMember.remove":  
  13.             LRPGMemberScript.remove(value,start,end);  
  14.             break;  
  15.         default:  
  16.             LGlobal.script.analysis();  
  17.     }  
  18. };  
  19. LRPGMemberScript.add = function (value,start,end){  
  20.     var params = value.substring(start+1,end).split(",");  
  21.     LRPGObject.addMember(params[0]);  
  22.     LGlobal.script.analysis();  
  23. };  
  24. LRPGMemberScript.remove = function (value,start,end){  
  25.     var params = value.substring(start+1,end).split(",");  
  26.     LRPGObject.removeMember(params[0]);  
  27.     LGlobal.script.analysis();  
  28. };  

接下来我们让队员列表可视化,先准备好队员列表的控制器,模型和视图,如下。

https://github.com/lufylegend/lsharp/blob/3.6/Controllers/PeopleController.js

https://github.com/lufylegend/lsharp/blob/3.6/Models/PeopleModel.js

https://github.com/lufylegend/lsharp/blob/3.6/Views/PeopleView.js

还记得下面的菜单吗,现在给武将按钮加上事件,来显示队员列表。

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. var people = new ButtonText("people","武将",true);  
  2. people.x = startX + xindex*step;  
  3. people.y = startY + yindex*step;  
  4. self.menuLayer.addChild(people);  
  5. people.addEventListener(LMouseEvent.MOUSE_UP, function(event){  
  6.     LTweenLite.to(self.menuLayer,0.3,{x:LGlobal.width,onComplete:function(){  
  7.         self.controller.showPeople();  
  8.     }});  
  9. });  

 

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. MenuController.prototype.showPeople = function(){  
  2.     var self = this;  
  3.     self.loadMvc("People",self.peopleComplete);   
  4. };  
  5. MenuController.prototype.peopleComplete = function(){  
  6.     var self = this;  
  7.     var people = new PeopleController();  
  8.     people.baseView = self.baseView;  
  9.     self.view.parent.addChild(people.view);  
  10.     self.view.remove();  
  11. };  

 

队员列表的获取,暂时简单的分页获取一下,之后可能根据队员的暂时离队等情况要做一些筛选,到时候再细讲。

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. PeopleModel.prototype.getMemberList=function(){  
  2.     var self = this,i,l,member,list=[];  
  3.     if(self.dataIndex < 0 || self.dataIndex >= LRPGObject.memberList.length){  
  4.         return [];  
  5.     }  
  6.     for(i=self.dataIndex,l=LRPGObject.memberList.length>i+self.dataMax?i+self.dataMax:LRPGObject.memberList.length;i<l;i++){  
  7.         member = LRPGObject.memberList[i];  
  8.         list.push(member);  
  9.     }  
  10.     return list;  
  11. };  

获取到队员信息后,把名字显示出来就比较简单了,下面的代码不但显示了列表,而且给每个名字添加了点击事件。

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. PeopleView.prototype.showMemberList=function(){  
  2.     var self = this,num,l,icon,props;  
  3.     var list = self.model.getMemberList();  
  4.     self.nameLayer.removeAllChild();  
  5.     for(var i=0;i<list.length;i++){  
  6.         charaData = list[i];  
  7.         nameButton = new ButtonSelect("BtnSelect03",{label:charaData.name(),width:150,height:48,color:"#8B0000"},0);  
  8.         nameButton.data = charaData;  
  9.         nameButton.y = 50*i;  
  10.         self.nameLayer.addChild(nameButton);  
  11.         nameButton.addEventListener(LMouseEvent.MOUSE_UP, self.nameClick);  
  12.         if(i==0){  
  13.             self.nameClick({clickTarget:nameButton});  
  14.         }  
  15.     }  
  16. };  

效果如下

下面的问题是如何显示人物的详细信息了。新建一个CharacterProperty类

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. function CharacterProperty(){  
  2.     var self = this;return;  
  3.     base(self,LSprite,[]);  
  4.     self.menuLayer = new LSprite();  
  5.     self.addChild(self.menuLayer);  
  6.       
  7.     self.menuList = {};  
  8.     var basicButton = new ButtonSelect("BtnSelect04",{label:"基本属性",width:100,height:50,textHeight:30},0);  
  9.     self.menuLayer.addChild(basicButton);  
  10.       
  11.     var abilityButton = new ButtonSelect("BtnSelect04",{label:"能力属性",width:100,height:50,textHeight:30},0);  
  12.     abilityButton.x = 100;  
  13.     self.menuLayer.addChild(abilityButton);  
  14.       
  15.     var armsButton = new ButtonSelect("BtnSelect04",{label:"兵?属性",width:100,height:50,textHeight:30},0);  
  16.     armsButton.x = 200;  
  17.     self.menuLayer.addChild(armsButton);  
  18.       
  19.     var tacticsButton = new ButtonSelect("BtnSelect04",{label:"策略属性",width:100,height:50,textHeight:30},0);  
  20.     tacticsButton.x = 300;  
  21.     self.menuLayer.addChild(tacticsButton);  
  22.       
  23.     var equipmentButton = new ButtonSelect("BtnSelect04",{label:"装アクハヤ",width:100,height:50,textHeight:30},0);  
  24.     equipmentButton.x = 400;  
  25.     self.menuLayer.addChild(equipmentButton);  
  26.       
  27.     self.menuLayer.x = (500 - self.menuLayer.getWidth())*0.5;  
  28.   
  29.     var background = new WindowBackground(3,500,320);  
  30.     background.y = 50;  
  31.     self.addChild(background);  
  32.       
  33.     self.viewLayer = new LSprite();  
  34.     self.viewLayer.y = 50;  
  35.     self.addChild(self.viewLayer);  
  36. }  

效果如下。

我设计了几个分类来显示人物的各种属性,如果你在制作自己的游戏的时候,需要按照自己的想法重新设计的话,那么调整CharacterProperty类中的代码就可以了,下面是CharacterProperty类的全部代码。

https://github.com/lufylegend/lsharp/blob/3.6/Libraries/character/CharacterProperty.js

目前,我只是简单的将基本信息显示了一下,而具体的能力属性部分,比如攻击力,你需要根据人物的武力,装备,状态等进行计算,本次就先不具体讲了。

最终效果如下

好了,测试链接。

http://lufylegend.com/demo/test/lsharp/rpg-lsharp-06/index.html

最后,给出本次的代码下载:

https://github.com/lufylegend/lsharp/archive/3.6.zip

For more complete information about compiler optimizations, see our Optimization Notice.