《游戏脚本的设计与开发》-1.4 图片的读取显示

本章来实现一下如何用脚本来读取一张图片，将其显示到画面中，并且对图片进行一些缓动变换等操作。

本章预备实现一下几个脚本

/*
游戏脚本的设计与开发 第四章
*/
//读取图片数据
Load.img(backdata,lufy_legend.jpg);
显示图片
Img.add(-,backimg01,backdata,0,0,100,100,1);
对图片进行缓动操作
Img.transition(backimg01,{x:350},1,Strong.easeOut);

1，如何读取一张图片

看下面脚本

/*
游戏脚本的设计与开发 第四章
*/
Load.img(backdata,lufy_legend.jpg);

之前我用脚本中的Load类实现了脚本文件的读取，为了将Load类作为专用的读取类，现在我依然用它来完成一张图片的读取，首先在ScriptLoad.analysis函数中将Load.img分析出来：

ScriptLoad.analysis = function (value){
	var start = value.indexOf("(");
	var end = value.indexOf(")");
	ScriptLoad.data = value.substring(start+1,end).split(",");
	switch(LMath.trim(value.substr(0,start))){
		case "Load.img":
			ScriptLoad.loadImg();
			break;
		case "Load.script":
			ScriptLoad.loadScript();
			break;
		default:
			LGlobal.script.analysis();
	}
};

下面关键看ScriptLoad.loadImg()函数，在lufylegend.js中，读取图片，当然是要用LLoader类了，看下面

ScriptLoad.loadImg = function (){
	ScriptLoad.loader = new LLoader();
	ScriptLoad.loader.addEventListener(LEvent.COMPLETE,ScriptLoad.loadImgOver);
	ScriptLoad.loader.load(ScriptLoad.data[1],"bitmapData");
};

因为在ScriptLoad.analysis函数中，我已经将参数都保存在了ScriptLoad.data中，两个参数一个是读取后用来保存图片的名字，另一个是图片的路径，所以上面的ScriptLoad.data[1]就是图片的路径了，图片读取完之后调用ScriptLoad.loadImgOver函数，将图片保存起来，看下面代码。

ScriptLoad.loadImgOver = function (event){
	var script = LGlobal.script;
	script.scriptArray.bitmapdataList[ScriptLoad.data[0]] = new LBitmapData(ScriptLoad.loader.content);
	ScriptLoad.loader.imgLoader = null;
	script.analysis();
};

这里将读取到的图片保存为LBitmapData对象，并保存在scriptArray.bitmapdataList数组里，当然一开始你要把这个数组定义在LScriptArray这个仓库里，如下。

/*
* LScriptArray.js
**/
function LScriptArray(){
	var self = this;
	//用来保存LTextField对象
	self.textList = new Array();
	//用来保存LSprite对象
	self.layerList = new Array();
	//用来保存变量
	self.varList = new Array();
	//用来保存函数
	self.funList = new Array();
	//用来保存LBitmapData对象
	self.bitmapdataList = new Array();
	//用来保存LBitmap对象
	self.imgList = new Array();
}

成功读取图片并保存后，就可以用下面的脚本来显示一张图片了。

/*
游戏脚本的设计与开发 第四章
*/
Img.add(-,backimg01,backdata,0,0,100,100,1);

几个参数分别为：显示层，所添加LBitmap对象的名称，所使用LBitmapData对象的名称，坐标x，坐标y，长，宽，透明度

解析函数中的switch部分肯定要修改了，如下

switch(sarr[0]){
	case "Load":
		ScriptLoad.analysis(lineValue);
		break;
	case "Text":
		ScriptText.analysis(lineValue);
		break;
	case "Var":
		ScriptVarlable.analysis(lineValue);
		break;
	case "Call":
		ScriptFunction.analysis(lineValue);
		break;
	case "Img":
		ScriptImg.analysis(lineValue);
		break;
	default:
		if(lineValue.indexOf("if") >= 0){
			ScriptIF.getIF(lineValue);
		}else if(lineValue.indexOf("function") >= 0){
			ScriptFunction.setFunction(lineValue);
		}else{
			self.analysis();
		}
}

可以看到，当遇到Img脚本的时候，会调用ScriptImg类的解析函数，这个函数代码如下

/*
* ScriptImg.js
**/
var ScriptImg = function (){};
ScriptImg.analysis = function (value,start,end){
	
	var start = value.indexOf("(");
	var end = value.indexOf(")");
	switch(value.substr(0,start)){
		case "Img.add":
			ScriptImg.addImg(value,start,end);
			break;
	}
};

下面看看在ScriptImg.addImg函数中，如何来添加一个图片，代码如下

ScriptImg.addImg = function (value,start,end){
	var script = LGlobal.script;
	var layer;
	//分解参数
	var lArr = value.substring(start+1,end).split(",");
	var layerStr = lArr[0];
	var nameStr = lArr[1];
	var dataStr = lArr[2];
	var bitdata;
	//获取LBitmapData对象
	bitdata = script.scriptArray.bitmapdataList[dataStr];
	var xInt = parseFloat(lArr[3]);
	var yInt = parseFloat(lArr[4]);
	var wNum;
	var hNum;
	//得到宽（非必须）
	if(lArr.length > 5){
		wNum = parseFloat(lArr[5]);
	}
	//得到高（非必须）
	if(lArr.length > 6){
		hNum = parseFloat(lArr[6]);
	}
	var alphaNum = 1;
	//得到透明度，默认是1（非必须）
	if(lArr.length > 7){
		alphaNum = parseFloat(lArr[7]);
	}
	//获取LSprite显示层
	layer = script.scriptArray.layerList[layerStr];
	var bitmap = new LBitmap(bitdata);
	//如果设置了宽，则通过scaleX计算LBitmap的宽
	if(wNum)bitmap.scaleX = wNum/bitdata.width;
	//如果设置了高，则通过scaleX计算LBitmap的高
	if(hNum)bitmap.scaleY = hNum/bitdata.height;
	//设置透明度
	bitmap.alpha = alphaNum;
	//设置坐标
	bitmap.x = xInt;
	bitmap.y = yInt;
	bitmap.name = nameStr;
	//将LBitmap对象保存到imgList数组
	script.scriptArray.imgList[nameStr] = bitmap;
	layer.addChild(bitmap);
	script.analysis();
};

首先，通过用逗号对括号内部分字符串的分解，得到相应的参数，然后新建LBitmap对象，并保存到imgList数组，详细做法都在上面的代码上添加了注释。

接下来，将Main.ls修改如下

//读取图片数据
Load.img(backdata,lufy_legend.jpg);
//显示图片
Img.add(-,backimg01,backdata,0,0,100,100,1);

运行程序，即可得到下面效果

2，对图片进行缓动变换

游戏中，光显示图片显然是不够的，要对图片做各种处理，坐标变换，旋转，渐显，渐退等操作，下面来实现一下这些操作的脚本，脚本格式如下。

Img.transition(backimg01,{x:350},1,Strong.easeOut,type);

几个参数分别为，所操作LBitmap对象的名称，操作内容，变换所需时间，缓动种类（缓动种类可以参照LTweenLite）,是否立即执行下一行脚本（如果不设置，则缓动结束后才开始执行下一行脚本）

下面来实现一下这个脚本，首先扩展下Img的解析函数中的switch部分

ScriptImg.analysis = function (value,start,end){
	
	var start = value.indexOf("(");
	var end = value.indexOf(")");
	switch(value.substr(0,start)){
		case "Img.add":
			ScriptImg.addImg(value,start,end);
			break;
		case "Img.transition":
			ScriptImg.transition(value,start,end);
			break;
	}
};

下面看ScriptImg.transition函数部分

ScriptImg.transition = function (value,start,end){
	var script = LGlobal.script;
	
	var lArr = value.substring(start+1,end).split(",");
	var nameStr = lArr[0];
	//将json对象还原
	var toObj = eval('(' + lArr[1] + ')');
	//获取缓动时间
	var time = parseFloat(lArr[2]);
	var eases = lArr[3].split(".");
	var runNow = false;
	//是否立即执行下一行脚本
	if(lArr.length > 4){
		runNow = (lArr[4] == "1");
	}
	toObj["ease"] = LEasing[eases[0]][eases[1]];
	if(!runNow){
		toObj["onComplete"] = function(){
			script.analysis();
		};
	}
	LTweenLite.to(script.scriptArray.imgList[nameStr],time,toObj);  
	//如果runNow为1，则立即执行下一行脚本
	if(runNow)script.analysis();
};

好了，因为使用了lufylegend.js引擎中的缓动类LTweenLite，所以缓动操作十分简单。需要注意的是这里只能使用一种操作缓动操作，多种缓动操作的话，应该分为多行脚本来实现，下面修改Main.ls为

Load.img(backdata,lufy_legend.jpg);
Img.add(-,backimg01,backdata,0,0,100,100,1);
Img.transition(backimg01,{x:350},1,Strong.easeOut,1);
Img.transition(backimg01,{y:200},1,Strong.easeOut,1);
Img.add(-,backimg02,backdata,50,50,50,50,0.5);
Img.transition(backimg02,{y:200},1,Strong.easeOut,1);
Img.transition(backimg02,{scaleX:1},1,Strong.easeOut);
Img.add(-,backimg03,backdata,200,50,200,200,0.5);

运行程序，可以看到各种缓动效果，如下

测试连接如下

http://lufylegend.com/demo/test/lsharp/04/index.html

本章为止的lufylegend.lsharp.js源码如下

http://lufylegend.com/demo/test/lsharp/04/lufylegend.lsharp.js

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

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

本章就介绍这么多了，下一章介绍如何使用脚本来实现分层操作以及利用脚本在界面上绘制矩形，圆形等各种图形。

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

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