《游戏脚本的设计与开发》-(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;
	}
};

下面是菜单效果。