《游戏脚本的设计与开发》

按钮

按钮在任何程序中都是必不可少的，本次先来看看如何脚本来实现按钮的各种功能。文章中要实现的几个脚本如下。

[ruby] view plaincopy

1. /*  
2. 游戏脚本的设计与开发 第六章  
3. */  
4. //添加按钮  
5. Button.add(layer01,button01,null,50,50,ok_button_up,ok_button_over,null);  
6. function function_test01();  
7.     //移除按钮  
8.     Button.remove(button01);  
9. endfunction;  
10. //移除显示层  
11. Layer.remove(layer01);  
12. //给按钮添加点击事件  
13. Button.mousedown(button01,function_test01);  

下面是ScriptButton类的完整代码，用来实现上述脚本的解析

[javascript] view plaincopy

1. /* 
2. * ScriptButton.js 
3. **/  
4. var ScriptButton = function (){};  
5. ScriptButton.analysis = function (value){  
6.     var start = value.indexOf("(");  
7.     var end = value.indexOf(")");  
8.     switch(value.substr(0,start)){  
9.         case "Button.add"://添加按钮  
10.             ScriptButton.addButton(value,start,end);  
11.             break;  
12.         case "Button.remove"://删除按钮  
13.             ScriptButton.removeButton(value,start,end);  
14.             break;  
15.         case "Button.mousedown"://鼠标按下事件  
16.             ScriptButton.mouseevent(value,start,end,LMouseEvent.MOUSE_DOWN);  
17.             break;  
18.         case "Button.mouseup"://鼠标弹起事件  
19.             ScriptButton.mouseevent(value,start,end,LMouseEvent.MOUSE_UP);  
20.             break;  
21.         case "Button.mousemove"://鼠标移动事件  
22.             ScriptButton.mouseevent(value,start,end,LMouseEvent.MOUSE_MOVE);  
23.             break;  
24.         default:  
25.             LGlobal.script.analysis();  
26.               
27.     }  
28. };  
29. /** 
30. 添加按钮脚本解析 
31. Button.add(layer01,button01,null,50,50,ok_button_up,ok_button_over,null); 
32. */  
33. ScriptButton.addButton = function (value,start,end){  
34.     var script = LGlobal.script;  
35.     var layer;  
36.     //获取参数  
37.     var lArr = value.substring(start+1,end).split(",");  
38.     var layerStr = lArr[0];//显示层名称  
39.     var nameStr = lArr[1];//按钮名称  
40.     var labelStr = lArr[2];//按钮上的文字，如果设置为null，则不显示文字  
41.     var x = parseInt(lArr[3]);//按钮坐标  
42.     var y = parseInt(lArr[4]);//按钮坐标  
43.     var dataUp = lArr[5];//按钮弹起样式的bitmapData对象名称  
44.     var dataOver = lArr[6];//按钮点击后样式的bitmapData对象名称  
45.     //获取按钮弹起和按下的样式的bitmapData对象  
46.     var upimg = script.scriptArray.bitmapdataList[dataUp];  
47.     var overimg = script.scriptArray.bitmapdataList[dataOver];  
48.     //按钮弹起状态LSprite  
49.     var upLayer = new LSprite();  
50.     upLayer.addChild(new LBitmap(upimg));  
51.     //按钮按下状态LSprite  
52.     var overLayer = new LSprite();  
53.     overLayer.addChild(new LBitmap(overimg));  
54.     //如果设置了按钮文字，则开始在按钮上添加一个LTextField对象来显示文字  
55.     if(labelStr && labelStr != "null"){  
56.         var upText = new LTextField();  
57.         upText.text = labelStr;  
58.         upText.size = upimg.height * 0.5;  
59.         upText.x = (upimg.width - upText.getWidth())*0.5;  
60.         upText.y = upimg.height * 0.2;  
61.         upLayer.addChild(upText);  
62.         var overText = new LTextField();  
63.         overText.text = labelStr;  
64.         overText.size = upimg.height * 0.5;  
65.         overText.x = (upimg.width - upText.getWidth())*0.5+2;  
66.         overText.y = upimg.height * 0.2+2;  
67.         overLayer.addChild(overText);  
68.         //按钮的文字颜色  
69.         if(lArr.length > 7){  
70.             upText.color = lArr[7];  
71.             overText.color = lArr[7];  
72.         }  
73.     }  
74.     //利用按钮的两个状态，新建一个LButton按钮对象  
75.     var btn = new LButton(upLayer,overLayer);  
76.     btn.x = x;  
77.     btn.y = y;  
78.     //得到显示层  
79.     layer = script.scriptArray.layerList[layerStr];  
80.     //保存按钮  
81.     script.scriptArray.btnList[nameStr] = btn;  
82.     btn.name = nameStr;  
83.     //将按钮添加到显示层  
84.     layer.addChild(btn);  
85.     script.analysis();  
86. };  
87. /** 
88. 删除按钮脚本解析 
89. Button.remove(button01); 
90. */  
91. ScriptButton.removeButton = function(value,start,end){  
92.     //获取参数  
93.     var lArr = value.substring(start+1,end).split(",");  
94.     var nameStr = lArr[0];//按钮名称  
95.     var script = LGlobal.script;  
96.     //获取按钮  
97.     var btn = script.scriptArray.btnList[nameStr];  
98.     //如果按钮不存在，则解析下一行脚本  
99.     if(btn == null){  
100.         script.scriptArray.btnList[nameStr] = null;  
101.         script.analysis();  
102.         return;  
103.     }  
104.     //移除按钮  
105.     btn.parent.removeChild(btn);  
106.     script.scriptArray.btnList[nameStr] = null;  
107.     script.analysis();  
108. }；  
109. /** 
110. 按钮事件脚本解析 
111. Button.mousedown(button01,function_test01); 
112. */  
113. ScriptButton.mouseevent = function (value,start,end,e){  
114.     var script = LGlobal.script;  
115.     //获取参数  
116.     var lArr = value.substring(start+1,end).split(",");  
117.     var nameStr = lArr[0];//按钮名称  
118.     var funStr = lArr[1];//函数名称  
119.     //获取按钮  
120.     var btn = script.scriptArray.btnList[nameStr];  
121.     //添加匿名函数，然后匿名函数中利用Call脚本类来调用相应的函数  
122.     var fun = function(event){  
123.         ScriptFunction.analysis("Call." + funStr + "();");  
124.     };  
125.     //为按钮添加事件  
126.     btn.addEventListener(e,fun);  
127.     script.analysis();  
128. };  

我在上面的代码中添加了非常详细的代码，基本上不用我再多解释什么了，下面来看看这些脚本的使用，修改Main.ls如下。

[ruby] view plaincopy

1. Layer.add(-,layer01,100,100);  
2. Layer.add(-,layer02,20,50);  
3. Text.label(layer02,txt01,点击下面按钮，被点击按钮就会消失,0,0,30,#000000);  
4. Load.img(ok_button_over,ok_button_over.png);  
5. Load.img(ok_button_up,ok_button_up.png);  
6. //添加按钮  
7. Button.add(layer01,button01,null,50,50,ok_button_up,ok_button_over);  
8. Button.add(layer01,button02,测试1,150,50,ok_button_up,ok_button_over,#880000);  
9. Button.add(layer01,button03,测试2,250,50,ok_button_up,ok_button_over,#008800);  
10. //声明函数，以备按钮事件使用  
11. function function_test01();  
12.     //移除按钮  
13.     Button.remove(button01);  
14. endfunction;  
15. function function_test02();  
16.     Button.remove(button02);  
17. endfunction;  
18. function function_test03();  
19.     Button.remove(button03);  
20. endfunction;  
21. //给按钮添加点击事件  
22. Button.mousedown(button01,function_test01);  
23. Button.mousedown(button02,function_test02);  
24. Button.mousedown(button03,function_test03);  

测试连接

http://lufylegend.com/demo/test/lsharp/06/index01.html

上面的测试中，我利用脚本添加了三个按钮，并且给这三个按钮分别添加了点击事件，点击按钮后，被点击的按钮就会被移除。

脚本暂停

在游戏脚本运行过程中，如果脚本没有暂停功能，不间断的进行解析，那么就完全不受控制了，脚本什么时候运行结束了，整个程序也就结束了。这显然是不符合我们的意愿的，而且在游戏中，也尝尝会遇到一种情况，就是点击鼠标后才继续进行下面程序，这就要用到脚本暂停了，就是脚本执行到某一行后暂停解析，等待用户的命令，然后才进行下一行的脚本解析。

下面尝试定义的脚本，如下

[ruby] view plaincopy

1. //暂停1秒  
2. Wait.time(1000);  
3. //等待点击  
4. Wait.click();  
5. //等待运行控制脚本的执行  
6. Wait.ctrl();  
7. //结束Wait.ctrl，继续进行解析  
8. Wait.play();  

下面是完整的ScriptWait.js类，用来解析暂停脚本相关的各种操作。

[javascript] view plaincopy

1. /* 
2. * ScriptWait.js 
3. **/  
4. var ScriptWait = function (){};  
5. ScriptWait.analysis = function (value){  
6.     var start = value.indexOf("(");  
7.     var end = value.indexOf(")");  
8.     switch(value.substr(0,start)){  
9.         case "Wait.click"://暂停，等待点击鼠标  
10.             ScriptWait.waitclick();  
11.             break;  
12.         case "Wait.ctrl"://暂停，等待运行脚本  
13.              if(int(value.substring(start + 1,end)) > 0)LGlobal.script.lineList.unshift("Wait.ctrl()");  
14.             break;  
15.         case "Wait.play"://脚本继续运行  
16.             LGlobal.script.analysis();  
17.             break;  
18.         case "Wait.time"://脚本暂停一段时间  
19.             ScriptWait.timeId = setTimeout(function(){  
20.                 ScriptWait.timeId = null;  
21.                 LGlobal.script.analysis();  
22.             }, 1000);  
23.             break;  
24.         case "Wait.clickOver"://结束等待点击脚本（Wait.click）  
25.             LGlobal.script.scriptLayer.removeEventListener(LMouseEvent.MOUSE_UP,ScriptWait.clickEvent);  
26.             LGlobal.script.analysis();  
27.             break;  
28.         case "Wait.timeOver"://结束时间暂停脚本（Wait.time）  
29.             ScriptWait.timeOver();  
30.             break;  
31.         case "Wait.Over"://结束所有暂停脚本  
32.             LGlobal.script.scriptLayer.removeEventListener(LMouseEvent.MOUSE_UP,ScriptWait.clickEvent);  
33.             ScriptWait.timeOver();  
34.             break;  
35.         default:  
36.             LGlobal.script.analysis();  
37.     }  
38. };  
39. /* 
40. * 结束时间暂停脚本（Wait.time） 
41. **/  
42. ScriptWait.timeOver = function (){  
43.     if(ScriptWait.timeId){  
44.         clearTimeout(ScriptWait.timeId);  
45.         ScriptWait.timeId = null;  
46.     }  
47.     LGlobal.script.analysis();  
48. };  
49. /* 
50. * 暂停，等待点击鼠标 
51. **/  
52. ScriptWait.waitclick = function (){  
53.     var layer = LGlobal.script.scriptLayer;  
54.     //添加一个鼠标点击事件，当鼠标点击屏幕的时候，调用clickEvent函数，开始运行脚本  
55.     layer.addEventListener(LMouseEvent.MOUSE_UP,ScriptWait.clickEvent);  
56. };  
57. /* 
58. * 鼠标点击运行脚本 
59. **/  
60. ScriptWait.clickEvent = function (event){  
61.     LGlobal.script.scriptLayer.removeEventListener(LMouseEvent.MOUSE_UP,ScriptWait.clickEvent);  
62.     LGlobal.script.analysis();  
63. };  

上面的代码同样加了详细的注释，下面来测试一下这几个脚本，修改脚本文件如下

[ruby] view plaincopy

1. Layer.add(-,layer01,20,20);  
2. Text.label(layer01,txt01,暂停测试，请等待一秒钟,0,0,20,#000000);  
3. Wait.time(1000);  
4. Text.label(layer01,txt01,一秒钟结束，请点击一下屏幕,0,30,20,#000000);  
5. Wait.click();  
6. Text.label(layer01,txt01,你点击了屏幕，脚本继续,0,60,20,#000000);  
7. Load.img(ok_button_over,ok_button_over.png);  
8. Load.img(ok_button_up,ok_button_up.png);  
9. Button.add(layer01,button01,null,50,200,ok_button_up,ok_button_over);  
10. function function_test01();  
11.     Wait.play();  
12. endfunction;  
13. Button.mousedown(button01,function_test01);  
14. Text.label(layer01,txt01,脚本暂停，你可以点击OK按钮来继续解析脚本,0,90,20,#000000);  
15. Wait.ctrl();  
16. Button.remove(button01);  
17. Text.label(layer01,txt01,脚本结束,0,120,20,#000000);  

测试连接如下

http://lufylegend.com/demo/test/lsharp/06/index02.html

可以看到，上述的各种脚本，都在程序中正常运行了。

标签

标签功能，类似于某些程序中的go语句，就是直接跳到某个代码的位置，然后开始继续执行，下面我依然在脚本中实现以下这个功能，先来定义两个脚本，如下。

[ruby] view plaincopy

1. //设置标签  
2. Mark.drawRoundRect;  
3. //跳到drawRoundRect标签位置  
4. Mark.goto(drawRoundRect);  

在脚本解析的时候，遇到不认识的脚本，会自动跳过，所以设置标签的时候，不需要任何处理，直接跳过即可，下面看一下ScriptMark.js类中如何来具体实现标签的寻找。

[javascript] view plaincopy

1. /* 
2. * ScriptMark.js 
3. **/  
4. var ScriptMark = function (){};  
5. ScriptMark.analysis = function (value){  
6.     var start = value.indexOf("(");  
7.     var end = value.indexOf(")");  
8.     switch(value.substr(0,start)){  
9.         case "Mark.goto"://跳至标签位置  
10.             ScriptMark.goto(value,start,end);  
11.             break;  
12.         default:  
13.             LGlobal.script.analysis();  
14.     }  
15. };  
16. ScriptMark.goto = function (value,start,end){  
17.     var mark = LMath.trim(value.substring(start+1,end));  
18.     //copyList是当前正在解析的脚本序列的副本，再复制一个脚本序列的副本  
19.     var copyArray = LGlobal.script.copyList.concat();  
20.     var foundStr;  
21.     while(copyArray.length){  
22.         //从复制的脚本序列中开始查找标签，没查找一行，则将其删除  
23.         foundStr = copyArray.shift();  
24.         if(foundStr.indexOf("Mark."+mark) >= 0){  
25.             //如果找到标签，则将当前正在解析的脚本序列替换为复制序列  
26.             LGlobal.script.lineList = copyArray;  
27.             LGlobal.script.analysis();  
28.             return;  
29.         }  
30.     }  
31.     //如果没有找到标签，则什么都不做，进行下一行脚本的解析  
32.     LGlobal.script.analysis();  
33. };  

最后，来测试一下，修改Main.ls脚本文件如下

[ruby] view plaincopy

1. Layer.add(-,layer01,0,0);  
2. //跳到标签drawTriangle  
3. Mark.goto(drawTriangle);  
4. //绘制矩形  
5. Layer.drawRect(layer01,0,0,100,60,0xff0000);  
6. Layer.drawRectLine(layer01,0,100,100,60,0xff0000,5);  
7. //设置drawRoundRect标签  
8. Mark.drawRoundRect;  
9. //绘制圆角矩形  
10. Layer.drawRoundRect(layer01,150,0,100,60,10,0x880000);  
11. Layer.drawRoundRectLine(layer01,150,100,100,60,10,0x880000,5);  
12. //跳到标签over  
13. Mark.goto(over);  
14. //设置drawTriangle标签  
15. Mark.drawTriangle;  
16. //绘制三角形  
17. Layer.drawTriangle(layer01,350,0,300,60,400,60,0xff0000);  
18. Layer.drawTriangleLine(layer01,350,100,300,160,400,160,0xff0000,5);  
19. //跳到标签drawRoundRect  
20. Mark.goto(drawRoundRect);  
21. //设置over标签  
22. Mark.over;  

解释一下上面的脚本，如果没有这些标签操作的话，脚本按照顺序执行，会绘制两个矩形，两个圆角矩形和两个三角形，但是脚本一开始就遇到了跳到标签，跳转到了drawTriangle，开始绘制三角形，绘制完三角形，又跳转到了drawRoundRect标签，开始绘制圆角矩形，绘制完圆角矩形后，又直接跳转到了over标签，从而脚本结束，所以，最初的两个矩形最终没有绘制出来。

测试连接如下

http://lufylegend.com/demo/test/lsharp/06/index03.html

这个是运行效果

以上是本章的素有内容，下一章来扩展一下文字脚本，实现打字机效果文字显示，然后脚本引擎的第一部分算是讲的差不多了，会试着用这些脚本做个小游戏给大家看看。

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

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

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

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

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

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