上一章介绍了如何读取和解析一个脚本,
其实,对于一个游戏来说,文字的显示和操作是最基本的组成元素之一,本章进入正题,就先从文字显示开始讲解一下。
显示一个文字,就是将文字绘制到游戏界面上,而在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
联系客服