《游戏脚本的设计与开发》-(RPG部分)3.5 游戏背包和任务系统

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

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

本节重点来讲一下背包系统，以及简单的先来认识一下任务系统。

先看一下背包系统的效果预览：

背包系统在游戏中是必不可少的，在游戏中,所有获得的物品都会储存在背包里面。背包的种类，我一般将它分成两大类，一种是类似于《吞食天地》的“个人背包”，在游戏中每个人物都有一个背包，每个人的背包都互不影响，并且每个人只能使用自己背包中的物品。另一种是“集体背包”，游戏中所有己方的人物都共用一个背包，大多数游戏都采用这种形势。下面我们就来实现一下“集体背包”。

我们先来做一个按钮，用来打开游戏菜单，按钮的添加很简单，界面如下。

根据我制作《三国记》的经验，游戏菜单的UI需要注意的是，按钮要尽量大一些，否则在手机上就很难被点到。先来创建游戏菜单的相关文件。

控制器MenuController，模型MenuModel和视图MenuView。

https://github.com/lufylegend/lsharp/blob/3.5/Controllers/MenuController.js

https://github.com/lufylegend/lsharp/blob/3.5/Models/MenuModel.js

https://github.com/lufylegend/lsharp/blob/3.5/Views/MenuView.js

关于菜单，我们需要有一个下面这样的背景框

并且这个背景框在其他许多地方也都会被用到，所以我们把它做成一个共同的外部类，如下。

https://github.com/lufylegend/lsharp/blob/3.5/Libraries/window/WindowBackground.js

这个类的实现原理如下，将一个只有左上角的图片，通过分割，旋转，拉伸等操作，组合成一个背景框

也就是说，我们只需要多准备几张类似于如下的图片，就可以实现不同的背景框了。

游戏菜单中的按钮，由图标和文字两部分组成，为了方便，我们也封装一个外部类。

https://github.com/lufylegend/lsharp/blob/3.5/Libraries/button/ButtonText.js

接下来准备好相应的菜单按钮图标，在菜单的视图中添加如下一系列代码。

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

MapController.prototype.openmenuClick = function(){
	var self = this;
	self.loadMvc("Menu",self.openmenuComplete);	
};
MapController.prototype.openmenuComplete = function(){
	var self = this;
	var menu = new MenuController();
	menu.baseView = self.view;
	self.view.parent.addChild(menu.view);
	//移动端的时候，为了提高效率，将地图隐藏
	if(LGlobal.canTouch){
		self.view.visible = false;
	}
};

背包部分我们也为其创建相关的文件。

控制器BackpackController，模型BackpackModel和视图BackpackView。

从文章开头的预览图片中，我们看到恢复用品，武器装备，特殊物品三个按钮其实是tab选项卡，有是否被选中两种状态，所以我们为这个功能封装下面一个类。

https://github.com/lufylegend/lsharp/blob/3.5/Libraries/button/ButtonSelect.js

其中的GetButton是我另创建的一个辅助函数，功能就是返回一个带文字或者不带文字的按钮，代码如下

https://github.com/lufylegend/lsharp/blob/3.5/Helpers/GetButton.js

......
	var closeButton = GetButton(LMvc.datalist["BtnClose01"],null,0);
	closeButton.x = 710;
	closeButton.y = 25;
	self.addChild(closeButton);
	closeButton.addEventListener(LMouseEvent.MOUSE_UP, function(){
		self.controller.closeBackpack();
	});
	
	var recoveryButton = new ButtonSelect("BtnSelect01",{label:"恢复用品",width:180,height:48},1);
	recoveryButton.x = 550;
	recoveryButton.y = 110;
	self.addChild(recoveryButton);
	self.recoveryButton = recoveryButton;
	recoveryButton.addEventListener(LMouseEvent.MOUSE_UP, function(){
		self.controller.recoveryPropsSelect();
	});
......

按钮选项卡的选中和非选中状态，我们只要像下面这样。

specialButton.setSelected(true);

if(specialButton.selected)return;

{
"props1":{
	"Index":1,
	"Name":"包子",
	"Type":"Recovery",
	"Max":99,
	"Icon":1,
	"Hp":30,
	"Mp":0,
	"Force":0,
	"Intelligence":0,
	"Command":0,
	"Agile":0,
	"Luck":0,
	"Introduction":"普通的馒头，可以恢复一点HP。"
	},
"props2":{
	"Index":2,
	"Name":"天书残卷",
	"Type":"Special",
	"Max":1,
	"Icon":2,
	"Introduction":"特殊物品之天书残卷，暂时没有详细介绍。"
	},
"props3":{
	"Index":3,
	"Name":"倚天剑",
	"Type":"Weaponry",
	"Max":1,
	"Icon":3,
	"Introduction":"倚天剑，介绍略。"
	}
}

恢复物品

function PropsRecovery(data){
	var self = this;
	self.index = data.Index;
	self.name = data.Name;
	self.type = data.Type;
	self.icon = data.Icon;
	self.max = data.Max;
	self.count = 1;
	self.data = data;
}

function PropsWeaponry(data){
	var self = this;
	self.index = data.Index;
	self.name = data.Name;
	self.type = data.Type;
	self.icon = data.Icon;
	self.max = data.Max;
	self.count = 1;
	self.data = data;
}

function PropsSpecial(data){
	var self = this;
	self.index = data.Index;
	self.name = data.Name;
	self.type = data.Type;
	self.icon = data.Icon;
	self.max = data.Max;
	self.count = 1;
	self.data = data;
}

LRPGObject.propsList = [];

LRPGObject.addProps = function(index){
	var propsData = LMvc.datalist["props"]["props"+index],i,l,props;
	if(!propsData)return;
	for(i=0,l=LRPGObject.propsList.length;i<l;i++){
		props = LRPGObject.propsList[i];
		if(props.index == propsData.Index){
			if(props.count < props.max){
				props.count = props.count + 1;
				return;
			}
		}
	}
	switch(propsData.Type){
		case "Recovery":
			LRPGObject.propsList.push(new PropsRecovery(propsData));
			break;
		case "Special":
			LRPGObject.propsList.push(new PropsSpecial(propsData));
			break;
		case "Weaponry":
			LRPGObject.propsList.push(new PropsWeaponry(propsData));
			break;
	}
};
LRPGObject.removeProps = function(index){
	var propsData = LMvc.datalist["props"]["props"+index],i,l,props;
	if(!propsData)return;
	for(i=LRPGObject.propsList.length - 1;i>=0;i--){
		props = LRPGObject.propsList[i];
		if(props.index == propsData.Index){
			props.count--;
			if(props.count <= 0){
				LRPGObject.propsList.splice(i,1);
				break;
			}
		}
	}
};

BackpackModel.prototype.propsSelect=function(propsType){
	var self = this,i,l,props;
	self.data.length = 0;
	self.dataIndex = 0;
	for(i=0,l=LRPGObject.propsList.length;i<l;i++){
		props = LRPGObject.propsList[i];
		if(props.type == propsType){
			self.data.push(props);
		}
	}
};

BackpackModel.prototype.getProps=function(){
	var self = this,i,l,props,list=[];
	if(self.dataIndex < 0 || self.dataIndex >= self.data.length){
		return [];
	}
	for(i=self.dataIndex,l=self.data.length>i+self.dataMax?i+self.dataMax:self.data.length;i<l;i++){
		props = self.data[i];
		list.push(props);
	}
	return list;
};

BackpackView.prototype.showProps=function(){
	var self = this,num,l,icon,props;
	var list = self.model.getProps();
	num = 0;
	l = list.length;
	self.propsLayer.die();
	self.propsLayer.removeAllChild();
	for(var i=0;i<3 && num<l;i++){
		for(var j=0;j<2 && num<l;j++){
			props = list[num];
			icon = new PropsIcon(props);
			icon.x = self.propsStartX + 120*i;
			icon.y = self.propsStartY + 135*j;
			self.propsLayer.addChild(icon);
			num++;
		}
	}
};

接下来就是脚本了，我们如何来利用脚本添加或者删除一个物品呢？看下面的脚本。

//添加一个物品，参数：物品序号
	RPGProps.add(1);
	//删除一个物品，参数：物品序号
	RPGProps.remove(2);

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

好了，背包系统，基本上就是这样了。

下面我们来介绍另一个非常重要的功能，就是任务系统，任务系统其实是比较复杂的，涉及到任务列表，任务奖励，任务的不同阶段的判定等等，这些我们后面会单独写一篇来详细讲解，本次先来利用现有的变量功能来完成一个简单的任务功能。
我假设关羽借了酒店老板一样东西，自己又懒得去还，想让刘备当个跑腿儿的，去帮忙把书还上，然后刘备拿着这个东西去还给酒店老板，然后老板给了刘备两个包子作为奖励。
在这一过程中，我们首先需要判断是否有任务，任务是否在进行中，任务是否已经结束等。

看下面点击关羽时的脚本

function characterclick2();
	if(@task1000==1);  
		RPGTalk.set(2,0,你知道lufy吗，听说那家伙除了做游戏，啥都不会。);
		RPGTalk.set(1,0,怪不得啊，哈哈哈。);
	elseif(@task1001==1);  
		RPGTalk.set(2,0,《天书残卷》交给酒店老板了吗？); 
	else;  
		RPGTalk.set(2,0,这本《天书残卷》是我前两天从酒店老板那里借来的，你能帮我还回去吗？); 
		RPGTalk.set(1,0,好啊，我正想去酒店喝点儿酒呢。);
		RPGProps.add(2);
		Var.set(task1001,1); 
		RPGMessageBox.show(得到了《仙书残卷》。请到酒店把它交给酒店老板吧。);
	endif; 
endfunction;

再看点击酒店老板的脚本。

function characterclick6();
	RPGTalk.set(6,0,欢迎光临小店，客官要点儿什么？);
	if(@task1001==1);
		RPGTalk.set(1,0,关羽让我把这本《天书残卷》还给你。);
		RPGTalk.set(6,0,哎呀，太谢谢了，我正想去跟他要呢。);
		RPGProps.remove(2);
		Var.set(task1000,1); 
		Var.set(task1001,2); 
		RPGProps.add(1);
		RPGProps.add(1);
		RPGMessageBox.show(获得奖励：两个包子。);
	else;
		RPGTalk.set(1,0,我比较关心那边弹琴的美女是谁。);
		RPGTalk.set(6,0,她天下第一美女貂蝉啊。);
	endif;
endfunction;

MessageBox的代码如下

https://github.com/lufylegend/lsharp/blob/3.5/Helpers/MessageBox.js

脚本解析部分

/*
* LRPGMessageBoxScript.js
**/
LRPGMessageBoxScript = function(){};
LRPGMessageBoxScript.analysis=function(value){
	var start = value.indexOf("(");
	var end = value.indexOf(")");
	switch(value.substr(0,start)){
		case "RPGMessageBox.show":
			LRPGMessageBoxScript.show(value,start,end);
			break;
		default:
			LGlobal.script.analysis();
	}
};
LRPGMessageBoxScript.show = function (value,start,end){
	var params = value.substring(start+1,end).split(",");
	MessageBox.show(params[0]);
};

https://github.com/lufylegend/lsharp/blob/3.5/Libraries/Character.js

https://github.com/lufylegend/lsharp/blob/3.5/Libraries/Action.js

这样就可以根据实际的图片，在chara.json里定义相关的参数了

https://github.com/lufylegend/lsharp/blob/3.5/script/initialization/chara.json

比如刘备

"peo1":{
	"Index":1,
	"Name":"刘备",
	"Face":1,
	"R":1,
	"RRect":[140,95,40,90],
	"Introduction":"刘备即蜀汉昭烈帝，字玄德，汉中山靖王刘胜的后代，三国时期蜀汉开国皇帝。"
	}

另外默认的每贞动作图片的大小是320x240，如果你的图片大小不一样，那还需要定义一下图片的大小，比如下面这样

"peo8":{
	"Index":8,
	"Name":"测试",
	"Face":3,
	"R":6,
	"RRect":[10,6,50,82],
	"RWidth":70,
	"RHeight":92,
	"Introduction":"测试"
	}

好了，还是自己测试一下效果吧。

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

最后，给出本次的代码下载：

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

预告：下次讲一下人物列表和人物属性，为战斗画面做准备。

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

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

《游戏脚本的设计与开发》-(RPG部分)3.5 游戏背包和任务系统,布布扣,bubuko.com

《游戏脚本的设计与开发》-(RPG部分)3.5 游戏背包和任务系统

原文：http://blog.csdn.net/lufy_legend/article/details/21942227