文字对象《游戏脚本的设计与开发》-第二章 文字显示[Hello world]

本文纯属个人见解，是对后面学习的总结，如有描述不正确的地方还请高手指正~

    上一章分析了如何读取和剖析一个脚本，

    其实，对于一个游戏来说，文字的表现和操作是最基本的构成元素之一，本章进入正题，就先从文字表现开始讲授一下。

    表现一个文字，就是将文字绘制到游戏界面上，而在lufylegend.js引擎中，要表现一个文本，只需要将LTextField对象添加到LSprite对象之上。

    首先，为了便于操作游戏中的全部对象，我们来新建一个“仓库”LScriptArray，用于保存游戏中各种对象，如下。

/*
* LScriptArray.js
**/
function LScriptArray(){
	var self = this;
	self.textList = new Array();
	self.layerList = new Array();
}

    其中textList用来保存LTextField文本对象，layerList用来保存LSprite层对象，当然游戏中的对象种类确定不止这么几个，比如图片，按钮等，这些对象等当前的章节中会陆续添加。

    修改一下LScript类的构造器，如下

function LScript(scriptLayer,value){
	var self = this;
	LGlobal.script = self;
	self.scriptLayer = scriptLayer;
	self.scriptArray = new LScriptArray();
	self.scriptArray.layerList["-"] = scriptLayer;
	self.dataList = new Array();
	var arr=[value];
	self.dataList.unshift(arr);
	self.toList(value);
}

    这样，我们就可以通过LGlobal.script.scriptArray获取到游戏中的全部对象了。

    在L#脚本中与文字操作相关的脚本语法如下

    1，添加一行文字

Text.label(-,txt01,Hello World,0,0,30,#000000);

    几个参数如下：

表现层，文字名称，文字内容，文字坐标x，文字坐标y，文字大小，文字颜色

    2，转变一行文字的内容

Text.labelChange(txt03,Hello Change,40,#FF0000);

    几个参数如下：

文字名称，文字内容，文字大小，文字颜色

    3，移除一行文字

Text.remove(txt02);

    参数如下：

文字名称

    接着，修改剖析函数中的switch部份，如下

switch(sarr[0]){
	case "Load":
		ScriptLoad.analysis(lineValue);
		break;
	case "Text":
		ScriptText.analysis(lineValue);
		break;
	default:
		self.analysis();
}

    这样的话，遇到文字操作相关的脚本的话，就会调用ScriptText静态类的analysis函数。

    上面看一下ScriptText类和analysis函数

/*
* ScriptText.js
**/
var ScriptText = function (){};
ScriptText.analysis = function (value){
	var start = value.indexOf("(");
	var end = value.indexOf(")");
	switch(LMath.trim(value.substr(0,start))){
		case "Text.label":
			ScriptText.label(value,start,end);
			break;
		case "Text.labelChange":
			ScriptText.labelChange(value,start,end);
			break;
                case "Text.remove":
                        ScriptText.removeText(value,start,end);
			break;
		default:
			LGlobal.script.analysis();
	}
};

    在这个函数里，遇到我定义的三个脚本的时候，就会通过调用三个不同的函数，并将脚本括号内的部份作为参数来停止剖析，我们来一个个的实现这几个函数。

    首先是ScriptText.label，如下

ScriptText.label = function (value,start,end){
	var script = LGlobal.script;
	var lArr = value.substring(start+1,end).split(",");
	var layer,label,i;
	var layerStr = lArr[0];
	var nameStr = lArr[1];
	var textStr = lArr[2];
	layer = script.scriptArray.layerList[layerStr];
	var textArr = textStr.split("\\n");
	var textList = new Array();
	for(i=0;i<textArr.length;i++){
		label = new LTextField();
		label.size = lArr[5]-4;
		label.color = lArr[6];
		label.text = textArr[i];
		label.x = parseInt(lArr[3]);
		label.y = parseInt(lArr[4]) + label.getHeight()* i ;
		label.name = nameStr;
		layer.addChild(label);
		textList.push(label);
	}
	script.scriptArray.textList[nameStr] = textList;
	script.analysis();
};

    来解释一下上面的代码：

var lArr = value.substring(start+1,end).split(",");

    将参数分解到lArr数组。

var layerStr = lArr[0];
var nameStr = lArr[1];
var textStr = lArr[2];

    这样就从lArr数组中得到了响应的参数。

layer = script.scriptArray.layerList[layerStr];

    得到表现层，在这里只支持“-”这个参数，就是最底层，后面会详细讲授表现层脚本，支持其他参数。

var textArr = textStr.split("\\n");
var textList = new Array();
for(i=0;i<textArr.length;i++){
	label = new LTextField();
	label.size = lArr[5]-4;
	label.color = lArr[6];
	label.text = textArr[i];
	label.x = parseInt(lArr[3]);
	label.y = parseInt(lArr[4]) + label.getHeight()* i ;
	label.name = nameStr;
	layer.addChild(label);
	textList.push(label);
}

    这里是考虑到换行的问题，在设置文字内容的时候，可以应用“\n”来换行。在这里将分割后的字符串用一个个的LTextField对象表现出来，然后将这些LTextField对象压入数组中。

script.scriptArray.textList[nameStr] = textList;
script.analysis();

    将存有LTextField对象的数组保存进script.scriptArray.textList数组中，最后再调用script.analysis()继续停止剖析。

    接着是ScriptText.labelChange，如下

ScriptText.labelChange = function (value,start,end){
	var script = LGlobal.script,i;
	var lArr = value.substring(start+1,end).split(",");
	var nameStr = lArr[0];
	var textStr = lArr[1];
	var textList = script.scriptArray.textList[nameStr];
	var x = textList[0].x;
	var y = textList[0].y;
	layer = textList[0].parent;
	for(i=0;i<textList.length;i++){
		label = textList[i];
		label.parent.removeChild(label);
	}
	textList = new Array();
	textArr = textStr.split("\\n");
	for(i=0;i<textArr.length;i++){
		label = new LTextField();
		label.size = lArr[2];
		label.color = lArr[3];
		label.text = textArr[i];
		label.x = x;
		label.y = y + label.getHeight()* i ;
		label.name = nameStr;
		layer.addChild(label);
		textList.push(label);
	}
	script.scriptArray.textList[nameStr] = textList;
	script.analysis();
};

    解释下代码

var lArr = value.substring(start+1,end).split(",");
var nameStr = lArr[0];
var textStr = lArr[1];

    每日一道理
谁说人与人隔着遥远的重洋，谁说心与心设着坚固的堤防？十六岁的鸟儿飞上天空，总会找到落脚的枝头。

    这个跟后面一样，是获取参数。

var textList = script.scriptArray.textList[nameStr];

    用传入的文字名称来得到保存在script.scriptArray.textList数组中的LTextField对象组。

var x = textList[0].x;
var y = textList[0].y;

    得到LTextField对象的坐标。

layer = textList[0].parent;

    得到LTextField对象的表现层。

for(i=0;i<textList.length;i++){
	label = textList[i];
	label.parent.removeChild(label);
}

    为了转变文字内容，我先将被添加的LTextField对象删除。

textList = new Array();
textArr = textStr.split("\\n");
for(i=0;i<textArr.length;i++){
	label = new LTextField();
	label.size = lArr[2];
	label.color = lArr[3];
	label.text = textArr[i];
	label.x = x;
	label.y = y + label.getHeight()* i ;
	label.name = nameStr;
	layer.addChild(label);
	textList.push(label);
}
script.scriptArray.textList[nameStr] = textList;
script.analysis();

    添加的LTextField对象已经被删除，剩下的就是按照新的文字内容重新添加LtextField对象，所以上面的代码和添加文字是一样的。

    最后，再看看ScriptText.removeText，代码如下

ScriptText.removeText = function (value,start,end){
	var lArr = value.substring(start+1,end).split(",");
	var nameStr = lArr[0];
	var script = LGlobal.script;
	var textList = script.scriptArray.textList[nameStr];
	if(textList == null){
		script.analysis();
		return;
	}
	for(i=0;i<textList.length;i++){
		label = textList[i];
		label.parent.removeChild(label);
	}
	script.scriptArray.textList[nameStr] = null;
	script.analysis();
};

    删除对象比较简单，和后面ScriptText.labelChange函数中移除部份是一样的。

    上面看一下效果如何，

    修改Main.ls脚本文件的代码，如下

Text.label(-,txt01,Hello World,0,0,30,#000000);

    运行代码，效果如下：

    

    表现多个文字的话，修改Main.ls脚本文件的代码，如下

Text.label(-,txt01,Hello World,0,0,30,#000000);
Text.label(-,txt02,Hello World,0,50,30,#000000);
Text.label(-,txt03,Hello World,0,100,30,#000000);

    运行代码，效果如下

    

    上面看看如何修改文字内容，修改Main.ls脚本文件的代码，如下

Text.label(-,txt01,Hello World,0,0,30,#000000);
Text.label(-,txt02,Hello World,0,50,30,#000000);
Text.label(-,txt03,Hello World,0,100,30,#000000);
Text.labelChange(txt03,Hello \nChange,40,#FF0000);

    运行代码，效果如下

    

    最后，看看转变删除文字对象，修改Main.ls脚本文件的代码，如下

Text.label(-,txt01,Hello World,0,0,30,#000000);
Text.label(-,txt02,Hello World,0,50,30,#000000);
Text.label(-,txt03,Hello World,0,100,30,#000000);
Text.labelChange(txt03,Hello \nChange,40,#FF0000);
Text.remove(txt02);

    运行代码，效果如下

    

    测试连接如下

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

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

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

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

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

    

    

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

 

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

    

    

最后广告时间，有奖征集活动系列——【HTML5游戏编程之旅】

    

http://blog.csdn.net/blogdevteam/article/details/8899926
欢迎大家参与，有机会得到我的新书《HTML5 Canvas游戏开发实战》一本

文章结束给大家分享下程序员的一些笑话语录： 程序员的愿望
　　有一天一个程序员见到了上帝.上帝: 小伙子,我可以满足你一个愿望.程序员: 我希望中国国家队能再次打进世界杯.
　　上帝: 这个啊!这个不好办啊,你还说下一个吧!
　　程序员: 那好!我的下一个愿望是每天都能休息6个小时以上.
　　上帝: 还是让中国国家打进世界杯.