社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
目錄
二，為什麼要將遊戲腳本化
三，如何來實現遊戲的腳本化
四，利用遊戲腳本實現地圖的切換
首頁 web前端 H5教程 html5遊戲開發-零基礎開發RPG遊戲-開源講座(四)-遊戲腳本化&地圖跳轉

html5遊戲開發-零基礎開發RPG遊戲-開源講座(四)-遊戲腳本化&地圖跳轉

黄舟
黄舟
Mar 02, 2017 pm 02:08 PM


首先，本篇文章是零基礎開發RPG遊戲-開源講座系列文章的第四篇，來實現遊戲的腳本化，並利用遊戲腳本實現地圖場景的切換，離上次更新貌似很久了，你在看下面的文字之前，需要先了解前三篇在下囉嗦了些什麼東東。

一，什麼是遊戲腳本

簡單說，遊戲腳本就是依據一定的格式編寫的可執行文件，遊戲可以透過腳本中自訂的語句來執行對應的邏輯。

二，為什麼要將遊戲腳本化

遊戲腳本，可以讓我們的遊戲動態化，例如當我們開發了一款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

# 以上就是html5遊戲開發-零基礎開發RPG遊戲-開源講座(四)-遊戲腳本化&地圖跳轉 的內容，更多相關內容請關注PHP中文網（www.php.cn）！



#
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

刺客信條陰影：貝殼謎語解決方案
1 個月前 By DDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前 By DDD
在哪裡可以找到原子中的起重機控制鑰匙卡
1 個月前 By DDD
如何修復KB5055523無法在Windows 11中安裝？
2 週前 By DDD
Inzoi：如何申請學校和大學
3 週前 By DDD
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7762
15
Java教學
1644
14
CakePHP 教程
1399
52
Laravel 教程
1293
25
PHP教程
1234
29
顯示更多
Related knowledge
HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 表格邊框指南。在這裡，我們以 HTML 中的表格邊框為例，討論定義表格邊框的多種方法。

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距指南。在這裡，我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局指南。在這裡，我們詳細討論 HTML 表格佈局的值以及範例和輸出。

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符指南。在這裡，我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在這裡我們也分別討論了 HTML 有序列表和類型的介紹以及它們的範例

在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

HTML 中的文字移動指南。在這裡我們討論一下marquee標籤如何使用語法和實作範例。

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

See all articles