Home思洋影视事业部网站建设知识库
0 Comments

HTML 5开发RPG游戏之一（地图人物实现）(1)

发布于：2013-11-15  |   作者：广州网站建设  |   已聚集：人围观

本篇将以零基础的视点，来讲解如何开发一款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. 
						<!DOCTYPE html> 
    2. 
					
  2. 
						<html>   
    3. 
					
  3. 
						<head>   
    4. 
					
  4. 
						<meta charset="UTF-8">   
    5. 
					
  5. 
						<title>rpg</title>   
    6. 
					
  6. 
						</head>   
    7. 
					
  7. 
						<body>   
    8. 
					
  8. 
						<div id="mylegend">loading……</div>   
    9. 
					
  9. 
						<!-- 引入LegendForHtml5Programming库件 -->   
    10. 
					
  10. 
						<script type="text/javascript" src="../legend/legend.js"></script>    
    11. 
					
  11. 
						<script type="text/javascript" src="./js/Main.js"></script>    
    12. 
					
  12. 
						</body></html>   
    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游戏，这样的地图，我们需要准备一张或几张地图块儿，把这些地图块组合成地图来显示，比如下图



	

		0_13238754463fxE.gif

	

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

	

		接下来，打开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，当这个索引小于数组的长度，则继续加载，直到将数组中的图片全部加载完，然后开始进行下一步的工作






			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机