日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間:8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網營銷解決方案
HTML 5開發(fā)RPG游戲之四(游戲腳本化)

首先,本篇文章是零基礎開發(fā)RPG游戲-開源講座系列文章的第四篇,來實現(xiàn)游戲的腳本化,和利用游戲腳本實現(xiàn)地圖場景的切換,離上次更新貌似很長時間了,你在看下面的文字之前,需要先了解前三篇在下啰嗦了些什么東東。

薩爾圖ssl適用于網站、小程序/APP、API接口等需要進行數據傳輸應用場景,ssl證書未來市場廣闊!成為創(chuàng)新互聯(lián)公司的ssl證書銷售渠道,可以享受市場價格4-6折優(yōu)惠!如果有意向歡迎電話聯(lián)系或者加微信:18982081108(備注:SSL證書合作)期待與您的合作!

一,什么是游戲腳本

簡單說,游戲腳本就是依據一定的格式編寫的可執(zhí)行文件,游戲可以通過腳本中自定義的語句來執(zhí)行相應的邏輯。

二,為什么要將游戲腳本化

游戲腳本,可以令我們的游戲動態(tài)化,比如當我們開發(fā)了一款rpg游戲,里面的劇情,事件以及地圖等,我們如果將這些全部寫進程序里,當然是可以的,但是一旦出現(xiàn)問題,哪怕幾個錯別字,我們需要先將這幾個錯別字改正,并且將整個程序重新編譯發(fā)布一遍,這個過程是相當令人反感的,因為如果游戲的程序跟著游戲的內容不斷進行修改的話,那只會使你的程序越來越復雜。但是如果我們將這些可重復的數據,都定義到游戲程序之外的文件里面,當游戲引擎開發(fā)完畢,我們的游戲通過讀取這些外部文件,來執(zhí)行相應的劇情和事件,那么,像上述當我們的游戲出現(xiàn)了問題,我們只需要改動這些外部文件就可以了,并不需要重新編譯整個程序,這樣便使得我們的游戲開發(fā),變得便利簡潔。

當然,對于html5來說,不需要重新編譯程序,但是對于rpg的游戲來說,腳本還是必不可少的,因為游戲的劇本不可能全都寫到程序里...

三,如何來實現(xiàn)游戲的腳本化

好了,接下來,先來考慮以什么形式來制作游戲的腳本,我們有多種選擇,可以選擇xml,可以選擇json,也可以選擇純自定義語法,

這次,我為了省事,選用比較方便處理的json,因為javascript可以很輕松的處理json數據。

目前游戲中實現(xiàn)的內容有,地圖場景添加,游戲人物添加,以及人物對話的實現(xiàn)。那么,我在設計游戲腳本的時候,必須包含這些數據,然后才能將這三項功能用腳本來控制。

首先看下面的json

 
 
 
 
  1. var script = {  
  2.     stage01:{  
  3.         map:[  
  4.             [18,18,18,18,18,18,18,18,18,18,18,18,55,55,18,18,18],  
  5.             [18,18,18,17,17,17,17,17,17,17,17,17,55,55,17,17,18],  
  6.             [18,18,17,17,17,17,18,18,17,17,17,17,55,55,17,17,18],  
  7.             [18,17,17,17,18,18,18,18,18,17,17,55,55,17,17,17,18],  
  8.             [18,17,17,18,22,23,23,23,24,18,17,55,55,17,17,17,18],  
  9.             [18,17,17,18,25,28,26,79,27,18,55,55,17,17,17,17,18],  
  10.             [18,17,17,17,17,10,11,12,18,18,55,55,17,17,17,17,18],  
  11.             [18,18,17,17,10,16,16,16,11,55,55,17,17,17,17,17,18],  
  12.             [18,18,17,17,77,16,16,16,16,21,21,17,17,17,17,17,18],  
  13.             [18,18,17,17,77,16,16,16,16,55,55,17,17,17,17,17,18],  
  14.             [18,18,18,18,18,18,18,18,18,55,55,18,18,18,18,18,18]],  
  15.         mapdata:[  
  16.             [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],  
  17.             [1,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0,1],  
  18.             [1,1,0,0,0,0,1,1,0,0,0,0,1,1,0,0,1],  
  19.             [1,0,0,0,1,1,1,1,1,0,0,1,1,0,0,0,1],  
  20.             [1,0,0,1,1,1,1,1,1,1,0,1,1,0,0,0,1],  
  21.             [1,0,0,1,1,1,0,1,1,1,1,1,0,0,0,0,1],  
  22.             [1,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,1],  
  23.             [1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1],  
  24.             [1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],  
  25.             [1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1],  
  26.             [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]],  
  27.         add:[  
  28.              {chara:"player",img:"mingren",x:5,y:6},  
  29.              {chara:"npc",img:"npc1",x:7,y:6},  
  30.              {chara:"npc",img:"npc1",x:3,y:3}],  
  31.         talk:{  
  32.             talk1:[  
  33.                       {img:"m",name:"鳴人",msg:"我是木葉村的鳴人,你是誰?"},  
  34.                       {img:"n",name:"黑衣忍者甲",msg:"你就是鳴人?九尾還在你身體里嗎?"}  
  35.                   ],  
  36.             talk2:[  
  37.                       {img:"n",name:"黑衣忍者乙",msg:"鳴人,聽說忍者大戰(zhàn)就要開始了。"},  
  38.                       {img:"m",name:"鳴人",msg:"真的嗎?一定要想想辦法啊。"}  
  39.                   ]  
  40.         }  
  41.     }  
  42.  
  43.  
  44. }; 

我將腳本定義成了變量,實際游戲制作的時候,腳本應該儲存到一個外部文檔當中,在這里我只是講解一下理論,如何完善那是后話了,哈。

可以看到,json中,包含了地圖相關的map數組和mapdata數組,添加人物的相關數據,以及對話的數組。這樣,我在游戲顯示的時候,只需要讀入json數據,然后根據這些內容來顯示游戲畫面就可以了,定義一個initScript函數來進行這些操作。

 
 
 
 
  1. function initScript(){  
  2.     //地圖位置初始化  
  3.     mapLayer.x = 0;  
  4.     mapLayer.y = 0;  
  5.  
  6.  
  7.     //地圖層初始化  
  8.     mapLayer.removeAllChild();  
  9.     //人物層初始化  
  10.     charaLayer.removeAllChild();  
  11.     //效果層初始化  
  12.     effectLayer.removeAllChild();  
  13.     //對話層初始化  
  14.     talkLayer.removeAllChild();  
  15.       
  16.     //地圖數據獲取  
  17.     map = stage.map;  
  18.     mapdata = stage.mapdata;  
  19.     //對話數據獲取  
  20.     talkScriptList = stage.talk;  
  21.       
  22.     //添加地圖  
  23.     addMap(0,0);  
  24.     delMap();  
  25.     //添加人物  
  26.     addChara();  

removeAllChild方法是legendForHtml5Programming引擎獨有的方法,可以用來移出LScript顯示層上的所有子對象,從而實現(xiàn)本游戲中各個顯示層的初始化工作。

修改一下addChara方法,如下

 
 
 
 
  1. //添加人物  
  2. function addChara(){  
  3.     var charaList = stage.add;  
  4.     var chara,charaObj;  
  5.     for(var i=0;i
  6.         charaObj = charaList[i];  
  7.         if(charaObj.chara == "player"){  
  8.             //加入英雄  
  9.             bitmapdata = new LBitmapData(imglist[charaObj.img]);  
  10.             chara = new Character(true,i,bitmapdata,4,4);  
  11.             player = chara;  
  12.         }else{  
  13.             //加入npc  
  14.             bitmapdata = new LBitmapData(imglist[charaObj.img]);  
  15.             chara = new Character(false,i,bitmapdata,4,4);  
  16.         }  
  17.         chara.x = charaObj.x * 32;  
  18.         chara.y = charaObj.y * 32;  
  19.         charaLayer.addChild(chara);  
  20.     }  

即,根據json腳本中的add數組,來添加游戲中的人物。

好了,運行一下游戲,可以看到,游戲正常顯示了,和之前一模一樣,實現(xiàn)了同樣的功能.

#p#

四,利用游戲腳本實現(xiàn)地圖的切換

為了讓大家看到游戲腳本的便利性,現(xiàn)在利用腳本實現(xiàn)游戲中的場景切換。

將json腳本修改如下

 
 
 
 
  1. var script = {  
  2.     stage01:{  
  3.         map:[  
  4.             [18,18,18,18,18,18,18,18,18,18,18,18,55,55,18,18,18],  
  5.             [18,18,18,17,17,17,17,17,17,17,17,17,55,55,17,17,18],  
  6.             [18,18,17,17,17,17,18,18,17,17,17,17,55,55,17,17,18],  
  7.             [18,17,17,17,18,18,18,18,18,17,17,55,55,17,17,17,18],  
  8.             [18,17,17,18,22,23,23,23,24,18,17,55,55,17,17,17,18],  
  9.             [18,17,17,18,25,28,26,79,27,18,55,55,17,17,17,17,18],  
  10.             [18,17,17,17,17,10,11,12,18,18,55,55,17,17,17,17,18],  
  11.             [18,18,17,17,10,16,16,16,11,55,55,17,17,17,17,17,18],  
  12.             [18,18,17,17,77,16,16,16,16,21,21,17,17,17,17,17,18],  
  13.             [18,18,17,17,77,16,16,16,16,55,55,17,17,17,17,17,18],  
  14.             [18,18,18,18,18,18,18,18,18,55,55,18,18,18,18,18,18]],  
  15.         mapdata:[  
  16.             [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],  
  17.             [1,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0,1],  
  18.             [1,1,0,0,0,0,1,1,0,0,0,0,1,1,0,0,1],  
  19.             [1,0,0,0,1,1,1,1,1,0,0,1,1,0,0,0,1],  
  20.             [1,0,0,1,1,1,1,1,1,1,0,1,1,0,0,0,1],  
  21.             [1,0,0,1,1,1,0,1,1,1,1,1,0,0,0,0,1],  
  22.             [1,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,1],  
  23.             [1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1],  
  24.             [1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],  
  25.             [1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1],  
  26.             [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]],  
  27.         add:[  
  28.              {chara:"player",img:"mingren",x:5,y:6},  
  29.              {chara:"npc",img:"npc1",x:7,y:6},  
  30.              {chara:"npc",img:"npc1",x:3,y:3}],  
  31.         talk:{  
  32.             talk1:[  
  33.                       {img:"m",name:"鳴人",msg:"我是木葉村的鳴人,你是誰?"},  
  34.                       {img:"n",name:"黑衣忍者甲",msg:"你就是鳴人?九尾還在你身體里嗎?"}  
  35.                   ],  
  36.             talk2:[  
  37.                       {img:"n",name:"黑衣忍者乙",msg:"鳴人,聽說忍者大戰(zhàn)就要開始了。"},  
  38.                       {img:"m",name:"鳴人",msg:"真的嗎?一定要想想辦法啊。"}  
  39.                   ]  
  40.         },  
  41.         jump:[  
  42.               {at:{x:6,y:5},to:"stage02"}  
  43.         ]  
  44.     },  
  45.     stage02:{  
  46.         map:[  
  47.             [0,0,1,2,2,2,2,2,2,2,2,1,0,0,0],  
  48.             [0,0,1,3,5,5,1,5,5,5,5,1,0,0,0],  
  49.             [0,0,1,80,4,4,1,80,4,4,4,1,0,0,0],  
  50.             [0,0,1,80,4,4,1,80,8,7,8,1,0,0,0],  
  51.             [0,0,1,80,4,4,5,81,4,4,4,1,0,0,0],  
  52.             [0,0,1,2,2,2,6,4,4,4,4,1,0,0,0],  
  53.             [0,0,1,3,5,5,81,4,4,4,4,1,0,0,0],  
  54.             [0,0,1,80,4,4,4,4,4,4,9,1,0,0,0],  
  55.             [0,0,1,2,2,2,2,6,2,2,2,1,0,0,0]],  
  56.         mapdata:[  
  57.             [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],  
  58.             [1,1,1,0,0,0,1,0,0,0,0,1,1,1,1],  
  59.             [1,1,1,0,0,0,1,0,0,0,0,1,1,1,1],  
  60.             [1,1,1,0,0,0,1,0,0,1,0,1,1,1,1],  
  61.             [1,1,1,0,0,0,0,0,0,0,0,1,1,1,1],  
  62.             [1,1,1,1,1,1,0,0,0,0,0,1,1,1,1],  
  63.             [1,1,1,0,0,0,0,0,0,0,0,1,1,1,1],  
  64.             [1,1,1,0,0,0,0,0,0,0,1,1,1,1,1],  
  65.             [1,1,1,1,1,1,1,0,1,1,1,1,1,1,1]],  
  66.         add:[  
  67.              {chara:"player",img:"mingren",x:7,y:8},  
  68.              {chara:"npc",img:"npc1",x:8,y:3},  
  69.              {chara:"npc",img:"npc1",x:10,y:3}],  
  70.         talk:{  
  71.               talk1:[  
  72.                         {img:"m",name:"鳴人",msg:"你們在干什么?。?},  
  73.                         {img:"n",name:"黑衣忍者甲",msg:"我們在喝茶。"}  
  74.                   ],  
  75.               talk2:[  
  76.                         {img:"n",name:"黑衣忍者乙",msg:"我們在喝茶,你不要打擾我們。"},  
  77.                         {img:"m",name:"鳴人",msg:"....."}  
  78.                   ]  
  79.         },  
  80.         jump:[  
  81.               {at:{x:7,y:8},to:"stage01"}  
  82.         ]  
  83.     }  
  84.  
  85.  
  86. }; 

可以看到,我添加了stage02,即第二個場景,并且在腳本里引入了jump節(jié)點來控制游戲場景的切換,其中jump中的at表示游戲主人公移動到達的坐標,to表示到達這個坐標后跳轉到的畫面名稱。這里的jump之所以是數組,是因為一個場景也可以跳轉到其他多個場景。

上面的腳本實現(xiàn)了stage01和stage02兩個場景的互相跳轉。

為了讀取這個jump,以及實現(xiàn)跳轉,我們需要在游戲主人公移動一個步長之后,判斷一下是否應該跳轉了,修改Character類的onmove方法

 
 
 
 
  1. /**  
  2.  * 開始移動   
  3.  **/ 
  4. Character.prototype.onmove = function (){  
  5.     var self = this;  
  6.     //設定一個移動步長中的移動次數  
  7.     var ml_cnt = 4;  
  8.     //計算一次移動的長度  
  9.     var ml = STEP/ml_cnt;  
  10.     //根據移動方向,開始移動  
  11.     switch (self.direction){  
  12.         case UP:  
  13.             if(mapmove){  
  14.                 mapLayer.y += ml;  
  15.                 charaLayer.y += ml;  
  16.             }  
  17.             self.y -= ml;  
  18.             break;  
  19.         case LEFT:  
  20.             if(mapmove){  
  21.                 mapLayer.x += ml;  
  22.                 charaLayer.x += ml;  
  23.             }  
  24.             self.x -= ml;  
  25.             break;  
  26.         case RIGHT:  
  27.             if(mapmove){  
  28.                 mapLayer.x -= ml;  
  29.                 charaLayer.x -= ml;  
  30.             }  
  31.             self.x += ml;  
  32.             break;  
  33.         case DOWN:  
  34.             if(mapmove){  
  35.                 mapLayer.y -= ml;  
  36.                 charaLayer.y -= ml;  
  37.             }  
  38.             self.y += ml;  
  39.             break;  
  40.     }  
  41.     self.moveIndex++;  
  42.     //當移動次數等于設定的次數,開始判斷是否繼續(xù)移動  
  43.     if(self.moveIndex >= ml_cnt){  
  44.         //一個地圖步長移動完成后,判斷地圖是否跳轉  
  45.         if(self.isHero && self.moveIndex > 0)checkJump();  
  46.         self.moveIndex = 0;  
  47.         //一個地圖步長移動完成后,如果地圖處于滾動狀態(tài),則移除多余地圖塊  
  48.         if(mapmove)delMap();  
  49.         //如果已經松開移動鍵,或者前方為障礙物,則停止移動,否則繼續(xù)移動  
  50.         if(!isKeyDown || !self.checkRoad()){  
  51.             self.move = false;  
  52.             return;  
  53.         }else if(self.direction != self.direction_next){  
  54.             self.direction = self.direction_next;  
  55.             self.anime.setAction(self.direction);  
  56.         }  
  57.         //地圖是否滾動  
  58.         self.checkMap(self.direction);  
  59.     }  
  60. }; 

我添加了一行

 
 
 
 
  1. if(self.isHero && self.moveIndex > 0)checkJump(); 

表示,移動完后如果該人物是游戲主人公則進行跳轉判斷

所以,我們需要添加一個checkJump方法

 
 
 
 
  1. //游戲場景跳轉測試  
  2. function checkJump(){  
  3.     var jump = stage.jump;  
  4.     var jumpstage;  
  5.     for(var i=0;i
  6.         jumpjumpstage = jump[0];  
  7.         if(player.x == jumpstage.at.x * 32 && player.y == jumpstage.at.y * 32){  
  8.             //獲取該場景腳本數據  
  9.             stage = script[jumpstage.to];  
  10.             //開始跳轉  
  11.             initScript(stage);  
  12.             return;  
  13.         }  
  14.     }  

好了,一切都很簡單吧,運行游戲看看效果吧,小鳴人走到地圖的小房門的部分是,場景發(fā)生跳轉

游戲測試URL:http://fsanguo.comoj.com/html5/rpg5/index.html

本次更新源代碼下載:http://fsanguo.comoj.com/html5/rpg5/rpg5.rar


文章名稱:HTML 5開發(fā)RPG游戲之四(游戲腳本化)
網站URL:http://www.dlmjj.cn/article/coijpjs.html