html5遊戲開發-零基礎開發RPG遊戲-開源講座(四)-遊戲指令碼化&地圖跳轉
本文章首發自我的部落格 http://blog.csdn.net/lufy_legend/article/details/7213745
一，什麼是遊戲指令碼
簡單說，遊戲指令碼就是依據一定的格式編寫的可執行檔案，遊戲可以通過指令碼中自定義的語句來執行相應的邏輯。
二，為什麼要將遊戲指令碼化
遊戲指令碼，可以令我們的遊戲動態化，比如當我們開發了一款rpg遊戲，裡面的劇情，事件以及地圖等，我們如果將這些全部寫程式序裡，當然是可以的，但是一旦出現問題，哪怕幾個錯別字，我們需要先將這幾個錯別字改正，並且將整個程式重新編譯釋出一遍，這個過程是相當令人反感的，因為如果遊戲的程式跟著遊戲的內容不斷進行修改的話，那隻會使你的程式越來越複雜。但是如果我們將這些可重複的資料，都定義到遊戲程式之外的檔案裡面，當遊戲引擎開發完畢，我們的遊戲通過讀取這些外部檔案，來執行相應的劇情和事件，那麼，像上述當我們的遊戲出現了問題，我們只需要改動這些外部檔案就可以了，並不需要重新編譯整個程式，這樣便使得我們的遊戲開發，變得便利簡潔。
當然，對於html5來說，不需要重新編譯程式，但是對於rpg的遊戲來說，指令碼還是必不可少的，因為遊戲的劇本不可能全都寫到程式裡...
三，如何來實現遊戲的指令碼化
好了，接下來，先來考慮以什麼形式來製作遊戲的指令碼，我們有多種選擇，可以選擇xml，可以選擇json，也可以選擇純自定義語法， 如鄙人開發的flash遊戲指令碼L#http://blog.csdn.net/lufy_legend/article/details/6889424
這次，我為了省事，選用比較方便處理的json，因為javascript可以很輕鬆的處理json資料。 目前遊戲中實現的內容有，地圖場景新增，遊戲人物新增，以及人物對話的實現。那麼，我在設計遊戲指令碼的時候，必須包含這些資料，然後才能將這三項功能用指令碼來控制。 首先看下面的json
var script = {
stage01:{
map:[
[18,18,18,18,18,18,18,18,18,18,18,18,55,55,18,18,18],
[18,18,18,17,17,17,17,17,17,17,17,17,55,55,17,17,18],
[18,18,17,17,17,17,18,18,17,17,17,17,55,55,17,17,18],
[18,17,17,17,18,18,18,18,18,17,17,55,55,17,17,17,18],
[18,17,17,18,22,23,23,23,24,18,17,55,55,17,17,17,18],
[18,17,17,18,25,28,26,79,27,18,55,55,17,17,17,17,18],
[18,17,17,17,17,10,11,12,18,18,55,55,17,17,17,17,18],
[18,18,17,17,10,16,16,16,11,55,55,17,17,17,17,17,18],
[18,18,17,17,77,16,16,16,16,21,21,17,17,17,17,17,18],
[18,18,17,17,77,16,16,16,16,55,55,17,17,17,17,17,18],
[18,18,18,18,18,18,18,18,18,55,55,18,18,18,18,18,18]],
mapdata:[
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0,1],
[1,1,0,0,0,0,1,1,0,0,0,0,1,1,0,0,1],
[1,0,0,0,1,1,1,1,1,0,0,1,1,0,0,0,1],
[1,0,0,1,1,1,1,1,1,1,0,1,1,0,0,0,1],
[1,0,0,1,1,1,0,1,1,1,1,1,0,0,0,0,1],
[1,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,1],
[1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1],
[1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]],
add:[
{chara:"player",img:"mingren",x:5,y:6},
{chara:"npc",img:"npc1",x:7,y:6},
{chara:"npc",img:"npc1",x:3,y:3}],
talk:{
talk1:[
{img:"m",name:"鳴人",msg:"我是木葉村的鳴人，你是誰？"},
{img:"n",name:"黑衣忍者甲",msg:"你就是鳴人？九尾還在你身體裡嗎？"}
],
talk2:[
{img:"n",name:"黑衣忍者乙",msg:"鳴人，聽說忍者大戰就要開始了。"},
{img:"m",name:"鳴人",msg:"真的嗎？一定要想想辦法啊。"}
]
}
}
};
我將指令碼定義成了變數，實際遊戲製作的時候，指令碼應該儲存到一個外部文件當中，在這裡我只是講解一下理論，如何完善那是後話了，哈。 可以看到，json中，包含了地圖相關的map陣列和mapdata陣列，新增人物的相關資料，以及對話的陣列。這樣，我在遊戲顯示的時候，只需要讀入json資料，然後根據這些內容來顯示遊戲畫面就可以了，定義一個initScript函式來進行這些操作。
function initScript(){
//地圖位置初始化
mapLayer.x = 0;
mapLayer.y = 0;
//地圖層初始化
mapLayer.removeAllChild();
//人物層初始化
charaLayer.removeAllChild();
//效果層初始化
effectLayer.removeAllChild();
//對話層初始化
talkLayer.removeAllChild();
//地圖資料獲取
map = stage.map;
mapdata = stage.mapdata;
//對話資料獲取
talkScriptList = stage.talk;
//新增地圖
addMap(0,0);
delMap();
//新增人物
addChara();
}
removeAllChild方法是lufylegend引擎獨有的方法，可以用來移出LScript顯示層上的所有子物件，從而實現本遊戲中各個顯示層的初始化工作。
修改一下addChara方法，如下
//新增人物
function addChara(){
var charaList = stage.add;
var chara,charaObj;
for(var i=0;i<charaList.length;i++){
charaObj = charaList[i];
if(charaObj.chara == "player"){
//加入英雄
bitmapdata = new LBitmapData(imglist[charaObj.img]);
chara = new Character(true,i,bitmapdata,4,4);
player = chara;
}else{
//加入npc
bitmapdata = new LBitmapData(imglist[charaObj.img]);
chara = new Character(false,i,bitmapdata,4,4);
}
chara.x = charaObj.x * 32;
chara.y = charaObj.y * 32;
charaLayer.addChild(chara);
}
}
即，根據json指令碼中的add陣列，來新增遊戲中的人物。
好了，執行一下游戲，可以看到，遊戲正常顯示了，和之前一模一樣，實現了同樣的功能。
四，利用遊戲指令碼實現地圖的切換
為了讓大家看到遊戲指令碼的便利性，現在利用指令碼實現遊戲中的場景切換。 將json指令碼修改如下
var script = {
stage01:{
map:[
[18,18,18,18,18,18,18,18,18,18,18,18,55,55,18,18,18],
[18,18,18,17,17,17,17,17,17,17,17,17,55,55,17,17,18],
[18,18,17,17,17,17,18,18,17,17,17,17,55,55,17,17,18],
[18,17,17,17,18,18,18,18,18,17,17,55,55,17,17,17,18],
[18,17,17,18,22,23,23,23,24,18,17,55,55,17,17,17,18],
[18,17,17,18,25,28,26,79,27,18,55,55,17,17,17,17,18],
[18,17,17,17,17,10,11,12,18,18,55,55,17,17,17,17,18],
[18,18,17,17,10,16,16,16,11,55,55,17,17,17,17,17,18],
[18,18,17,17,77,16,16,16,16,21,21,17,17,17,17,17,18],
[18,18,17,17,77,16,16,16,16,55,55,17,17,17,17,17,18],
[18,18,18,18,18,18,18,18,18,55,55,18,18,18,18,18,18]],
mapdata:[
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0,1],
[1,1,0,0,0,0,1,1,0,0,0,0,1,1,0,0,1],
[1,0,0,0,1,1,1,1,1,0,0,1,1,0,0,0,1],
[1,0,0,1,1,1,1,1,1,1,0,1,1,0,0,0,1],
[1,0,0,1,1,1,0,1,1,1,1,1,0,0,0,0,1],
[1,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,1],
[1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1],
[1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]],
add:[
{chara:"player",img:"mingren",x:5,y:6},
{chara:"npc",img:"npc1",x:7,y:6},
{chara:"npc",img:"npc1",x:3,y:3}],
talk:{
talk1:[
{img:"m",name:"鳴人",msg:"我是木葉村的鳴人，你是誰？"},
{img:"n",name:"黑衣忍者甲",msg:"你就是鳴人？九尾還在你身體裡嗎？"}
],
talk2:[
{img:"n",name:"黑衣忍者乙",msg:"鳴人，聽說忍者大戰就要開始了。"},
{img:"m",name:"鳴人",msg:"真的嗎？一定要想想辦法啊。"}
]
},
jump:[
{at:{x:6,y:5},to:"stage02"}
]
},
stage02:{
map:[
[0,0,1,2,2,2,2,2,2,2,2,1,0,0,0],
[0,0,1,3,5,5,1,5,5,5,5,1,0,0,0],
[0,0,1,80,4,4,1,80,4,4,4,1,0,0,0],
[0,0,1,80,4,4,1,80,8,7,8,1,0,0,0],
[0,0,1,80,4,4,5,81,4,4,4,1,0,0,0],
[0,0,1,2,2,2,6,4,4,4,4,1,0,0,0],
[0,0,1,3,5,5,81,4,4,4,4,1,0,0,0],
[0,0,1,80,4,4,4,4,4,4,9,1,0,0,0],
[0,0,1,2,2,2,2,6,2,2,2,1,0,0,0]],
mapdata:[
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,0,0,0,1,0,0,0,0,1,1,1,1],
[1,1,1,0,0,0,1,0,0,0,0,1,1,1,1],
[1,1,1,0,0,0,1,0,0,1,0,1,1,1,1],
[1,1,1,0,0,0,0,0,0,0,0,1,1,1,1],
[1,1,1,1,1,1,0,0,0,0,0,1,1,1,1],
[1,1,1,0,0,0,0,0,0,0,0,1,1,1,1],
[1,1,1,0,0,0,0,0,0,0,1,1,1,1,1],
[1,1,1,1,1,1,1,0,1,1,1,1,1,1,1]],
add:[
{chara:"player",img:"mingren",x:7,y:8},
{chara:"npc",img:"npc1",x:8,y:3},
{chara:"npc",img:"npc1",x:10,y:3}],
talk:{
talk1:[
{img:"m",name:"鳴人",msg:"你們在幹什麼啊？"},
{img:"n",name:"黑衣忍者甲",msg:"我們在喝茶。"}
],
talk2:[
{img:"n",name:"黑衣忍者乙",msg:"我們在喝茶，你不要打擾我們。"},
{img:"m",name:"鳴人",msg:"....."}
]
},
jump:[
{at:{x:7,y:8},to:"stage01"}
]
}
};
可以看到，我新增了stage02，即第二個場景，並且在指令碼里引入了jump節點來控制遊戲場景的切換，其中jump中的at表示遊戲主人公移動到達的座標，to表示到達這個座標後跳轉到的畫面名稱。這裡的jump之所以是陣列，是因為一個場景也可以跳轉到其他多個場景。
上面的指令碼實現了stage01和stage02兩個場景的互相跳轉。
為了讀取這個jump，以及實現跳轉，我們需要在遊戲主人公移動一個步長之後，判斷一下是否應該跳轉了，修改Character類的onmove方法
/**
* 開始移動
**/
Character.prototype.onmove = function (){
var self = this;
//設定一個移動步長中的移動次數
var ml_cnt = 4;
//計算一次移動的長度
var ml = STEP/ml_cnt;
//根據移動方向，開始移動
switch (self.direction){
case UP:
if(mapmove){
mapLayer.y += ml;
charaLayer.y += ml;
}
self.y -= ml;
break;
case LEFT:
if(mapmove){
mapLayer.x += ml;
charaLayer.x += ml;
}
self.x -= ml;
break;
case RIGHT:
if(mapmove){
mapLayer.x -= ml;
charaLayer.x -= ml;
}
self.x += ml;
break;
case DOWN:
if(mapmove){
mapLayer.y -= ml;
charaLayer.y -= ml;
}
self.y += ml;
break;
}
self.moveIndex++;
//當移動次數等於設定的次數，開始判斷是否繼續移動
if(self.moveIndex >= ml_cnt){
//一個地圖步長移動完成後，判斷地圖是否跳轉
if(self.isHero && self.moveIndex > 0)checkJump();
self.moveIndex = 0;
//一個地圖步長移動完成後，如果地圖處於滾動狀態，則移除多餘地圖塊
if(mapmove)delMap();
//如果已經鬆開移動鍵，或者前方為障礙物，則停止移動，否則繼續移動
if(!isKeyDown || !self.checkRoad()){
self.move = false;
return;
}else if(self.direction != self.direction_next){
self.direction = self.direction_next;
self.anime.setAction(self.direction);
}
//地圖是否滾動
self.checkMap(self.direction);
}
};
我新增了一行
if(self.isHero && self.moveIndex > 0)checkJump();
表示，移動完後如果該人物是遊戲主人公則進行跳轉判斷
所以，我們需要新增一個checkJump方法
//遊戲場景跳轉測試
function checkJump(){
var jump = stage.jump;
var jumpstage;
for(var i=0;i<jump.length;i++){
jumpstage = jump[0];
if(player.x == jumpstage.at.x * 32 && player.y == jumpstage.at.y * 32){
//獲取該場景指令碼資料
stage = script[jumpstage.to];
//開始跳轉
initScript(stage);
return;
}
}
}
好了，一切都很簡單吧，執行遊戲看看效果吧,小鳴人走到地圖的小房門的部分是，場景發生跳轉
遊戲測試URL： http://lufylegend.com/demo/rpg/index.html
lufylegend.js引擎包內包含這個demo，請直接下載lufylegend.js引擎，檢視引擎包內原始碼
lufylegend.js引擎下載地址 http://lufylegend.com/lufylegend
零基礎開發RPG遊戲-開源講座系列文章，結貼了，如有問題歡迎大家指正，也歡迎大家留言一起探討遊戲製作以及改進的方法。
相關文章
- html5遊戲開發-零基礎開發RPG遊戲-開源講座(一)HTML遊戲開發
- html5遊戲開發-零基礎開發RPG遊戲-開源講座(二)-跑起來吧英雄HTML遊戲開發
- html5遊戲開發-零基礎開發RPG遊戲-開源講座(三)-卷軸&對話實現HTML遊戲開發
- HTML5 遊戲開發基礎的教程HTML遊戲開發
- 《HTML5完美遊戲開發》——2.8資源分享HTML遊戲開發
- 零基礎瞭解3D遊戲開發3D遊戲開發
- 來自 Mozilla 的 HTML5 遊戲開發資源HTML遊戲開發
- 遊戲開發經驗——遊戲開發的基本常識(轉)遊戲開發
- 遊戲開發新手入門之點陣圖化圖形(轉)遊戲開發
- HTML5遊戲開發進階 3 ：物理引擎基礎HTML遊戲開發
- 遊戲開發入門（一）遊戲開發概述遊戲開發
- 阿里開源HTML5小遊戲開發框架Hilo實戰教程阿里HTML遊戲開發框架
- 遊戲開發遊戲開發
- j2me遊戲開發例項講解 (轉)遊戲開發
- Unity遊戲示例來了，用Unity開源遊戲資源做遊戲，遊戲開發不再難！Unity遊戲開發
- HTML5遊戲開發(二)：使用TypeScript編寫程式碼HTML遊戲開發TypeScript
- HTML5遊戲開發——骰子游戲(一)HTML遊戲開發
- 遊戲開發中遊戲效能的最佳化遊戲開發
- J2ME遊戲開發例項講解（上）(轉)遊戲開發
- J2ME遊戲開發例項講解（下）(轉)遊戲開發
- ios遊戲開發iOS遊戲開發
- flash遊戲開發遊戲開發
- 遊戲開發流程遊戲開發
- HTML5遊戲開發進階 8 ：新增更多的遊戲元素HTML遊戲開發
- HTML5遊戲開發進階 12：多人對戰遊戲操作HTML遊戲開發
- HTML5遊戲開發進階 2 ：建立基本的遊戲世界HTML遊戲開發
- 微信小遊戲開發（8）-模組化遊戲開發
- 詳細講解遊戲開發中的DirectX-tasy(II)(轉)遊戲開發
- HTML5遊戲開發5條建議及開發工具分享HTML遊戲開發
- RPG 製作大師：古老的遊戲開發入門工具遊戲開發
- NFT遊戲系統開發/遊戲開發技術遊戲開發
- 從遊戲開發到應用開發的轉變遊戲開發
- J2ME遊戲開發例項講解遊戲開發
- 遊戲開發總結遊戲開發
- HTML5遊戲開發過程中的二三事HTML遊戲開發
- HTML5遊戲開發進階 6 ：加入單位HTML遊戲開發
- HTML5遊戲開發進階 4 ：物理引擎整合HTML遊戲開發
- 10個最好的遊戲開發線上資源遊戲開發