《游戏脚本的设计与开发》-(RPG部分)3.6 队员列表和人物属性

注意：本系列教程为长篇连载无底洞，半路杀进来的朋友，如果看不懂的话，请从第一章开始看起，文章目录请点击下面链接。

http://blog.csdn.net/lufy_legend/article/details/8888787

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

先看一下效果预览：

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

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

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

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

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

LRPGObject.memberList = [];

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

LRPGObject.addMember = function(index){var characterData = LMvc.datalist["chara"]["peo"+index],i,l,chara;if(!characterData)return;for(i=0,l=LRPGObject.memberList.length;i=0;i--){chara = LRPGObject.memberList[i];if(chara.index() == characterData.Index){LRPGObject.memberList.splice(i,1);break;}}};

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

//队员加入，参数：人物序号RPGMember.add(8);//队员离开，参数：人物序号RPGMember.remove(8);

下面是脚本解析。

/** LRPGMemberScript.js**/LRPGMemberScript = function(){};LRPGMemberScript.analysis=function(value){var start = value.indexOf("(");var end = value.indexOf(")");switch(value.substr(0,start)){case "RPGMember.add":LRPGMemberScript.add(value,start,end);break;case "RPGMember.remove":LRPGMemberScript.remove(value,start,end);break;default:LGlobal.script.analysis();}};LRPGMemberScript.add = function (value,start,end){var params = value.substring(start+1,end).split(",");LRPGObject.addMember(params[0]);LGlobal.script.analysis();};LRPGMemberScript.remove = function (value,start,end){var params = value.substring(start+1,end).split(",");LRPGObject.removeMember(params[0]);LGlobal.script.analysis();};

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

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

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

var people = new ButtonText("people","武将",true);people.x = startX + xindex*step;people.y = startY + yindex*step;self.menuLayer.addChild(people);people.addEventListener(LMouseEvent.MOUSE_UP, function(event){LTweenLite.to(self.menuLayer,0.3,{x:LGlobal.width,onComplete:function(){self.controller.showPeople();}});});

MenuController.prototype.showPeople = function(){var self = this;self.loadMvc("People",self.peopleComplete);};MenuController.prototype.peopleComplete = function(){var self = this;var people = new PeopleController();people.baseView = self.baseView;self.view.parent.addChild(people.view);self.view.remove();};

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

PeopleModel.prototype.getMemberList=function(){var self = this,i,l,member,list=[];if(self.dataIndex < 0 || self.dataIndex >= LRPGObject.memberList.length){return [];}for(i=self.dataIndex,l=LRPGObject.memberList.length>i+self.dataMax?i+self.dataMax:LRPGObject.memberList.length;i<l;i++){member = LRPGObject.memberList[i];list.push(member);}return list;};

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

PeopleView.prototype.showMemberList=function(){var self = this,num,l,icon,props;var list = self.model.getMemberList();self.nameLayer.removeAllChild();for(var i=0;i<list.length;i++){charaData = list[i];nameButton = new ButtonSelect("BtnSelect03",{label:charaData.name(),width:150,height:48,color:"#8B0000"},0);nameButton.data = charaData;nameButton.y = 50*i;self.nameLayer.addChild(nameButton);nameButton.addEventListener(LMouseEvent.MOUSE_UP, self.nameClick);if(i==0){self.nameClick({clickTarget:nameButton});}}};

效果如下

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

function CharacterProperty(){var self = this;return;base(self,LSprite,[]);self.menuLayer = new LSprite();self.addChild(self.menuLayer);self.menuList = {};var basicButton = new ButtonSelect("BtnSelect04",{label:"基本属性",width:100,height:50,textHeight:30},0);self.menuLayer.addChild(basicButton);var abilityButton = new ButtonSelect("BtnSelect04",{label:"能力属性",width:100,height:50,textHeight:30},0);abilityButton.x = 100;self.menuLayer.addChild(abilityButton);var armsButton = new ButtonSelect("BtnSelect04",{label:"兵?属性",width:100,height:50,textHeight:30},0);armsButton.x = 200;self.menuLayer.addChild(armsButton);var tacticsButton = new ButtonSelect("BtnSelect04",{label:"策略属性",width:100,height:50,textHeight:30},0);tacticsButton.x = 300;self.menuLayer.addChild(tacticsButton);var equipmentButton = new ButtonSelect("BtnSelect04",{label:"装ｱｸﾊﾔ",width:100,height:50,textHeight:30},0);equipmentButton.x = 400;self.menuLayer.addChild(equipmentButton);self.menuLayer.x = (500 - self.menuLayer.getWidth())*0.5;var background = new WindowBackground(3,500,320);background.y = 50;self.addChild(background);self.viewLayer = new LSprite();self.viewLayer.y = 50;self.addChild(self.viewLayer);}

效果如下。

我设计了几个分类来显示人物的各种属性，如果你在制作自己的游戏的时候，需要按照自己的想法重新设计的话，那么调整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

预告：因为答应了某位同学，所以下一节会直接进入战斗画面了。

《游戏脚本的设计与开发》系列文章目录

http://blog.csdn.net/lufy_legend/article/details/8888787

本章就讲到这里，欢迎继续关注我的博客

转载请注明：转自lufy_legend的博客http://blog.csdn.net/lufy_legend