零基础开发RPG游戏开源讲座(四)-游戏脚本化&地图跳转-Tutorial H5-php.cn

Rumah

hujung hadapan web

Tutorial H5

零基础开发RPG游戏开源讲座(四)-游戏脚本化&地图跳转

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 17, 2016 am 09:09 AM

admin h

了解上三篇的内容请点击：

html5[color=rgb(68, 68, 68) !important]游戏开发-零基础开发RPG游戏-开源讲座(一)

http://www.html5cn.org/article-1737-1.html

html5游戏开发-零基础开发RPG游戏-开源讲座(二)-跑起来吧英雄

http://www.html5cn.org/article-1738-1.html

html5游戏开发-零基础开发RPG游戏-开源讲座(三)-卷轴&对话实现

http://www.html5cn.org/article-1740-1.html

首先，本篇文章是零基础开发RPG游戏-开源讲座系列文章的第四篇，来实现游戏的脚本化，和利用游戏脚本实现地图场景的切换。如下应该是我们先了解的。

一，什么是游戏脚本

简单说，游戏脚本就是依据一定的格式编写的可执行文件，游戏可以通过脚本中自定义的语句来执行相应的逻辑。

二，为什么要将游戏脚本化

游戏脚本，可以令我们的游戏动态化，比如当我们开发了一款rpg游戏，里面的剧情，事件以及地图等，我们如果将这些全部写进程序里，当然是可以的，但是一旦出现问题，哪怕几个错别字，我们需要先将这几个错别字改正，并且将整个程序重新编译发布一遍，这个过程是相当令人反感的，因为如果游戏的程序跟着游戏的内容不断进行修改的话，那只会使你的程序越来越复杂。但是如果我们将这些可重复的数据，都定义到游戏程序之外的文件里面，当游戏引擎开发完毕，我们的游戏通过读取这些外部文件，来执行相应的剧情和事件，那么，像上述当我们的游戏出现了问题，我们只需要改动这些外部文件就可以了，并不需要重新编译整个程序，这样便使得我们的游戏开发，变得便利简洁。

*当然，对于html5来说，不需要重新编译程序，但是对于rpg的游戏来说，脚本还是必不可少的，因为游戏的剧本不可能全都写到程序里。

三，如何来实现游戏的脚本化

好了，接下来，先来考虑以什么形式来制作游戏的脚本，我们有多种选择，可以选择xml，可以选择json，也可以选择纯自定义语法，

这次，我为了省事，选用比较方便处理的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方法是legendForHtml5Programming引擎独有的方法，可以用来移出LScript显示层上的所有子对象，从而实现本游戏中各个显示层的初始化工作。

修改一下addChara方法，如下

//添加人物
function addChara(){
var charaList = stage.add;
var chara,charaObj;
for(var i=0;i ;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 ;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://fsanguo.comoj.com/html5/rpg5/index.html

本次更新源代码下载：

http://legend-demo.googlecode.com/files/rpg5.zip

本文转自个人博客：http://blog.csdn.net/lufy_legend

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

1 bulan yang lalu By DDD

R.E.P.O. Simpan Fail Lokasi: Di manakah & bagaimana untuk melindunginya?

1 bulan yang lalu By DDD

R.E.P.O. Tetapan grafik terbaik

2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

1 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7390

Tutorial Java

1630

Tutorial CakePHP

1357

Tutorial Laravel

1268

Tutorial PHP

1216

Tunjukkan Lagi

Related knowledge

Cara uniapp mencapai penukaran pantas antara program mini dan H5 Oct 20, 2023 pm 02:12 PM

Bagaimana uniapp boleh mencapai penukaran pantas antara program mini dan H5 memerlukan contoh kod khusus Dalam beberapa tahun kebelakangan ini, dengan perkembangan Internet mudah alih dan populariti telefon pintar, program mini dan H5 telah menjadi bentuk aplikasi yang sangat diperlukan. Sebagai rangka kerja pembangunan merentas platform, uniapp boleh dengan cepat merealisasikan penukaran antara program kecil dan H5 berdasarkan set kod, meningkatkan kecekapan pembangunan. Artikel ini akan memperkenalkan cara uniapp boleh mencapai penukaran pantas antara program mini dan H5, dan memberikan contoh kod khusus. 1. Pengenalan kepada uniapp unia

Versi mana yang lebih stabil: win1121h2 atau 22h2? Jan 04, 2024 am 08:53 AM

Membandingkan dua versi win1121h2 dan 22h2, 22h2 yang terakhir adalah lebih stabil, dan 22h2 mempunyai lebih banyak fungsi Berbanding dengan 21h2 sebelumnya, banyak fungsi telah dipertingkatkan. Mana satu lebih stabil, win1121h2 atau 22h2: Jawapan: 22h2 adalah lebih stabil. 22h2 menambah banyak ciri, dan masalah 21h2 juga telah diperbaiki dalam 22h2. Ciri kemas kini 22h2: Folder aplikasi dalam menu mula. Kawasan tetap boleh laras dalam menu Mula. Seret dan lepas pada bar tugas. Focus Assist disepadukan dengan Pusat Pemberitahuan. Ciri kertas dinding "Spotlight" baharu. baru

Apakah peranan dan penggunaan pemantauan pentadbir springboot May 25, 2023 pm 06:52 PM

Senario yang boleh digunakan: 1. Skala projek tidak besar 2. Bilangan pengguna tidak terlalu besar, dan keperluan bersamaan tidak kuat 3. Tiada daya operasi dan penyelenggaraan yang khusus projek biasa, atau unit di mana pembahagian tanggungjawab tidak begitu jelas. Selalunya sistem pergi daripada keperluan kepada reka bentuk, pembangunan, ujian kepada pelancaran akhir, operasi dan penyelenggaraan. Selalunya 80% daripada tugasan diselesaikan oleh pasukan pembangunan. Oleh itu, selain melaksanakan fungsi sistem, pembangun juga mesti menyediakan pelanggan dengan perundingan dan menjawab soalan dan menyelesaikan masalah pengeluaran. Cuba bayangkan, selepas sesuatu aplikasi dilancarkan, tiada langkah pemantauan. Sama seperti memandu kereta tanpa sebarang papan pemuka, tiada siapa yang berasa selamat di jalan raya seperti ini. Cara mengimbangi kesederhanaan dan kecekapan adalah sesuatu yang patut difikirkan. 1. Springb

Manakah pilihan yang lebih baik: win1123h2 atau 22h2? Dec 28, 2023 pm 03:09 PM

Versi 23h2 dan versi 22h2 dalam sistem Windows 11 masing-masing akan dikeluarkan pada 2023 dan 2022 Secara umumnya, kemas kini sistem semakin baik dan lebih baik. Mana satu lebih baik, win1123h2 atau 22h2 Jawapan: win1123h2 lebih baik. Menurut laporan, win1123h2 ialah kemas kini versi kumulatif dari 22h2 ke versi seterusnya, dan semuanya adalah platform yang sama. Ini bermakna tiada isu keserasian antara kedua-dua versi adalah disyorkan agar anda mengemas kininya tepat pada masanya. Versi win1123h2 membawakan kita banyak ciri praktikal, seperti mod tidak pernah bergabung untuk aplikasi tetingkap bar tugas. Ada lagi

Mana yang lebih baik antara win101909 dan 21h2? Dec 26, 2023 pm 02:01 PM

Windows 101909 pada masa ini dianggap sebagai salah satu versi yang paling stabil dan boleh dipercayai Walau bagaimanapun, malangnya, sokongan perkhidmatan untuk versi ini telah tamat baru-baru ini. 21H2 adalah versi yang agak stabil Malah, dari situasi sebenar, kedua-duanya adalah pilihan yang sangat baik. Mana yang lebih baik, win101909 atau 21h2 Jawapan: 1909 lebih stabil, dan 21h2 akan lebih selamat. Dalam persekitaran semasa, 1909 masih dianggap sebagai salah satu versi yang paling stabil dan boleh dipercayai. Walau bagaimanapun, versi Win101909 telah dihentikan secara rasmi pada 11 Mei 2021. WindowsServer21h2 komited untuk menyediakan sokongan fungsi IT yang lebih profesional kepada majoriti pengguna. 1. Selepas ujian sebenar oleh ramai pengguna,

Anda memerlukan kebenaran yang diberikan oleh pentadbir untuk membuat perubahan pada fail ini. Bagaimana untuk menyelesaikan masalah ini? Jul 26, 2023 am 10:56 AM

Anda memerlukan kebenaran yang diberikan oleh pentadbir untuk membuat perubahan pada fail ini Penyelesaian: 1. Selepas memilih akaun pentadbir pada antara muka log masuk dan memasukkan kata laluan, anda boleh mengubah suai fail dengan lancar 2. Anda boleh klik kanan fail dan pilih Kaedah "Sebagai Pentadbir" "Jalankan sebagai" 3. Ubah suai kebenaran fail, klik kanan fail, pilih "Properties", klik tab "Security", kemudian klik butang "Edit", pilih nama pengguna anda, dan kemudian semak Pilihan "Kawalan Penuh" ; 4. Gunakan prompt arahan untuk menyelesaikan masalah 5. Tetapkan kebenaran UA.

Cara menggunakan Flask-Admin untuk melaksanakan antara muka pengurusan latar belakang Aug 03, 2023 pm 11:30 PM

Cara menggunakan Flask-Admin untuk melaksanakan antara muka pengurusan bahagian belakang Pengenalan latar belakang: Dengan pembangunan tapak web dan aplikasi, antara muka pengurusan bahagian belakang menjadi semakin penting. Semasa proses pembangunan, kami sering memerlukan antara muka pengurusan bahagian belakang yang mudah dan pantas untuk mengurus data, pengguna dan maklumat penting lain. Flask-Admin ialah sambungan Flask yang berkuasa dan mudah digunakan yang boleh membantu kami melaksanakan antara muka pengurusan latar belakang dengan cepat. Flask-Admin ialah projek sumber terbuka berdasarkan Flask dan SQLAlchemy

Bagaimana untuk mengemas kini Win101909 kepada 20H2 Jan 05, 2024 pm 09:53 PM

Kini versi win101909 telah berhenti mengemas kini, begitu ramai pengguna ingin mengemas kini versi sistem mereka tetapi tidak tahu cara melakukannya. Pengguna hanya perlu memasukkan tetapan komputer untuk mencari peningkatan yang sepadan. Cara mengemas kini win101909 ke 20h21 Klik butang Mula Komputer, kemudian klik "Tetapan" 2. Kemudian klik "Kemas Kini dan Keselamatan" 3. Cari Semak Kemas Kini di sini 4. Kemudian cari versi yang sepadan dan klik Muat turun dan Pasang, kemudian tunggu. komputer untuk mengemas kini sendiri Itu sahaja.

See all articles