HTML5开发RPG游戏之一（地图人物实现）

本篇将以零基础的视点，来讲解如何开发一款RPG游戏。

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

一款RPG游戏，我简单把它分为地图层，人物层，效果层(一些法术效果等)，对话层，控制层(按钮菜单等)。

如下图

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

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

准备工作

一，库件下载

本游戏开发，需要用到开源库件：LegendForHtml5Programming

请到这里下载***版的LegendForHtml5Programming，本次开发需要1.2版以上

http://code.google.com/p/legendforhtml5programming/downloads/list

库件的开发过程请看这里

http://bbs.html5cn.org/thread-2712-1-1.html

二，库件配置

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

然后将下载的库件解压，解压后将legend文件夹放到与rpg文件夹同目录

然后，在rpg文件夹里建一个index.html文件和一个js文件夹，在js文件夹里建一个Main.js文件

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

     
     
     
     
    
      
      
      
      
  1. 
      
      
      
      
  2.   
    3. 
      
      
      
      
  3.   
    4. 
      
      
      
      
  4.   
    5. 
      
      
      
      
  5. rpg  
    6. 
      
      
      
      
  6.   
    7. 
      
      
      
      
  7.   
    8. 
      
      
      
      
  8. loading……  
    9. 
      
      
      
      
  9.   
    10. 
      
      
      
      
  10.    
    11. 
      
      
      
      
  11.    
    12. 
      
      
      
      
  12.   
    13.

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

游戏地图的实现

接下来，我们先来画***层的地图层，

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

 
 
 
 
    
  
  
  
  
  1. var loader;   
    2. 
  
  
  
  
  2. function main(){    
    3. 
  
  
  
  
  3.     loader = new LLoader();    
    4. 
  
  
  
  
  4.     loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);    
    5. 
  
  
  
  
  5.     loader.load("map.jpg","bitmapData");    
    6. 
  
  
  
  
  6. }    
    7. 
  
  
  
  
  7. function loadBitmapdata(event){    
    8. 
  
  
  
  
  8.     var bitmapdata = new LBitmapData(loader.content);    
    9. 
  
  
  
  
  9.     var bitmap = new LBitmap(bitmapdata);    
    10. 
  
  
  
  
  10.     addChild(bitmap);    
    11. 
  
  
  
  
  11. }    
    12.

如果想更详细了解的话，看下面的帖子

用仿ActionScript的语法来编写html5——***篇，显示一张图片http://bbs.html5cn.org/thread-2700-1-1.html

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

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

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

接下来，打开Main.js

在里面加入

  
 
 
 
    
   
  
  
  
  1. init(50,"mylegend",480,320,main);
    2.

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

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

虽说读取图片只需要一个

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

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

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

#p#

具体实现看下面的代码 

  
 
 
 
    
   
  
  
  
  1. //图片path数组 
    2. 
   
  
  
  
  2. 
   
  
  
  
  3. var imgData = new Array();  
    4. 
   
  
  
  
  4. //读取完的图片数组  
    5. 
   
  
  
  
  5. var imglist = {};  
    6. 
   
  
  
  
  6. function main(){  
    7. 
   
  
  
  
  7.         //准备读取图片  
    8. 
   
  
  
  
  8.         imgData.push({name:"map",path:"./image/map.jpg"});  
    9. 
   
  
  
  
  9.         imgData.push({name:"mingren",path:"./image/mingren.png"});  
    10. 
   
  
  
  
  10.         imgData.push({name:"e1",path:"./image/e1.png"});  
    11. 
   
  
  
  
  11.         imgData.push({name:"e2",path:"./image/e2.png"});  
    12. 
   
  
  
  
  12.         //实例化进度条层  
    13. 
   
  
  
  
  13.         loadingLayer = new LSprite();  
    14. 
   
  
  
  
  14.         loadingLayer.graphics.drawRect(1,"black",[50, 200, 200, 20],true,"#ffffff");  
    15. 
   
  
  
  
  15.         addChild(loadingLayer);  
    16. 
   
  
  
  
  16.         //开始读取图片  
    17. 
   
  
  
  
  17.         loadImage();  
    18. 
   
  
  
  
  18. }  
    19. 
   
  
  
  
  19. function loadImage(){  
    20. 
   
  
  
  
  20.         //图片全部读取完成，开始初始化游戏  
    21. 
   
  
  
  
  21.         if(loadIndex >= imgData.length){  
    22. 
   
  
  
  
  22.                 removeChild(loadingLayer);  
    23. 
   
  
  
  
  23.                 legendLoadOver();  
    24. 
   
  
  
  
  24.                 gameInit();  
    25. 
   
  
  
  
  25.                 return;  
    26. 
   
  
  
  
  26.         }  
    27. 
   
  
  
  
  27.         //开始读取图片  
    28. 
   
  
  
  
  28.         loader = new LLoader();  
    29. 
   
  
  
  
  29.         loader.addEventListener(LEvent.COMPLETE,loadComplete);  
    30. 
   
  
  
  
  30.         loader.load(imgData[loadIndex].path,"bitmapData");  
    31. 
   
  
  
  
  31. }  
    32. 
   
  
  
  
  32. function loadComplete(event){  
    33. 
   
  
  
  
  33.         //进度条显示  
    34. 
   
  
  
  
  34.         loadingLayer.graphics.clear();  
    35. 
   
  
  
  
  35.         loadingLayer.graphics.drawRect(1,"black",[50, 200, 200, 20],true,"#ffffff");  
    36. 
   
  
  
  
  36.         loadingLayer.graphics.drawRect(1,"black",[50, 203, 200*(loadIndex/imgData.length), 14],true,"#000000");  
    37. 
   
  
  
  
  37.         //储存图片数据  
    38. 
   
  
  
  
  38.         imglist[imgData[loadIndex].name] = loader.content;  
    39. 
   
  
  
  
  39.         //读取下一张图片  
    40. 
   
  
  
  
  40.         loadIndex++;  
    41. 
   
  
  
  
  41.         loadImage();  
    42. 
   
  
  
  
  42. }  
    43.

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

看gameInit方法

  
 
 
 
    
   
  
  
  
  1. function gameInit(event){ 
    2. 
   
  
  
  
  2.         //游戏层显示初始化  
    3. 
   
  
  
  
  3.         layerInit();  
    4. 
   
  
  
  
  4.         //添加地图  
    5. 
   
  
  
  
  5.         addMap();  
    6. 
   
  
  
  
  6.         //添加人物  
    7. 
   
  
  
  
  7.         addChara();  
    8. 
   
  
  
  
  8. }  
    9.

在gameInit方法中，首先进行游戏层的初始化，然后添加游戏地图，然后添加人物

游戏层显示初始化，按照我们一开始所说，我们一次来初始化地图层，人物层，效果层，对话层，控制层

  
 
 
 
    
   
  
  
  
  1. //游戏层显示初始化 
    2. 
   
  
  
  
  2. function layerInit(){  
    3. 
   
  
  
  
  3.         //游戏底层添加  
    4. 
   
  
  
  
  4.         backLayer = new LSprite();  
    5. 
   
  
  
  
  5.         addChild(backLayer);  
    6. 
   
  
  
  
  6.         //地图层添加  
    7. 
   
  
  
  
  7.         mapLayer = new LSprite();  
    8. 
   
  
  
  
  8.         backLayer.addChild(mapLayer);  
    9. 
   
  
  
  
  9.         //人物层添加  
    10. 
   
  
  
  
  10.         charaLayer = new LSprite();  
    11. 
   
  
  
  
  11.         backLayer.addChild(charaLayer);  
    12. 
   
  
  
  
  12.         //效果层添加  
    13. 
   
  
  
  
  13.         effectLayer = new LSprite();  
    14. 
   
  
  
  
  14.         backLayer.addChild(effectLayer);  
    15. 
   
  
  
  
  15.         //对话层添加  
    16. 
   
  
  
  
  16.         talkLayer = new LSprite();  
    17. 
   
  
  
  
  17.         backLayer.addChild(talkLayer);  
    18. 
   
  
  
  
  18.         //控制层添加  
    19. 
   
  
  
  
  19.         ctrlLayer = new LSprite();  
    20. 
   
  
  
  
  20.         backLayer.addChild(ctrlLayer);  
    21. 
   
  
  
  
  21. } 
    22.

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

下面开始添加地图

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

  
 
 
 
    
   
  
  
  
  1. //地图图片数组 
    2. 
   
  
  
  
  2. var map = [  
    3. 
   
  
  
  
  3. [18,18,18,18,18,18,18,18,18,18,18,18,55,55,18],  
    4. 
   
  
  
  
  4. [18,18,18,17,17,17,17,17,17,17,17,17,55,55,18],  
    5. 
   
  
  
  
  5. [18,18,17,17,17,17,18,18,17,17,17,17,55,55,18],  
    6. 
   
  
  
  
  6. [18,17,17,17,18,18,18,18,18,17,17,55,55,17,18],  
    7. 
   
  
  
  
  7. [18,17,17,18,22,23,23,23,24,18,17,55,55,17,18],  
    8. 
   
  
  
  
  8. [18,17,17,18,25,28,26,79,27,18,55,55,17,17,18],  
    9. 
   
  
  
  
  9. [18,17,17,17,17,10,11,12,18,18,55,55,17,17,18],  
    10. 
   
  
  
  
  10. [18,18,17,17,10,16,16,16,11,55,55,17,17,17,18],  
    11. 
   
  
  
  
  11. [18,18,17,17,77,16,16,16,16,21,21,17,17,17,18],  
    12. 
   
  
  
  
  12. [18,18,18,18,18,18,18,18,18,55,55,18,18,18,18]  
    13. 
   
  
  
  
  13. ];  
    14.

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

然后看下面代码

  
 
 
 
    
   
  
  
  
  1. //添加地图 
    2. 
   
  
  
  
  2. function addMap(){  
    3. 
   
  
  
  
  3.         var i,j,index,indexX,indexY;  
    4. 
   
  
  
  
  4.         var bitmapdata,bitmap;  
    5. 
   
  
  
  
  5.         //地图图片数据  
    6. 
   
  
  
  
  6.         bitmapdata = new LBitmapData(imglist["map"]);  
    7. 
   
  
  
  
  7.         //将地图图片拆分，得到拆分后的各个小图片的坐标数组  
    8. 
   
  
  
  
  8.         imageArray = LGlobal.divideCoordinate(bitmapdata.image.width,bitmapdata.image.height,10,10);  
    9. 
   
  
  
  
  9. 
   
  
  
  
  10.         //在地图层上，画出15*10的小图片  
    11. 
   
  
  
  
  11.         for(i=0;i<10;i++){  
    12. 
   
  
  
  
  12.                 for(j=0;j<15;j++){  
    13. 
   
  
  
  
  13.                         //从地图数组中得到相应位置的图片坐标  
    14. 
   
  
  
  
  14.                         index = map[i][j];  
    15. 
   
  
  
  
  15.                         //小图片的竖坐标  
    16. 
   
  
  
  
  16.                         indexY = Math.floor(index /10);  
    17. 
   
  
  
  
  17.                         //小图片的横坐标  
    18. 
   
  
  
  
  18.                         indexindexX = index - indexY*10;  
    19. 
   
  
  
  
  19.                         //得到小图片  
    20. 
   
  
  
  
  20.                         bitmapdata = new LBitmapData(imglist["map"],indexX*32,indexY*32,32,32);  
    21. 
   
  
  
  
  21.                         bitmap = new LBitmap(bitmapdata);  
    22. 
   
  
  
  
  22.                         //设置小图片的显示位置  
    23. 
   
  
  
  
  23.                         bitmap.x = j*32;  
    24. 
   
  
  
  
  24.                         bitmap.y = i*32;  
    25. 
   
  
  
  
  25.                         //将小图片显示到地图层  
    26. 
   
  
  
  
  26.                         mapLayer.addChild(bitmap);  
    27. 
   
  
  
  
  27.                 }  
    28. 
   
  
  
  
  28.         }  
    29. 
   
  
  
  
  29. }  
    30.

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

先把addChara方法加上

  
 
 
 
    
   
  
  
  
  1. //添加人物 
    2. 
   
  
  
  
  2. function addChara(){  
    3. 
   
  
  
  
  3. }  
    4.

然后运行游戏,可以得到下面画面

游戏人物的实现

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

里面代码如下

  
 
 
 
    
   
  
  
  
  1. function Character(data,row,col,speed){ 
    2. 
   
  
  
  
  2.         base(this,LSprite,[]);  
    3. 
   
  
  
  
  3.         var self = this;  
    4. 
   
  
  
  
  4.         //设定人物动作速度  
    5. 
   
  
  
  
  5.         self.speed = speed==null?3:speed;  
    6. 
   
  
  
  
  6.         self.speedIndex = 0;  
    7. 
   
  
  
  
  7.         //设定人物大小  
    8. 
   
  
  
  
  8.         data.setProperties(0,0,data.image.width/col,data.image.height/row);  
    9. 
   
  
  
  
  9.         //得到人物图片拆分数组  
    10. 
   
  
  
  
  10.         var list = LGlobal.divideCoordinate(data.image.width,data.image.height,row,col);  
    11. 
   
  
  
  
  11.         //设定人物动画  
    12. 
   
  
  
  
  12.         self.anime = new LAnimation(this,data,list);  
    13. 
   
  
  
  
  13. };  
    14. 
   
  
  
  
  14. Character.prototype.onframe = function (){  
    15. 
   
  
  
  
  15.         var self = this;  
    16. 
   
  
  
  
  16.         if(self.speedIndex++ < self.speed)return;  
    17. 
   
  
  
  
  17.         self.speedIndex = 0;  
    18. 
   
  
  
  
  18.         self.anime.onframe();  
    19. 
   
  
  
  
  19. };  
    20.

在legendForHtml5Programming里，有一个LAnimation类，用来实现图片数组顺序播放，形成动画。使用LAnimation类需要三个参数，一个是显示动画的层，一个是图片，一个是图片的坐标数组

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

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

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

在gameInit的末尾添加循环事件

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

***，添加onframe方法

  
 
 
 
    
   
  
  
  
  1. function onframe(){  
    2. 
   
  
  
  
  2.         player.onframe();  
    3. 
   
  
  
  
  3. }  
    4.

运行代码，看到了吗

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

游戏演示：http://fsanguo.comoj.com/html5/rpg/index.html

***，附上这次的游戏源代码：http://fsanguo.comoj.com/html5/rpg5/rpg5.rar

分享文章：HTML5开发RPG游戏之一（地图人物实现）
网站URL：http://www.csdahua.cn/qtweb/news41/358091.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

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

成都快上网为您推荐相关内容

网站排名知识

分类信息网

做网站　　 　成都发电机维修　　 　复盛机电设备安装　　 　H5建站　　 　德阳服务器托管　　 　h5页面制作　　 　雅安移动机房　　 　重庆托管服务器　　 　java虚拟主机　　 　香港空间　　 　成都网站设计　　 　贵州义龙电信机房　　 　重庆手机网站建设　　 　成都雪糕加盟　　 　东电技改　　 　注册域名　　 　网站建设公司　　 　成都网站改版　　 　建站公司　　 　成都门窗定制