文字对象《游戏脚本的设计与开发》-第二章 文字显示[Hello world]
2013-05-20 20:53
197 查看
本文纯属个人见解,是对后面学习的总结,如有描述不正确的地方还请高手指正~
上一章分析了如何读取和剖析一个脚本,
其实,对于一个游戏来说,文字的表现和操作是最基本的构成元素之一,本章进入正题,就先从文字表现开始讲授一下。
表现一个文字,就是将文字绘制到游戏界面上,而在lufylegend.js引擎中,要表现一个文本,只需要将LTextField对象添加到LSprite对象之上。
首先,为了便于操作游戏中的全部对象,我们来新建一个“仓库”LScriptArray,用于保存游戏中各种对象,如下。
其中textList用来保存LTextField文本对象,layerList用来保存LSprite层对象,当然游戏中的对象种类确定不止这么几个,比如图片,按钮等,这些对象等当前的章节中会陆续添加。
修改一下LScript类的构造器,如下
这样,我们就可以通过LGlobal.script.scriptArray获取到游戏中的全部对象了。
在L#脚本中与文字操作相关的脚本语法如下
1,添加一行文字
几个参数如下:
2,转变一行文字的内容
几个参数如下:
3,移除一行文字
参数如下:
接着,修改剖析函数中的switch部份,如下
这样的话,遇到文字操作相关的脚本的话,就会调用ScriptText静态类的analysis函数。
上面看一下ScriptText类和analysis函数
在这个函数里,遇到我定义的三个脚本的时候,就会通过调用三个不同的函数,并将脚本括号内的部份作为参数来停止剖析,我们来一个个的实现这几个函数。
首先是ScriptText.label,如下
来解释一下上面的代码:
将参数分解到lArr数组。
这样就从lArr数组中得到了响应的参数。
得到表现层,在这里只支持“-”这个参数,就是最底层,后面会详细讲授表现层脚本,支持其他参数。
这里是考虑到换行的问题,在设置文字内容的时候,可以应用“\n”来换行。在这里将分割后的字符串用一个个的LTextField对象表现出来,然后将这些LTextField对象压入数组中。
将存有LTextField对象的数组保存进script.scriptArray.textList数组中,最后再调用script.analysis()继续停止剖析。
接着是ScriptText.labelChange,如下
解释下代码
每日一道理
谁说人与人隔着遥远的重洋,谁说心与心设着坚固的堤防?十六岁的鸟儿飞上天空,总会找到落脚的枝头。
这个跟后面一样,是获取参数。
用传入的文字名称来得到保存在script.scriptArray.textList数组中的LTextField对象组。
得到LTextField对象的坐标。
得到LTextField对象的表现层。
为了转变文字内容,我先将被添加的LTextField对象删除。
添加的LTextField对象已经被删除,剩下的就是按照新的文字内容重新添加LtextField对象,所以上面的代码和添加文字是一样的。
最后,再看看ScriptText.removeText,代码如下
删除对象比较简单,和后面ScriptText.labelChange函数中移除部份是一样的。
上面看一下效果如何,
修改Main.ls脚本文件的代码,如下
运行代码,效果如下:
表现多个文字的话,修改Main.ls脚本文件的代码,如下
运行代码,效果如下
上面看看如何修改文字内容,修改Main.ls脚本文件的代码,如下
运行代码,效果如下
最后,看看转变删除文字对象,修改Main.ls脚本文件的代码,如下
运行代码,效果如下
测试连接如下
http://lufylegend.com/demo/test/lsharp/02/index.html
本章为止的lufylegend.lsharp.js源码如下
http://lufylegend.com/demo/test/lsharp/02/lufylegend.lsharp.js
《游戏脚本的设计与开发》系列文章目录
/article/1351040.html
本章就讲到这里,欢迎继续关注我的博客
转载请注明:转自lufy_legend的博客http://blog.csdn.net/lufy_legend
最后广告时间,有奖征集活动系列——【HTML5游戏编程之旅】
/article/1399457.html
欢迎大家参与,有机会得到我的新书《HTML5 Canvas游戏开发实战》一本
文章结束给大家分享下程序员的一些笑话语录:
程序员的愿望
有一天一个程序员见到了上帝.上帝: 小伙子,我可以满足你一个愿望.程序员: 我希望中国国家队能再次打进世界杯.
上帝: 这个啊!这个不好办啊,你还说下一个吧!
程序员: 那好!我的下一个愿望是每天都能休息6个小时以上.
上帝: 还是让中国国家打进世界杯.
上一章分析了如何读取和剖析一个脚本,
其实,对于一个游戏来说,文字的表现和操作是最基本的构成元素之一,本章进入正题,就先从文字表现开始讲授一下。
表现一个文字,就是将文字绘制到游戏界面上,而在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
《游戏脚本的设计与开发》系列文章目录
/article/1351040.html
本章就讲到这里,欢迎继续关注我的博客
转载请注明:转自lufy_legend的博客http://blog.csdn.net/lufy_legend
最后广告时间,有奖征集活动系列——【HTML5游戏编程之旅】
/article/1399457.html
欢迎大家参与,有机会得到我的新书《HTML5 Canvas游戏开发实战》一本
文章结束给大家分享下程序员的一些笑话语录:
程序员的愿望
有一天一个程序员见到了上帝.上帝: 小伙子,我可以满足你一个愿望.程序员: 我希望中国国家队能再次打进世界杯.
上帝: 这个啊!这个不好办啊,你还说下一个吧!
程序员: 那好!我的下一个愿望是每天都能休息6个小时以上.
上帝: 还是让中国国家打进世界杯.
相关文章推荐
- 《游戏脚本的设计与开发》-1.2 文字显示[Hello world]
- 《游戏脚本的设计与开发》-1.5 显示层,绘图
- 《游戏脚本的设计与开发》-1.4 图片的读取显示
- 《游戏脚本的设计与开发》-第五章 显示层,绘图
- 《游戏脚本的设计与开发》-第一部分总结 文字脚本的功能扩展和一个游戏测试
- 《游戏脚本的设计与开发》-第一章总结 文字脚本的功能扩展和一个游戏测试
- 《游戏脚本的设计与开发》-(战棋部分)2.1 快速显示一张战场地图
- 游戏系统开发笔记(六)——对象系统设计
- 《游戏脚本的设计与开发》-(战棋部分)2.2 军队降临战场
- 在线捉鬼游戏开发之二 - 设计业务对象与对象职责划分(3)
- 《游戏脚本的设计与开发》-1.1 读取和解析一个脚本文件
- 《游戏脚本的设计与开发》-(战棋部分)2.4 物理攻击
- 游戏系统开发笔记(七)——对象系统设计
- 学习HTML5开发RPG游戏第四步>游戏对象设计
- 《游戏脚本的设计与开发》-1.6 按钮,脚本的暂停和标签
- 《游戏脚本的设计与开发》-(RPG部分)3.2 地图遮挡和人物行走
- 《游戏脚本的设计与开发》-1.3 基础语法(注释,变量,函数,条件语句)
- Python游戏开发-03-用font对象把日志显示到屏幕上
- 游戏系统开发笔记(七)——对象系统设计
- 《游戏脚本的设计与开发》-(RPG部分)3.1 RPG地图到底怎么做?