• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 零基础开发RPG游戏开源讲座(四)-游戏脚本化&地图跳转

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

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含HTML5教程,HTML5中国,零基础开发RPG游戏开源讲座(四)-游戏脚本化&地图跳转,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
  • 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函数来进行这些操作。
  • //地图位置初始化
  • 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
  • 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 = n
  • 您可能想查找下面的文章:

    • 一款利用html5和css3动画排列人物头像的实例演示
    • html5教程调用绘图api画简单的圆形代码分享
    • html5教程画矩形代码分享
    • html5教程制作简单画板代码分享
    • html5基础教程常用技巧整理
    • html5教程-Canvas入门
    • html5教程画矩形代码分享
    • HTML5晃动DeviceMotionEvent事件
    • HTML5教程之html 5 本地数据库(Web Sql Database)
    • HTML5中对contenteditable属性的解释与规定

    相关文章

    • 2018-12-03利用h5实现获取用户地理定位
    • 2018-12-03HTML5本地存储-详解IndexedDB的基本使用
    • 2018-12-03html5+css3实现一款注册表单实例_html5教程技巧
    • 2018-12-03举例详解HTML5中使用JSON格式提交表单_html5教程技巧
    • 2018-12-03h5页面如何调用摄像头代码分享
    • 2018-12-03HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览_html5教程技巧
    • 2018-12-03为什么有些网页一开始不显示内容,等不耐烦了关掉的时候却显示了内容一闪而过?
    • 2018-12-03借助HTML5 Canvas来绘制三角形和矩形等多边形的方法_html5教程技巧
    • 2018-12-03HTML5 Canvas平移,放缩,旋转图文代码详情
    • 2018-12-03有关基础模板的课程推荐

    文章分类

    • html/xhtml
    • html5
    • CSS
    • XML/XSLT
    • Dreamweaver教程
    • Frontpage教程
    • 心得技巧
    • bootstrap
    • vue
    • AngularJS
    • HBuilder教程
    • css3
    • 浏览器兼容
    • div/css
    • 网页编辑器
    • axure

    最近更新的内容

      • 想从零开始学习 HTML5 和 CSS,请问有没有比较好的建议?比如学习什么语言,有没有好的书或者教程推荐等等?
      • HTML5进阶段内联标签汇总(小篇)
      • HTML5 canvas实现可拖拽时钟的示例代码分享
      • html5在移动端的屏幕适应问题示例探讨_html5教程技巧
      • 使用HTML5 canvas实现一个简单的粒子引擎代码实例
      • 基于HTML5的可预览多图片Ajax上传
      • 移动端html5列表的制作方法
      • HTML5 canvas实现中奖转盘的实例代码
      • HTML5 script元素async、defer异步加载使用介绍
      • 利用css的 border-image 实现锯齿形

    关于我们 - 联系我们 - 免责声明 - 网站地图

    ©2020-2025 All Rights Reserved. linkedu.com 版权所有