HTML 5开发RPG游戏之四(游戏脚本化)

首先,本篇文章是零基础开发RPG游戏-开源讲座系列文章的第四篇,来实现游戏的脚本化,和利用游戏脚本实现地图场景的切换,离上次更新貌似很长时间了,你在看下面的文字之前,需要先了解前三篇在下啰嗦了些什么东东。

萨尔图ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联公司的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18982081108(备注:SSL证书合作)期待与您的合作!

一,什么是游戏脚本

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

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

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

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

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

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

这次,我为了省事,选用比较方便处理的json,因为javascript可以很轻松的处理json数据。

目前游戏中实现的内容有,地图场景添加,游戏人物添加,以及人物对话的实现。那么,我在设计游戏脚本的时候,必须包含这些数据,然后才能将这三项功能用脚本来控制。

首先看下面的json

 
 
 
 
  1. var script = {  
  2.     stage01:{  
  3.         map:[  
  4.             [18,18,18,18,18,18,18,18,18,18,18,18,55,55,18,18,18],  
  5.             [18,18,18,17,17,17,17,17,17,17,17,17,55,55,17,17,18],  
  6.             [18,18,17,17,17,17,18,18,17,17,17,17,55,55,17,17,18],  
  7.             [18,17,17,17,18,18,18,18,18,17,17,55,55,17,17,17,18],  
  8.             [18,17,17,18,22,23,23,23,24,18,17,55,55,17,17,17,18],  
  9.             [18,17,17,18,25,28,26,79,27,18,55,55,17,17,17,17,18],  
  10.             [18,17,17,17,17,10,11,12,18,18,55,55,17,17,17,17,18],  
  11.             [18,18,17,17,10,16,16,16,11,55,55,17,17,17,17,17,18],  
  12.             [18,18,17,17,77,16,16,16,16,21,21,17,17,17,17,17,18],  
  13.             [18,18,17,17,77,16,16,16,16,55,55,17,17,17,17,17,18],  
  14.             [18,18,18,18,18,18,18,18,18,55,55,18,18,18,18,18,18]],  
  15.         mapdata:[  
  16.             [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],  
  17.             [1,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0,1],  
  18.             [1,1,0,0,0,0,1,1,0,0,0,0,1,1,0,0,1],  
  19.             [1,0,0,0,1,1,1,1,1,0,0,1,1,0,0,0,1],  
  20.             [1,0,0,1,1,1,1,1,1,1,0,1,1,0,0,0,1],  
  21.             [1,0,0,1,1,1,0,1,1,1,1,1,0,0,0,0,1],  
  22.             [1,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,1],  
  23.             [1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1],  
  24.             [1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],  
  25.             [1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1],  
  26.             [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]],  
  27.         add:[  
  28.              {chara:"player",img:"mingren",x:5,y:6},  
  29.              {chara:"npc",img:"npc1",x:7,y:6},  
  30.              {chara:"npc",img:"npc1",x:3,y:3}],  
  31.         talk:{  
  32.             talk1:[  
  33.                       {img:"m",name:"鸣人",msg:"我是木叶村的鸣人,你是谁?"},  
  34.                       {img:"n",name:"黑衣忍者甲",msg:"你就是鸣人?九尾还在你身体里吗?"}  
  35.                   ],  
  36.             talk2:[  
  37.                       {img:"n",name:"黑衣忍者乙",msg:"鸣人,听说忍者大战就要开始了。"},  
  38.                       {img:"m",name:"鸣人",msg:"真的吗?一定要想想办法啊。"}  
  39.                   ]  
  40.         }  
  41.     }  
  42.  
  43.  
  44. }; 

我将脚本定义成了变量,实际游戏制作的时候,脚本应该储存到一个外部文档当中,在这里我只是讲解一下理论,如何完善那是后话了,哈。

可以看到,json中,包含了地图相关的map数组和mapdata数组,添加人物的相关数据,以及对话的数组。这样,我在游戏显示的时候,只需要读入json数据,然后根据这些内容来显示游戏画面就可以了,定义一个initScript函数来进行这些操作。

 
 
 
 
  1. function initScript(){  
  2.     //地图位置初始化  
  3.     mapLayer.x = 0;  
  4.     mapLayer.y = 0;  
  5.  
  6.  
  7.     //地图层初始化  
  8.     mapLayer.removeAllChild();  
  9.     //人物层初始化  
  10.     charaLayer.removeAllChild();  
  11.     //效果层初始化  
  12.     effectLayer.removeAllChild();  
  13.     //对话层初始化  
  14.     talkLayer.removeAllChild();  
  15.       
  16.     //地图数据获取  
  17.     map = stage.map;  
  18.     mapdata = stage.mapdata;  
  19.     //对话数据获取  
  20.     talkScriptList = stage.talk;  
  21.       
  22.     //添加地图  
  23.     addMap(0,0);  
  24.     delMap();  
  25.     //添加人物  
  26.     addChara();  

removeAllChild方法是legendForHtml5Programming引擎独有的方法,可以用来移出LScript显示层上的所有子对象,从而实现本游戏中各个显示层的初始化工作。

修改一下addChara方法,如下

 
 
 
 
  1. //添加人物  
  2. function addChara(){  
  3.     var charaList = stage.add;  
  4.     var chara,charaObj;  
  5.     for(var i=0;i
  6.         charaObj = charaList[i];  
  7.         if(charaObj.chara == "player"){  
  8.             //加入英雄  
  9.             bitmapdata = new LBitmapData(imglist[charaObj.img]);  
  10.             chara = new Character(true,i,bitmapdata,4,4);  
  11.             player = chara;  
  12.         }else{  
  13.             //加入npc  
  14.             bitmapdata = new LBitmapData(imglist[charaObj.img]);  
  15.             chara = new Character(false,i,bitmapdata,4,4);  
  16.         }  
  17.         chara.x = charaObj.x * 32;  
  18.         chara.y = charaObj.y * 32;  
  19.         charaLayer.addChild(chara);  
  20.     }  

即,根据json脚本中的add数组,来添加游戏中的人物。

好了,运行一下游戏,可以看到,游戏正常显示了,和之前一模一样,实现了同样的功能.

#p#

四,利用游戏脚本实现地图的切换

为了让大家看到游戏脚本的便利性,现在利用脚本实现游戏中的场景切换。

将json脚本修改如下

 
 
 
 
  1. var script = {  
  2.     stage01:{  
  3.         map:[  
  4.             [18,18,18,18,18,18,18,18,18,18,18,18,55,55,18,18,18],  
  5.             [18,18,18,17,17,17,17,17,17,17,17,17,55,55,17,17,18],  
  6.             [18,18,17,17,17,17,18,18,17,17,17,17,55,55,17,17,18],  
  7.             [18,17,17,17,18,18,18,18,18,17,17,55,55,17,17,17,18],  
  8.             [18,17,17,18,22,23,23,23,24,18,17,55,55,17,17,17,18],  
  9.             [18,17,17,18,25,28,26,79,27,18,55,55,17,17,17,17,18],  
  10.             [18,17,17,17,17,10,11,12,18,18,55,55,17,17,17,17,18],  
  11.             [18,18,17,17,10,16,16,16,11,55,55,17,17,17,17,17,18],  
  12.             [18,18,17,17,77,16,16,16,16,21,21,17,17,17,17,17,18],  
  13.             [18,18,17,17,77,16,16,16,16,55,55,17,17,17,17,17,18],  
  14.             [18,18,18,18,18,18,18,18,18,55,55,18,18,18,18,18,18]],  
  15.         mapdata:[  
  16.             [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],  
  17.             [1,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0,1],  
  18.             [1,1,0,0,0,0,1,1,0,0,0,0,1,1,0,0,1],  
  19.             [1,0,0,0,1,1,1,1,1,0,0,1,1,0,0,0,1],  
  20.             [1,0,0,1,1,1,1,1,1,1,0,1,1,0,0,0,1],  
  21.             [1,0,0,1,1,1,0,1,1,1,1,1,0,0,0,0,1],  
  22.             [1,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,1],  
  23.             [1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1],  
  24.             [1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],  
  25.             [1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1],  
  26.             [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]],  
  27.         add:[  
  28.              {chara:"player",img:"mingren",x:5,y:6},  
  29.              {chara:"npc",img:"npc1",x:7,y:6},  
  30.              {chara:"npc",img:"npc1",x:3,y:3}],  
  31.         talk:{  
  32.             talk1:[  
  33.                       {img:"m",name:"鸣人",msg:"我是木叶村的鸣人,你是谁?"},  
  34.                       {img:"n",name:"黑衣忍者甲",msg:"你就是鸣人?九尾还在你身体里吗?"}  
  35.                   ],  
  36.             talk2:[  
  37.                       {img:"n",name:"黑衣忍者乙",msg:"鸣人,听说忍者大战就要开始了。"},  
  38.                       {img:"m",name:"鸣人",msg:"真的吗?一定要想想办法啊。"}  
  39.                   ]  
  40.         },  
  41.         jump:[  
  42.               {at:{x:6,y:5},to:"stage02"}  
  43.         ]  
  44.     },  
  45.     stage02:{  
  46.         map:[  
  47.             [0,0,1,2,2,2,2,2,2,2,2,1,0,0,0],  
  48.             [0,0,1,3,5,5,1,5,5,5,5,1,0,0,0],  
  49.             [0,0,1,80,4,4,1,80,4,4,4,1,0,0,0],  
  50.             [0,0,1,80,4,4,1,80,8,7,8,1,0,0,0],  
  51.             [0,0,1,80,4,4,5,81,4,4,4,1,0,0,0],  
  52.             [0,0,1,2,2,2,6,4,4,4,4,1,0,0,0],  
  53.             [0,0,1,3,5,5,81,4,4,4,4,1,0,0,0],  
  54.             [0,0,1,80,4,4,4,4,4,4,9,1,0,0,0],  
  55.             [0,0,1,2,2,2,2,6,2,2,2,1,0,0,0]],  
  56.         mapdata:[  
  57.             [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],  
  58.             [1,1,1,0,0,0,1,0,0,0,0,1,1,1,1],  
  59.             [1,1,1,0,0,0,1,0,0,0,0,1,1,1,1],  
  60.             [1,1,1,0,0,0,1,0,0,1,0,1,1,1,1],  
  61.             [1,1,1,0,0,0,0,0,0,0,0,1,1,1,1],  
  62.             [1,1,1,1,1,1,0,0,0,0,0,1,1,1,1],  
  63.             [1,1,1,0,0,0,0,0,0,0,0,1,1,1,1],  
  64.             [1,1,1,0,0,0,0,0,0,0,1,1,1,1,1],  
  65.             [1,1,1,1,1,1,1,0,1,1,1,1,1,1,1]],  
  66.         add:[  
  67.              {chara:"player",img:"mingren",x:7,y:8},  
  68.              {chara:"npc",img:"npc1",x:8,y:3},  
  69.              {chara:"npc",img:"npc1",x:10,y:3}],  
  70.         talk:{  
  71.               talk1:[  
  72.                         {img:"m",name:"鸣人",msg:"你们在干什么啊?"},  
  73.                         {img:"n",name:"黑衣忍者甲",msg:"我们在喝茶。"}  
  74.                   ],  
  75.               talk2:[  
  76.                         {img:"n",name:"黑衣忍者乙",msg:"我们在喝茶,你不要打扰我们。"},  
  77.                         {img:"m",name:"鸣人",msg:"....."}  
  78.                   ]  
  79.         },  
  80.         jump:[  
  81.               {at:{x:7,y:8},to:"stage01"}  
  82.         ]  
  83.     }  
  84.  
  85.  
  86. }; 

可以看到,我添加了stage02,即第二个场景,并且在脚本里引入了jump节点来控制游戏场景的切换,其中jump中的at表示游戏主人公移动到达的坐标,to表示到达这个坐标后跳转到的画面名称。这里的jump之所以是数组,是因为一个场景也可以跳转到其他多个场景。

上面的脚本实现了stage01和stage02两个场景的互相跳转。

为了读取这个jump,以及实现跳转,我们需要在游戏主人公移动一个步长之后,判断一下是否应该跳转了,修改Character类的onmove方法

 
 
 
 
  1. /**  
  2.  * 开始移动   
  3.  **/ 
  4. Character.prototype.onmove = function (){  
  5.     var self = this;  
  6.     //设定一个移动步长中的移动次数  
  7.     var ml_cnt = 4;  
  8.     //计算一次移动的长度  
  9.     var ml = STEP/ml_cnt;  
  10.     //根据移动方向,开始移动  
  11.     switch (self.direction){  
  12.         case UP:  
  13.             if(mapmove){  
  14.                 mapLayer.y += ml;  
  15.                 charaLayer.y += ml;  
  16.             }  
  17.             self.y -= ml;  
  18.             break;  
  19.         case LEFT:  
  20.             if(mapmove){  
  21.                 mapLayer.x += ml;  
  22.                 charaLayer.x += ml;  
  23.             }  
  24.             self.x -= ml;  
  25.             break;  
  26.         case RIGHT:  
  27.             if(mapmove){  
  28.                 mapLayer.x -= ml;  
  29.                 charaLayer.x -= ml;  
  30.             }  
  31.             self.x += ml;  
  32.             break;  
  33.         case DOWN:  
  34.             if(mapmove){  
  35.                 mapLayer.y -= ml;  
  36.                 charaLayer.y -= ml;  
  37.             }  
  38.             self.y += ml;  
  39.             break;  
  40.     }  
  41.     self.moveIndex++;  
  42.     //当移动次数等于设定的次数,开始判断是否继续移动  
  43.     if(self.moveIndex >= ml_cnt){  
  44.         //一个地图步长移动完成后,判断地图是否跳转  
  45.         if(self.isHero && self.moveIndex > 0)checkJump();  
  46.         self.moveIndex = 0;  
  47.         //一个地图步长移动完成后,如果地图处于滚动状态,则移除多余地图块  
  48.         if(mapmove)delMap();  
  49.         //如果已经松开移动键,或者前方为障碍物,则停止移动,否则继续移动  
  50.         if(!isKeyDown || !self.checkRoad()){  
  51.             self.move = false;  
  52.             return;  
  53.         }else if(self.direction != self.direction_next){  
  54.             self.direction = self.direction_next;  
  55.             self.anime.setAction(self.direction);  
  56.         }  
  57.         //地图是否滚动  
  58.         self.checkMap(self.direction);  
  59.     }  
  60. }; 

我添加了一行

 
 
 
 
  1. if(self.isHero && self.moveIndex > 0)checkJump(); 

表示,移动完后如果该人物是游戏主人公则进行跳转判断

所以,我们需要添加一个checkJump方法

 
 
 
 
  1. //游戏场景跳转测试  
  2. function checkJump(){  
  3.     var jump = stage.jump;  
  4.     var jumpstage;  
  5.     for(var i=0;i
  6.         jumpjumpstage = jump[0];  
  7.         if(player.x == jumpstage.at.x * 32 && player.y == jumpstage.at.y * 32){  
  8.             //获取该场景脚本数据  
  9.             stage = script[jumpstage.to];  
  10.             //开始跳转  
  11.             initScript(stage);  
  12.             return;  
  13.         }  
  14.     }  

好了,一切都很简单吧,运行游戏看看效果吧,小鸣人走到地图的小房门的部分是,场景发生跳转

游戏测试URL:http://fsanguo.comoj.com/html5/rpg5/index.html

本次更新源代码下载:http://fsanguo.comoj.com/html5/rpg5/rpg5.rar

网页题目:HTML 5开发RPG游戏之四(游戏脚本化)
转载来于:http://www.mswzjz.com/qtweb/news44/206794.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联