Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > H5-Tutorial > HTML5-Spieleentwicklung – Zero-basierte Entwicklung von RPG-Spielen – Open-Source-Vorlesung (4) – Game Scripting & Map Jump

HTML5-Spieleentwicklung – Zero-basierte Entwicklung von RPG-Spielen – Open-Source-Vorlesung (4) – Game Scripting & Map Jump

黄舟
Freigeben： 2017-03-02 14:08:40
Original
2537 Leute haben es durchsucht


Zuallererst ist dieser Artikel der vierte Artikel in der Zero-Based-Entwicklung von RPG-Spielen – einer Open-Source-Vortragsreihe zur Implementierung von Spielskripten und zur Verwendung von Spielskripten Es scheint, dass es seit dem letzten Update lange her ist, den Wechsel der Kartenszenen zu realisieren. Bevor Sie den folgenden Text lesen, müssen Sie verstehen, was in den ersten drei Artikeln erwähnt wird.

1. Was ist ein Spielskript?

Einfach ausgedrückt ist ein Spielskript eine ausführbare Datei, die in einem bestimmten Format geschrieben ist im Skript die entsprechende Logik ausführen.

Zweitens: Warum sollten wir das Spiel skripten?

Spielskripte können unsere Spiele dynamisch machen, zum Beispiel die Handlung, Ereignisse und Karten usw ., wenn wir das alles in das Programm schreiben, ist das natürlich möglich, aber sobald ein Problem auftritt, selbst ein paar Tippfehler, müssen wir diese Tippfehler zuerst korrigieren und das gesamte Programm neu kompilieren und veröffentlichen. Dieser Vorgang ist ziemlich ekelhaft , denn wenn das Spielprogramm ständig an den Spielinhalt angepasst wird, wird Ihr Programm nur immer komplexer. Wenn wir diese wiederholbaren Daten jedoch in Dateien außerhalb des Spielprogramms definieren und die Spiel-Engine entwickelt wird, führt unser Spiel die entsprechende Handlung und Ereignisse aus, indem es diese externen Dateien liest. Wenn dann, wie oben erwähnt, ein Problem mit unserem Spiel vorliegt Wir müssen nur diese externen Dateien ändern und nicht das gesamte Programm neu kompilieren. Dies macht unsere Spieleentwicklung bequem und prägnant.

* Für HTML5 ist es natürlich nicht nötig, das Programm neu zu kompilieren, aber für RPG-Spiele sind Skripte immer noch unerlässlich, da es unmöglich ist, alle Spielskripte in das Programm zu schreiben. .

3. Wie man das Skript des Spiels realisiert

Okay, als nächstes überlegen wir zunächst, in welcher Form das Spielskript erstellt werden soll haben? Es gibt mehrere Optionen, Sie können XML wählen, Sie können JSON wählen, oder Sie können reine benutzerdefinierte Syntax wählen,


Zum Beispiel habe ich das Flash-Spielskript L entwickelt # http://blog.csdn .net/lufy_legend/article/details/6889424

Um Ärger zu sparen, habe ich mich dieses Mal für JSON entschieden, das einfacher zu verarbeiten ist, da Javascript JSON-Daten problemlos verarbeiten kann .
Zu den derzeit im Spiel implementierten Inhalten gehören das Hinzufügen von Kartenszenen, das Hinzufügen von Spielcharakteren und die Implementierung von Charakterdialogen. Wenn ich dann das Spielskript entwerfe, muss ich diese Daten einbeziehen, und dann können diese drei Funktionen vom Skript gesteuert werden.
Schauen Sie sich zuerst den JSON unten an

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:"真的吗？一定要想想办法啊。"}
		    	  ]
		}
	}


};
Nach dem Login kopieren


Bei der eigentlichen Erstellung des Spiels sollte das Skript in einem externen Dokument gespeichert werden Nur die Theorie zu erklären und wie man sie verbessern kann, ist ein anderes Thema, haha.
Wie Sie sehen können, enthält der JSON Kartenarrays und Kartendatenarrays im Zusammenhang mit der Karte, Daten im Zusammenhang mit hinzugefügten Zeichen und Arrays für Dialoge. Auf diese Weise muss ich beim Anzeigen des Spiels nur die JSON-Daten lesen und dann den Spielbildschirm basierend auf diesen Inhalten anzeigen. Ich definiere eine InitScript-Funktion, um diese Vorgänge auszuführen. 

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();
}
Nach dem Login kopieren

Die Methode „removeAllChild“ ist eine einzigartige Methode der Lufylegend-Engine, mit der alle Unterobjekte auf der LScript-Anzeigeebene entfernt werden können, wodurch die Initialisierung jeder Anzeigeebene in dieser realisiert wird Spiel.
Ändern Sie die addChara-Methode wie folgt

//添加人物
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);
	}
}
Nach dem Login kopieren

Das heißt, Sie fügen Charaktere im Spiel basierend auf dem Add-Array im JSON-Skript hinzu.

Okay, führen Sie das Spiel aus. Sie können sehen, dass das Spiel normal angezeigt wird, genau das gleiche wie zuvor und die gleichen Funktionen implementiert.

4. Verwenden Sie Spielskripte, um Karten zu wechseln.

Damit jeder die Bequemlichkeit von Spielskripten sehen kann, werden jetzt Skripte zum Wechseln von Szenen in verwendet Spiel. .
Ändern Sie das JSON-Skript wie folgt

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"}
		]
	}


};
Nach dem Login kopieren


Wie Sie sehen können, habe ich stage02, die zweite Szene, hinzugefügt und den Sprungknoten in das Skript eingeführt, um die Spielszene zu steuern Umschalten, wobei at in jump die Koordinate darstellt, zu der sich der Spielprotagonist bewegt, und to den Namen des Bildschirms darstellt, zu dem nach Erreichen dieser Koordinate gesprungen werden soll. Der Grund, warum der Sprung hier ein Array ist, liegt darin, dass eine Szene auch zu mehreren anderen Szenen springen kann.
Das obige Skript realisiert den gegenseitigen Sprung zwischen den Szenen Stage01 und Stage02.
Um diesen Sprung zu lesen und zu implementieren, müssen wir beurteilen, ob er springen soll, nachdem sich der Spielprotagonist einen Schritt bewegt hat, und die Onmove-Methode der Character-Klasse ändern 

/**
 * 开始移动 
 **/
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);
	}
};
Nach dem Login kopieren

Ich habe eine Zeile 

if(self.isHero && self.moveIndex > 0)checkJump();
Nach dem Login kopieren

hinzugefügt, um anzuzeigen, dass nach der Bewegung, wenn der Charakter der Protagonist des Spiels ist, ein Sprungurteil gefällt wird
Also müssen wir a hinzufügen checkJump-Methode 

//游戏场景跳转测试
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;
		}
	}
}
Nach dem Login kopieren

Okay, alles ist ganz einfach und sehen Sie den Effekt. Wenn der kleine Naruto zur Tür des kleinen Raums auf der Karte geht, springt die Szene

Spieltest-URL:

http://lufylegend.com/demo/rpg/index.html


Das lufylegend.js-Engine-Paket enthält diese Demo. Bitte laden Sie die lufylegend.js-Engine direkt herunter und sehen Sie sich den Quellcode im Engine-Paket an

Download-Adresse der lufylegend.js-Engine

http://lufylegend.com/lufylegend

Das Obige ist HTML5-Spieleentwicklung – nullbasierte Entwicklung von RPG-Spielen – Open-Source-Vorlesung ( 4) - Spielskripte und Map-Jump-Inhalte. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (m.sbmmt.com)!



Verwandte Etiketten：
html5，RPG游戏，脚本化
Quelle：php.cn
Vorheriger Artikel：HTML5-Spieleentwicklung – Box2dWebanwendung (1) – Erstellen Sie verschiedene starre Körper Nächster Artikel：HTML5-Spieleentwicklung – Zero-basierte Entwicklung von RPG-Spielen – Open-Source-Vorlesung (3) – Scroll- und Dialog-Implementierung
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...
Aus 2024-04-29 11:01:01
0
3
2157
So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
Aus 2024-04-23 00:22:19
0
11
2309
Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
Aus 2024-04-19 15:37:47
0
1
1946
Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...
Aus 2024-04-18 23:52:34
0
1
1820
Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
Aus 2024-04-16 10:10:18
0
0
1874
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage