コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > 本文

HTML5ゲーム開発 - RPGゲームのゼロベース開発 - オープンソース講座(4) - ゲームスクリプティング＆マップジャンプ

黄舟
リリース： 2017-03-02 14:08:40
オリジナル
2508 人が閲覧しました


まず、この記事は、RPGゲームのゼロベース開発 - ゲームのスクリプト化を実現し、ゲームスクリプトを使用してマップシーンを切り替えるためのオープンソース講座シリーズの第4回目の記事であるようです。前回の更新から長い時間が経ちました。次の文章を読む前に、以下の最初の 3 つの記事の内容を理解する必要があります。

1. ゲーム スクリプトとは何ですか? 簡単に言えば、ゲーム スクリプトは、スクリプト内のカスタマイズされたステートメントを通じて、対応するロジックを実行できる、特定の形式で記述された実行可能ファイルです。


第二に、なぜゲームをスクリプト化する必要があるのか​​

たとえば、RPG ゲームを開発する場合、プロット、イベント、マップなどをすべてプログラム内に記述すると、ゲーム スクリプトを使用してゲームを動的にすることができます。もちろん可能ですが、問題が発生すると、たとえいくつかのタイプミスであっても、まずこれらのタイプミスを修正し、プログラム全体を再コンパイルしてリリースする必要があります。ゲームのプログラムが常に変更されている場合、このプロセスは非常に好ましくありません。ゲームの内容によっては、プログラムがますます複雑になるだけです。しかし、これらの反復可能なデータをゲーム プログラムの外部のファイルに定義すると、ゲーム エンジンの開発時に、ゲームはこれらの外部ファイルを読み取って対応するプロットとイベントを実行します。その後、前述したように、ゲームに問題がある場合、これらの外部ファイルを変更するだけでよく、プログラム全体を再コンパイルする必要がないため、ゲーム開発が便利かつ簡潔になります。

* もちろん、HTML5 の場合はプログラムを再コンパイルする必要はありませんが、RPG ゲームの場合は、すべてのゲーム スクリプトをプログラムに書き込むことは不可能であるため、スクリプトは依然として不可欠です...


3ゲームのスクリプトを作成する方法

それでは、まず、ゲーム スクリプトの作成にどのような形式を使用するかを考えてみましょう。xml を選択することも、json を選択することも、純粋なカスタム構文を選択することもできます。

例えば私が開発したフラッシュゲームスクリプトL#はjsonデータを簡単に扱えます。

現在ゲームに実装されている内容には、マップシーンの追加、ゲームキャラクターの追加、キャラクターダイアログの実装などが含まれます。そして、ゲーム スクリプトを設計するときに、これらのデータを含める必要があります。そうすれば、これら 3 つの機能をスクリプトで制御できるようになります。
まずは以下の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には、マップに関連するマップ配列とマップデータ配列、キャラクターに関連する追加データ、ダイアログの配列が含まれていることがわかります。このように、ゲームを表示する際には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"}
		]
	}


};
ログイン後にコピー

ご覧のとおり、2 番目のシーンである stage02 を追加し、ゲーム シーンの切り替えを制御するジャンプ ノードをスクリプトに導入しました。ゲームの主人公が到達した座標。 to はその座標に到達した後にジャンプする画面の名前を表します。ここでジャンプが配列である理由は、1 つのシーンが他の複数のシーンにもジャンプできるためです。

上記のスクリプトは、stage01とstage02のシーン間の相互ジャンプを実現しています。
このジャンプを読み込んでジャンプを実装するには、ゲームの主人公が一歩進んだ後にジャンプするかどうかを判断し、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();
ログイン後にコピー

を追加しましたExpress 、移動後、キャラクターがゲームの主人公の場合、ジャンプ判定が行われます
そこで、 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 エンジン パッケージにはこのデモが含まれています。lufylegend.js エンジンを直接ダウンロードして、エンジン パッケージ内のソース コードを表示してください

lufylegend.js エンジンのダウンロード アドレス

http://lufylegend.com/lufylegend

以上がhtml5ゲーム開発〜RPGゲームのゼロベース開発〜オープンソース講座(4)〜ゲームスクリプティング＆マップジャンプの内容です、その他の関連コンテンツ PHP 中国語 Web サイト (www.php.cn) にご注意ください。



関連ラベル：
html5，RPG游戏，脚本化
ソース：php.cn
前の記事：HTML5ゲーム開発～Box2dWebアプリケーション(1)～各種剛体作成 次の記事：HTML5ゲーム開発 - RPGゲームのゼロベース開発 - オープンソース講座(3) - スクロール&ダイアログ実装
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1955
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
2117
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1786
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1687
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1696
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート