まず、この記事は、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) にご注意ください。
H5は何を参照していますか？コンテキストの探索Apr 12, 2025 am 12:03 AMH5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1）html5introduceSnewelementsandapisforrich、dynamicwebapplications.2）Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3）semanticelementsimprovecontentstructurendseo.4）H5'srespo
H5：ツール、フレームワーク、およびベストプラクティスApr 11, 2025 am 12:11 AMH5開発で習得する必要があるツールとフレームワークには、Vue.JS、React、Webpackが含まれます。 1.Vue.jsは、ユーザーインターフェイスの構築に適しており、コンポーネント開発をサポートします。 2.複雑なアプリケーションに適した仮想DOMを介したページレンダリングを最適化します。 3.Webpackは、モジュールのパッケージングに使用され、リソースの読み込みを最適化します。
HTML5の遺産：現在のH5の理解Apr 10, 2025 am 09:28 AMhtml5hassificlytransformdedwebdeveverment byintroducingsingingelements、endincemultimediasupport、およびrequrovingperformance.1）itmadewebsitesmoreaccessibleandseo-frendlywithsemantelementslike、and.2）
H5コード：アクセシビリティとセマンティックHTMLApr 09, 2025 am 12:05 AMH5は、セマンティック要素とARIA属性を介して、WebページのアクセシビリティとSEO効果を改善します。 1.使用などを使用して、コンテンツ構造を整理し、SEOを改善します。 2。ARIA-LabelなどのARIA属性はアクセシビリティを強化し、支援技術ユーザーはWebページをスムーズに使用できます。
H5はHTML5と同じですか？Apr 08, 2025 am 12:16 AM「H5」と「HTML5」はほとんどの場合同じですが、特定の特定のシナリオでは異なる意味を持つ可能性があります。 1。「HTML5」は、新しいタグとAPIを含むW3C定義標準です。 2。 "H5"は通常、HTML5の略語ですが、モバイル開発では、HTML5に基づくフレームワークを参照する場合があります。これらの違いを理解することは、プロジェクトでこれらの用語を正確に使用するのに役立ちます。
H5の機能は何ですか？Apr 07, 2025 am 12:10 AMH5、またはHTML5は、HTMLの5番目のバージョンです。開発者により強力なツールセットを提供し、複雑なWebアプリケーションを簡単に作成できるようにします。 H5のコア関数には、次のものが含まれます。1）Webページにグラフィックとアニメーションを描画できる要素。 2）Webページ構造をSEOの最適化を明確かつ助長させるなどのセマンティックタグなど。 3）Geolocationapiなどの新しいAPIは、ロケーションベースのサービスをサポートします。 4）互換性テストとポリフィルライブラリを通じて、クロスブラウザーの互換性を確保する必要があります。
H5リンクの実行方法Apr 06, 2025 pm 12:39 PMH5リンクを作成する方法は？リンクターゲットを決定します。H5ページまたはアプリケーションのURLを取得します。 HTMLアンカーの作成：＆lt; a＆gt;を使用しますアンカーを作成し、リンクターゲットURLを指定するタグ。リンクプロパティの設定（オプション）：必要に応じて、ターゲット、タイトル、およびオンクリックプロパティを設定します。 Webページに追加：リンクを表示するWebページにHTMLアンカーコードを追加します。
H5互換性の問題を解決する方法Apr 06, 2025 pm 12:36 PMH5互換性の問題のソリューションには、次のものが含まれます。Webページが画面サイズに応じてレイアウトを調整できるレスポンシブデザインを使用します。クロスブラウザーテストツールを使用して、リリース前に互換性をテストします。 PolyFillを使用して、古いブラウザの新しいAPIのサポートを提供します。 Web標準に従って、効果的なコードとベストプラクティスを使用します。 CSSプリプロセッサを使用して、CSSコードを簡素化し、可読性を向上させます。画像を最適化し、Webページのサイズを削減し、ロードをスピードアップします。 HTTPSがWebサイトのセキュリティを確保できるようにします。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
