《遊戲指令碼的設計與開發》-第一部分總結 文字指令碼的功能擴充和一個遊戲測試

指令碼系列文章寫了好幾篇了，大家可能都不清楚這些指令碼有什麼用，遊戲中如何能應用到這些東西。當然，目前所介紹的內容還只是個簡單的開頭，說到做遊戲還遠遠不夠。不過，本次就使用前幾章所介紹的內容，先來嘗試一下如何使用指令碼來製作一款簡單的遊戲（其實也算不上遊戲了）。

打字機效果

對話在遊戲中是很常見的，在開始本章的內容之前，先來擴充一下ScriptText類，加入一下三個標籤，來控制打字機效果顯示文字。

/*遊戲指令碼的設計與開發 第一部分總結*///打字機效果顯示文字Text.wind(layer02,txt01,打字機顯示效果,0,0,300,20,null,#ff0000);//打字機效果改變文字內容Text.windChange(txt01,你點擊了按鈕，\n被點擊按鈕已經消失\n且文本已經被轉換,30,#000000);//停止打字機效果Text.windOver(txt01);

下面是ScriptText類中打字機效果相關的代碼，用來實現上述指令碼的解析

/*將臨時數組windList中的文字對象逐個顯示**/ScriptText.windrun = function (){if(ScriptText.windIndex >= ScriptText.windList.length){LGlobal.script.analysis();return;}//將臨時數組windList中的文字對象逐個取出來var label = ScriptText.windList[ScriptText.windIndex++];label.visible = true;//利用LTextField對象的wind函數實現打字機效果的顯示，顯示結束後回調windrun函數本身label.wind(ScriptText.windrun);};ScriptText.wind = 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];//當文字顯示的內容中包含有斷行符號符的話，利用多個LTextField對象來完成換行顯示。var textArr = textStr.split("\\n");var textList = new Array();for(i=0;i<textArr.length;i++){label = new LTextField();label.size = lArr[6];label.width = parseInt(lArr[5]);label.setWordWrap(true,label.size*1.2);label.color = lArr[8];label.text = textArr[i];label.x = parseInt(lArr[3]);label.y = parseInt(lArr[4]) + (label.size*1.2)* i ;label.name = nameStr;label.visible = false;layer.addChild(label);textList.push(label);}//儲存文字對象組script.scriptArray.textList[nameStr] = textList;//將文字對象組存入臨時數組，然後調用windrun函數，來逐個顯示ScriptText.windList = textList;ScriptText.windIndex = 0;ScriptText.windrun();};ScriptText.windChange = 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 color,size;//擷取原文字對象的屬性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];color = label.color;size = label.size;label.parent.removeChild(label);}textList = new Array();//重新加入文字對象來顯示改變後的內容，與wind函數中一樣，當文字顯示的內容中包含有斷行符號符的話，利用多個LTextField對象來完成換行顯示。textArr = textStr.split("\\n");for(i=0;i2?lArr[2]:size;label.color = lArr.length>3?lArr[3]:color;label.text = textArr[i];label.x = x;label.y = y + (label.getHeight()*1.2)* i ;label.name = nameStr;label.visible = false;layer.addChild(label);textList.push(label);}//儲存文字對象組script.scriptArray.textList[nameStr] = textList;//將文字對象組存入臨時數組，然後調用windrun函數，來逐個顯示ScriptText.windList = textList;ScriptText.windIndex = 0;ScriptText.windrun();};ScriptText.windOver = 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.wind_flag = false;label.text = label.wind_text;}script.analysis();};

下面來看看這些指令碼的使用，修改Main.ls如下。

Layer.add(-,layer01,100,100);Layer.add(-,layer02,20,50);Load.img(ok_button_over,ok_button_over.png);Load.img(ok_button_up,ok_button_up.png);Button.add(layer01,button01,null,50,50,ok_button_up,ok_button_over,null);function function_test01();Button.remove(button01);Text.windChange(txt01,你點擊了按鈕，\n被點擊按鈕已經消失\n且文本已經被替換,30,#000000);endfunction;Button.mousedown(button01,function_test01);Text.wind(layer02,txt01,點擊下面按鈕，\n被點擊按鈕就會消失，且文本會被替換,0,0,300,20,null,#ff0000);

測試連接

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

上面的測試中，先利用打字機效果顯示文字，當點擊按鈕的時候文字內容會被替換掉。

應用舉例

下面開始利用純指令碼，來做一個小應用，算是一個小小的體驗，下面是所有指令碼，每一行我都加上了詳細的注釋。

//添加顯示層backLayer.add(-,back,0,0);//添加顯示層charaLayer.add(-,chara,0,0);//添加顯示層talkLayer.add(-,talk,0,0);//顯示文字，讀取中Text.label(-,loading,圖片讀取中...,120,200,15,#000000);//讀取圖片Load.img(backdata,./images/back01.png);Load.img(backdata01,./images/back02.png);Load.img(selectbox,./images/selectbox.png);Load.img(selectbtnup,./images/selectbtnup.png);Load.img(selectbtnover,./images/selectbtnover.png);Load.img(girldata,./images/girl01.png);Load.img(boydata,./images/boy.png);//刪除文字，讀取中Text.remove(loading);//顯示背景Img.add(back,backimg,backdata,0,0,700,500,0);//背景由透明逐漸顯示Img.transition(backimg,{alpha:1},1,Strong.easeOut);//在螢幕外顯示呂布的人物圖片Img.add(chara,boyimg,boydata,-202,50,202,353,1);//讓呂布圖片從螢幕外滑動到螢幕內Img.transition(boyimg,{x:240},1,Strong.easeOut);//添加對話方塊Img.add(talk,selectbox,selectbox,100,270,405,125,1);//顯示對話人物名稱Text.label(talk,name01,[ 呂布 ],120,290,15,#ffffff);//顯示對話Text.wind(talk,talk, 你好！歡迎來到「L#遊戲世界」！我是呂布。呂布與貂蟬中的呂布，現在開始我來向大家做一個簡單的L#指令碼示範。（點擊螢幕繼續）,120,310,360,13,null,#ffffff);//暫停，等待點擊螢幕Wait.click();//改變對話Text.windChange(talk,首先，來試一下選擇分支的使用。);//暫停20毫秒Wait.time(20);//改變對話Text.windChange(talk,告訴我你是男生還是女生？);//在talk層上添加顯示層selectLayer.add(talk,select,120,320);//在select層上添加兩個按鈕，作為選項Button.add(select,btn01,男生,0,10,selectbtnup,selectbtnover,selectbtnover,#ffffff);Button.add(select,btn02,女生,0,40,selectbtnup,selectbtnover,selectbtnover,#ffffff);function btn01click();//男生按鈕被點擊之後，移除select層Layer.remove(select);//將變數gender的值賦值為帥哥Var.set(gender,帥哥); //對話，顯示選擇結果Text.windChange(talk,原來是@gender啊！);endfunction;function btn02click();//女生按鈕被點擊之後，移除select層Layer.remove(select);//將變數gender的值賦值為美女Var.set(gender,美女); //對話，顯示選擇結果Text.windChange(talk,原來是@gender啊！);endfunction;//為按鈕添加點擊事件Button.mousedown(btn01,btn01click);Button.mousedown(btn02,btn02click);//暫停Wait.ctrl(0);//暫停50毫秒Wait.time(50);//改變對話Text.windChange(talk,你是30歲以上的@gender嗎？);//在talk層上添加顯示層selectLayer.add(talk,select,120,320);//在select層上添加兩個按鈕，作為選項Button.add(select,btn01,30歲以上,0,10,selectbtnup,selectbtnover,selectbtnover,#ff0000);Button.add(select,btn02,30歲以下,0,40,selectbtnup,selectbtnover,selectbtnover,#ff0000);function btn01click();Layer.remove(select);Var.set(age,30歲以上); Text.windChange(talk,原來是@age的@gender！);endfunction;function btn02click();Layer.remove(select);Var.set(age,30歲以下); Text.windChange(talk,原來是@age的@gender！);endfunction;//為按鈕添加點擊事件Button.mousedown(btn01,btn01click);Button.mousedown(btn02,btn02click);//暫停Wait.ctrl(0);//暫停50毫秒Wait.time(50);//改變對話Text.windChange(talk,那麼，接下來......);//暫停30毫秒Wait.time(30);//改變對話人物名稱Text.labelChange(name01,[ ??? ],15,#ff0000);//改變對話Text.windChange(talk,奉先～～～！);//暫停30毫秒Wait.time(30);//改變對話人物名稱Text.labelChange(name01,[ 呂布 ],15,#ffffff);//改變對話Text.windChange(talk,......咦，是誰呢？);//在螢幕外顯示神秘女郎的人物圖片Img.add(chara,girlimg,girldata,800,70,248,338,1);//讓神秘女郎圖片從螢幕外滑動到螢幕內Img.transition(girlimg,{x:450},1,Strong.easeOut);//改變對話人物名稱Text.labelChange(name01,[ 神秘女郎 ],15,#ff0000);//改變對話Text.windChange(talk,你不用管我是誰，我帶你去一個地方!);Wait.time(50);//改變對話人物名稱Text.labelChange(name01,[ 呂布 ],15,#ffffff);//改變對話Text.windChange(talk,我不認識你，為什麼要跟你去？而且我現在正在介紹遊戲...);Wait.time(50);//改變對話人物名稱Text.labelChange(name01,[ 神秘女郎 ],15,#ff0000);//改變對話Text.windChange(talk,我就是來幫你一起介紹的啊，快點過來!);//神秘女郎移出螢幕Img.transition(girlimg,{x:800},1,Strong.easeOut);Img.moveTo(gril,700,150,10);Wait.time(50);//改變對話人物名稱Text.labelChange(name01,[ 呂布 ],15,#ffffff);//改變對話Text.windChange(talk,稍等，稍等...);Wait.time(20);//改變對話Text.windChange(talk,...);Wait.time(50);//神秘女郎變透明Img.transition(girlimg,{alpha:0},0,Strong.easeOut);//神秘女郎移入螢幕Img.transition(girlimg,{x:450},0,Strong.easeOut);//背景變透明Img.transition(backimg,{alpha:0},1,Strong.easeOut,1);//呂布變透明Img.transition(boyimg,{alpha:0},1,Strong.easeOut);//背景替換Img.changeData(backimg,backdata01);//呂布顯示Img.transition(boyimg,{alpha:1},1,Strong.easeOut,1);//神秘女郎顯示Img.transition(girlimg,{alpha:1},1,Strong.easeOut,1);//背景顯示Img.transition(backimg,{alpha:1},1,Strong.easeOut);Img.moveTo(gril,400,150,10);//改變對話人物名稱Text.labelChange(name01,[ 神秘女郎 ],15,#ff0000);//改變對話Text.windChange(talk,奉先，你看這裡是不是很漂亮？);Wait.time(50);//改變對話人物名稱Text.labelChange(name01,[ 呂布 ],15,#ffffff);//改變對話Text.windChange(talk,你拉我來這裡幹什麼，被貂蟬看到了可就說不清了！);Wait.time(50);//改變對話人物名稱Text.labelChange(name01,[ 神秘女郎 ],15,#ff0000);//改變對話Text.windChange(talk,我這不是幫你一起介紹一下情境切換嘛！);Wait.time(50);//改變對話人物名稱Text.labelChange(name01,[ 呂布 ],15,#ffffff);//改變對話Text.windChange(talk,原來是這樣啊。);Wait.time(50);//改變對話人物名稱Text.labelChange(name01,[ 神秘女郎 ],15,#ff0000);//改變對話Text.windChange(talk,好了，本次的介紹就到這裡了！);Wait.time(50);//改變對話人物名稱Text.labelChange(name01,[ 呂布 ],15,#ffffff);//改變對話Text.windChange(talk,......);Wait.time(50);//改變對話Text.windChange(talk,......好吧。);Wait.time(50);//改變對話人物名稱Text.labelChange(name01,[ 呂布 & 神秘女郎 ],15,#ffffff);//改變對話Text.windChange(talk,再見了！);//遊戲變透明Layer.transition(-,{alpha:0},1,Strong.easeOut);//清空畫面Layer.clear(-);//添加文字Text.label(-,byebye,多謝觀看！,120,260,30,#ff0000);//漸顯Layer.transition(-,{alpha:1},1,Strong.easeOut);

測試連接如下

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

這個是運行效果

本系列文章的第一部分就結束了，下一章開始來介紹如何利用指令碼來製作一款戰棋遊戲，歡迎繼續關注。

本章為止的lufylegend.lsharp.js源碼如下

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

《遊戲指令碼的設計與開發》系列文章目錄

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

歡迎繼續關注我的部落格

轉載請註明：轉自lufy_legend的部落格http://blog.csdn.net/lufy_legend