html5游戏开发-零基础开发RPG游戏-开源讲座(一)

因为上一篇雷电的开发中，有朋友反应不太理解，本篇将以零基础的视点，来讲解如何开发一款RPG游戏。

在游戏的世界里，我们可以看到各种地图，各种游戏人物，看到人物在地图上行走，对话等，无论是地图还是人物，其实都是图片的处理与显示，把不同的图片显示到屏幕上，我们就看到不同的游戏界面，要想让这些图片同时显示到界面上，我们就需要处理好层次，让他们来分层显示，我们可以想象，如果游戏人物显示在地图的下层的话，显然会被地图遮挡住。
一款RPG游戏，我简单把它分为地图层，人物层，效果层(一些法术效果等)，对话层，控制层(按钮菜单等)。

如下图

我们只要依次将图片画在屏幕上，游戏人物将站在地图上，如果有对话，对话将出现在人物和地图的上面，而按钮等控件会出现在游戏的最外层

下面，我们一步步来实现一个简单的RPG游戏的开发

准备工作

一，库件下载

本游戏开发，需要用到开源库件：lufylegend，下载地址为：http://lufylegend.com/lufylegend

库件的开发过程请看这里

http://blog.csdn.net/lufy_legend/article/details/6844949

二，库件配置

首先建立一个文件夹rpg(你也可以起其他的名字)

然后将下载的库件解压，解压后将legend文件夹放到与rpg文件夹同目录
然后，在rpg文件夹里建一个index.html文件和一个js文件夹，在js文件夹里建一个Main.js文件

最后，在index.html里加入下面的代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rpg</title>
</head>
<body>
<div id="mylegend">loading……</div>
<!-- 引入LegendForHtml5Programming库件 -->
<script type="text/javascript" src="../legend/legend.js"></script>
<script type="text/javascript" src="./js/Main.js"></script>
</body></html>

当然，你也可以将legend文件夹放到其他地方，但是你需要修改legend文件夹下的legend.js文件中的LEGEND_PATH的值，来配置库件的路径

游戏地图的实现

接下来，我们先来画最底层的地图层，
地图当然就是是由图片来组成的，如何在画面上显示一张图片，我之前已经写过专门的文章，代码如下

var loader;
function main(){  loader = new LLoader();  loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);  loader.load("map.jpg","bitmapData");
}
function loadBitmapdata(event){  var bitmapdata = new LBitmapData(loader.content);  var bitmap = new LBitmap(bitmapdata);  addChild(bitmap);
}

如果想更详细了解的话，看下面的帖子
用仿ActionScript的语法来编写html5——第一篇，显示一张图片
http://blog.csdn.net/lufy_legend/article/details/6753032

游戏中的地图可以是一张比较大的图片，即整个图片就是游戏的地图，当人物或者地图移动的时候，改变图片显示的区域范围，从而实现地图的滚动和显示等，这样的话，必须为每个场景准备一张地图。

另外，地图也可以是由许多小的地图块儿来组成，比如，我们熟悉的《吞食天地》，《勇者斗恶龙》等经典小型rpg游戏，这样的地图，我们需要准备一张或几张地图块儿，把这些地图块组合成地图来显示，比如下图

在地图显示的时候，首先把图片切割，然后在根据预先设定好的位置显示到地图层上，这样我们就看到了一张完整的地图了

接下来，打开Main.js

在里面加入

init(50,"mylegend",480,320,main);

在lufylegend.js引擎中，用init这个函数来初始化canvas，上面的代码表示，初始化一个速度为50，名字为mylegend，大小为480*320的游戏界面，初始化完成后调用main(),这个速度值是说每个多少毫秒游戏循环一次，所以这个值设定的越小，游戏运行的速度就越快

因为要调用main方法，所以我们要写一个main方法，main方法里做一些简单的准备工作。

虽说读取图片只需要一个

loader.load("map.jpg","bitmapData");

但是游戏中往往用到很多张图片，你可以用到哪一张再加载哪一张，也可以一次性全部加载完，然后再开始显示游戏

为了一次性把图片加载完，我的做法是，将需要的图片放到一个数组里，然后设定一个索引，每加载一个图片，让这个索引加1，当这个索引小于数组的长度，则继续加载，直到将数组中的图片全部加载完，然后开始进行下一步的工作

具体实现看下面的代码

//图片path数组
var imgData = new Array();
//读取完的图片数组
var imglist = {};function main(){//准备读取图片imgData.push({name:"map",path:"./image/map.jpg"});imgData.push({name:"mingren",path:"./image/mingren.png"});imgData.push({name:"e1",path:"./image/e1.png"});imgData.push({name:"e2",path:"./image/e2.png"});//实例化进度条层loadingLayer = new LSprite();loadingLayer.graphics.drawRect(1,"black",[50, 200, 200, 20],true,"#ffffff");addChild(loadingLayer);//开始读取图片loadImage();
}
function loadImage(){//图片全部读取完成，开始初始化游戏if(loadIndex >= imgData.length){removeChild(loadingLayer);gameInit();return;}//开始读取图片loader = new LLoader();loader.addEventListener(LEvent.COMPLETE,loadComplete);loader.load(imgData[loadIndex].path,"bitmapData");
}
function loadComplete(event){//进度条显示loadingLayer.graphics.clear();loadingLayer.graphics.drawRect(1,"black",[50, 200, 200, 20],true,"#ffffff");loadingLayer.graphics.drawRect(1,"black",[50, 203, 200*(loadIndex/imgData.length), 14],true,"#000000");//储存图片数据imglist[imgData[loadIndex].name] = loader.content;//读取下一张图片loadIndex++;loadImage();
}

上面的代码不难明白，当图片没有读取完之前，会不断循环loadImage和loadComplete两个方法，当读取完之后，移除进度条，用legendLoadOver告诉游戏已经读取完成，然后调用gameInit方法，进行游戏的初始化工作。

看gameInit方法

function gameInit(event){//游戏层显示初始化layerInit();//添加地图addMap();//添加人物addChara();
}

在gameInit方法中，首先进行游戏层的初始化，然后添加游戏地图，然后添加人物
游戏层显示初始化，按照我们一开始所说，我们一次来初始化地图层，人物层，效果层，对话层，控制层

//游戏层显示初始化
function layerInit(){//游戏底层添加backLayer = new LSprite();addChild(backLayer);//地图层添加mapLayer = new LSprite();backLayer.addChild(mapLayer);//人物层添加charaLayer = new LSprite();backLayer.addChild(charaLayer);//效果层添加effectLayer = new LSprite();backLayer.addChild(effectLayer);//对话层添加talkLayer = new LSprite();backLayer.addChild(talkLayer);//控制层添加ctrlLayer = new LSprite();backLayer.addChild(ctrlLayer);
}

有了游戏层次的划分，我们在添加游戏对象的时候，将地图添加到地图层，人物添加到人物层，他们就会依次显示在游戏的界面上

下面开始添加地图

首先我们需要准备好显示地图的数组

//地图图片数组
var map = [
[18,18,18,18,18,18,18,18,18,18,18,18,55,55,18],
[18,18,18,17,17,17,17,17,17,17,17,17,55,55,18],
[18,18,17,17,17,17,18,18,17,17,17,17,55,55,18],
[18,17,17,17,18,18,18,18,18,17,17,55,55,17,18],
[18,17,17,18,22,23,23,23,24,18,17,55,55,17,18],
[18,17,17,18,25,28,26,79,27,18,55,55,17,17,18],
[18,17,17,17,17,10,11,12,18,18,55,55,17,17,18],
[18,18,17,17,10,16,16,16,11,55,55,17,17,17,18],
[18,18,17,17,77,16,16,16,16,21,21,17,17,17,18],
[18,18,18,18,18,18,18,18,18,55,55,18,18,18,18]
];

这些数字分别对应着图中如下位置

然后看下面代码

//添加地图
function addMap(){var i,j,index,indexX,indexY;var bitmapdata,bitmap;//地图图片数据bitmapdata = new LBitmapData(imglist["map"]);//将地图图片拆分，得到拆分后的各个小图片的坐标数组imageArray = LGlobal.divideCoordinate(bitmapdata.image.width,bitmapdata.image.height,10,10);//在地图层上，画出15*10的小图片for(i=0;i<10;i++){for(j=0;j<15;j++){//从地图数组中得到相应位置的图片坐标index = map[i][j];//小图片的竖坐标indexY = Math.floor(index /10);//小图片的横坐标indexX = index - indexY*10;//得到小图片bitmapdata = new LBitmapData(imglist["map"],indexX*32,indexY*32,32,32);bitmap = new LBitmap(bitmapdata);//设置小图片的显示位置bitmap.x = j*32;bitmap.y = i*32;//将小图片显示到地图层mapLayer.addChild(bitmap);}}
}

这样，我们就把预先设置好的图片显示到了游戏界面上，形成了地图

先把addChara方法加上

//添加人物
function addChara(){
}

然后运行游戏

可以得到下面画面

游戏人物的实现

为了更好的实现游戏人物的控制，我们新建一个游戏人物类Character.js

里面代码如下

function Character(data,row,col,speed){base(this,LSprite,[]);var self = this;//设定人物动作速度self.speed = speed==null?3:speed;self.speedIndex = 0;//设定人物大小data.setProperties(0,0,data.image.width/col,data.image.height/row);//得到人物图片拆分数组var list = LGlobal.divideCoordinate(data.image.width,data.image.height,row,col);//设定人物动画self.anime = new LAnimation(this,data,list);
};
Character.prototype.onframe = function (){var self = this;if(self.speedIndex++ < self.speed)return;self.speedIndex = 0;self.anime.onframe();
};

在legendForHtml5Programming里，有一个LAnimation类，用来实现图片数组顺序播放，形成动画

使用LAnimation类需要三个参数，一个是显示动画的层，一个是图片，一个是图片的坐标数组

然后，调用LAnimation类的onframe方法，就可以实现动画的播放了

在index.html中引入Character类，然后修改addChara方法，

//添加人物
function addChara(){bitmapdata = new LBitmapData(imglist["mingren"]);player = new Character(bitmapdata,4,4);player.x = 32*5;player.y = 32*6;charaLayer.addChild(player);}

在gameInit的末尾添加循环事件

//添加贞事件，开始游戏循环backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);

最后，添加onframe方法

/*** 循环* */
function onframe(){player.onframe();
}

运行代码，看到了吗

一个会动的鸣人出现在游戏的地图上了

游戏演示

http://lufylegend.com/demo/rpg/index.html

lufylegend.js引擎包内包含这个demo，请直接下载lufylegend.js引擎，查看引擎包内源码

lufylegend.js引擎下载地址

http://lufylegend.com/lufylegend

下次，就要添加控制层，实现人物的走动和地图的滚动等，希望大家多多支持。

html5游戏开发-零基础开发RPG游戏-开源讲座(一)相关推荐

html5游戏开发-零基础开发RPG游戏-开源讲座(四)
了解上三篇的内容请点击: html5[color=rgb(68, 68, 68) !important]游戏开发-零基础开发RPG游戏-开源讲座(一) http://www.html5cn.org/a ...
html5游戏开发-零基础开发RPG游戏-开源讲座(三)-卷轴对话实现
前两篇,RPG的开发已经实现了添加地图和添加游戏人物,本篇来实现地图的卷轴滚动和人物对话的实现,效果如下想要了解前两篇内容,请电击下面的链接 html5游戏开发-零基础开发RPG游戏-开源讲座(一) ...
html5游戏开发-零基础开发RPG游戏-开源讲座(四)-游戏脚本化地图跳转
首先,本篇文章是零基础开发RPG游戏-开源讲座系列文章的第四篇,来实现游戏的脚本化,和利用游戏脚本实现地图场景的切换,离上次更新貌似很长时间了,你在看下面的文字之前,需要先了解前三篇在下啰嗦了些什么东 ...
html5游戏开发-零基础开发《圣诞老人送礼物》小游戏
开言: 以前lufy前辈写过叫"html5游戏开发-零基础开发RPG游戏"的系列文章,在那里面我学习了他的引擎以及了解了游戏脚本.自从看了那几篇文章,我便对游戏开发有了基本的认识. ...
微信小游戏开发零基础教程（一）-CocosCreator
微信小游戏零基础教程(一)-CocosCreator 最终效果预览准备工作创建工程测试第一个场景最终效果预览本教程最后制作的游戏效果: 准备工作下载微信开发者工具最新版->下载地 ...
UE4 虚幻4游戏程序编程开发零基础视频教程
UE4虚幻腾讯课堂丁树凯丁老师游戏程序编程开发零基础视频教程. 目录: 第01季:虚幻4基础操作第02季:用UE4蓝图制作FPS 第03季:面向对象思想在UE4蓝图中的应用第04季:UE4中的人工 ...
麒麟子Javascript游戏编程零基础教程大纲
大家好,我是麒麟子, 开源项目<幼麟棋牌-四川麻将>(泄漏版叫 <达达麻将>)作者,成都幼麟科技创始人. 开源项目地址(Github与Gitee同步更新): Github ht ...
Ps编程脚本开发零基础学脚本（一）
Ps编程脚本开发零基础学脚本(附电子书+脚本案例) PS脚本自动化简介: Photoshop 通过脚本支持外部自动化.在 Windows 中,可以使用支持 COM 自动化的脚本语言,例如 VB Scr ...
零基础不建议学前端_web前端开发零基础怎样入门-哈尔滨前端学习
web前端开发零基础怎样入门-哈尔滨前端学习,俗话说,知己知彼,百战百胜.要想学好web前端,首先要了解什么是web前端,下面由小编来给大家介绍一下: 1什么是web? Web就是在Http协议基础之 ...

html5游戏开发-零基础开发RPG游戏-开源讲座(一)

html5游戏开发-零基础开发RPG游戏-开源讲座(一)相关推荐

最新文章

热门文章