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

标签: HTML5lufylegendRPG脚本游戏
10456人阅读 评论(18) 收藏 举报
分类:

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

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


9
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1546137次
    • 积分:16482
    • 等级:
    • 排名:第641名
    • 原创:87篇
    • 转载:0篇
    • 译文:32篇
    • 评论:2286条
    联系我
    lufy.legend@gmail.com
    偶也微博了
    我写的书
      icon
      系统讲解HTML 5 Canvas的基础知识和高级技巧,深入剖析开源库件lufylegend的原理与使用以实例为向导,详细讲解射击游戏、物理游戏、网络游戏等各类游戏的开发思路和技巧
      qq交流群:298385345
    lufylegend.js游戏引擎官网
    博客专栏
    我开发的游戏
      三国记
    三国记是一款以三国时期为背景的战略类游戏,玩家可以任选一名君主,以统一全国为目标。
      三国记-乱世群雄
    本游戏以三国为背景,本次更新为第一部黄巾之乱的后续剧情,续作了群雄讨伐董卓,界桥之战以及救援徐州等剧情。
      三国记-经典战役版
    本游戏以三国为背景,玩家在游戏中可以体验三国中的四个经典战役,虎牢关之战,官渡之战,赤壁之战,夷陵之战。
    最新评论