如何制作一款HTML5 RPG游戏引擎——第一篇,地图类的实现

原创 2013年05月06日 21:49:41

一,话说天下大事

前不久看到lufy的博客上,有一位朋友想要一个RPG游戏引擎,出于兴趣准备动手做一做。由于我研究lufylegend有一段时间了,对它有一定的依赖性,因此就准备将这个引擎基于lufylegend。暂时命名为lufylegendRPG。毕竟基于lufylegend,如果名称中不加上lufylegend这几个字的话,有点说不通啊。。。最近发布了0.1.0版,但是不理想,连一惯都是鼓励和赞赏我的lufy老先生都是出于真心的表示不满意。想了解0.1.0版的朋友可以看看这里(其实最好别看,因为1.0在用法上做了很大的调整):

http://blog.csdn.net/yorhomwang/article/details/8738733

于是我不得不重新来开发它。首先想到了地图类,今天就来实现一下。

我们的地图不应该是一张大地图,而是用小地图拼接而成,这样方便我们修改地图。

这样的话我们需要许多地图块的图片,通常我们把它们放在一张上。我们就用lufy老先生blog上一张图片作为例子,给大家看看这种装满小地图的大图是什么样的:


我们要完成的效果是什么样的呢?我把它放在这里,完成后看看实现度到底有多少:



二,如何实现


准备工作:

首先你需要下载lufylegend,最新版本是1.7.5,用1.7.3都行。

下载地址:http://lufylegend.com/lufylegend

上面有它的API和论坛,可以看看。

另外推荐一本相关图书,lufy写的,叫《HTML5 Canvas游戏开发实战》。用于学习基础和了解开发技巧还是不错的。其中还有一些很不错的js技术指导。值得一看。


书籍介绍:http://lufylegend.com/book/view/1


开始编写

由于lufylegend做的比较完美,那么我们封装起来就比较简单了。看看LTileMap完整构造器:

function LTileMap(data,img,width,height){
	var s = this;
	base(s,LSprite,[]);
	s.x = 0;
	s.y = 0;
	s.mapData = data;
	s.imgData = img;
	if(!width){
		var wbitmap = new LBitmapData(s.imgData);
		s.partWidth = wbitmap.image.width;
	}else{
		s.partWidth = width;
	}
	if(!height){
		var hbitmap = new LBitmapData(s.imgData);
		s.partHeight = hbitmap.image.height;
	}else{
		s.partHeight = height;
	}
	s.onshow();
}

首先为了减少引擎的大小,我们把变量s和this等起来,下面用到this的地方就都能用s来实现了。

※lufy大神最近提示我:“把变量s和this等起来是为了防止this的指向发生变化,并非单一减少引擎的大小。因为this的指向不一定一直指向当前函数的。”在此再次感谢lufy的支持。

首先我们让它继承LSprite,这样如果我们改变x和y属性后就可以直接变换位置了。再追加两个属性:mapData和imgData。

mapData是通过data参数赋值的,data的赋值应该是一个二维数组,格式如下:

[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]
它装载着地图块的样式,18对应的图块和55对应的图块是不一样的。后面我们会细讲。

imgData顾名思义,它是一个装图片的容器。

还有两个参数,它们是用来表示地图快的高度和宽度的。例如每张地图块是32*42的,那么就要将width设为32,height设为42。这样的话就会将装满地图块的图片分成小地图。例如我们把上面那张图片分成每个小地图块是32*32的,也就是说width设为32,height也设为32,那么就呈现现以下的形式:


(以上图片我直接用了lufy博客里的图片)这时你可以看看18和55所对应的是什么。18是一棵树,而55对应的是水,因此我们就做到了让每张地图块显示得不同。

接下来是onshow方法:

LTileMap.prototype.onshow = function(){
	var s = this;
	var mapdata = s.mapData;
	var partWidth = s.partWidth;
	var partHeight = s.partHeight;
	
	var i,j;
	var index,indexY,indexX;
	var bitmapdata,bitmap;

	for(i=0;i<mapdata.length;i++){
		for(j=0;j<mapdata[0].length;j++){
			index = mapdata[i][j];
			indexY = Math.floor(index/mapdata.length);
			indexX = index - indexY*mapdata.length;
 
			bitmapdata = new LBitmapData(s.imgData,indexX*partWidth,indexY*partHeight,partWidth,partHeight);
			bitmap = new LBitmap(bitmapdata);
			bitmap.x = j*partWidth + s.x;  
			bitmap.y = i*partHeight + s.y;

			s.addChild(bitmap);
        	}
	}
}
它的功能很简单,就是画出地图。其中的逻辑都很简单。主要是这里:

for(i=0;i<mapdata.length;i++){
	for(j=0;j<mapdata[0].length;j++){
		index = mapdata[i][j];
		indexY = Math.floor(index/mapdata.length);
		indexX = index - indexY*mapdata.length;

		bitmapdata = new LBitmapData(s.imgData,indexX*partWidth,indexY*partHeight,partWidth,partHeight);
		bitmap = new LBitmap(bitmapdata);
		bitmap.x = j*partWidth + s.x;  
		bitmap.y = i*partHeight + s.y;

		s.addChild(bitmap);
	}
}
这一段代码是画出地图的核心,首先它遍历了地图数组,然后每遍历一个就画一张,然后加到自身中。由于自身是继承自LSprite,所当地图被加到自身中时,再将自身加到底层或者其他Sprite中时,整个截面就会显示。

over,很简单是不是?实现后我们怎么用它呢?看以下代码:

<!DOCTYPE html>
<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>LTileMap</title>
	<script type="text/javascript" src="../lufylegend-1.7.3.min.js"></script>
	<script type="text/javascript" src="../lufylegendrpg-1.0.0.min.js"></script> 
	<script>
	init(30,"legend",480,320,main);
	LGlobal.setDebug(true);
	var backLayer,loadingLayer;
	var map;
	var loadData = [
		{name:"map",path:"./map.jpg"}
	];
	var imglist = [];
	var mapData = [  
		[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 main(){
		//加入进度条
		loadingLayer = new LoadingSample1(); 
		addChild(loadingLayer); 
		//加载图片并显示进度
		LLoadManage.load(
			loadData,
			function(progress){
				loadingLayer.setProgress(progress);
			},
			gameInit
		); 
	}
	function gameInit(result){
		removeChild(loadingLayer);
		imglist = result;
		//初始化层
		backLayer = new LSprite();
		addChild(backLayer);
		//加入地图
		addMap();
	}
	function addMap(){
		map = new LTileMap(mapData,imglist["map"],32,32);
		backLayer.addChild(map);
	}
	</script>
	</head>
	<body>
			<div id="legend"></div>
	</body>
</html>
运行代码得到如下效果:


为了防止大家以为我ps图片,那我就不仿把测试链接给出,大家自己看吧。

测试地址:http://www.cnblogs.com/yorhom/articles/3063759.html

代码很少,可以自己复制粘贴下来看看。哈!


最近做了一个留言板,欢迎大家发表自己的意见

留言板地址:http://www.cnblogs.com/yorhom/archive/2013/04/20/3033235.html

----------------------------------------------------------------

欢迎大家转载我的文章。

转载请注明:转自Yorhom's Game Box

欢迎继续关注我的博客

版权声明:

相关文章推荐

HTML5各引擎显示效率比较

现在越来越多的人开始尝试使用HTML5开发,HTML5的引擎也逐渐增多,开发者到底应该选择一款什么样的引擎呢?这一次我来对比一下几个我个人认为还不错的引擎的效率。 本次参加对比的引擎: 1. crea...

Python游戏引擎开发(二):创建窗口以及重绘界面

开发本地应用之前,我们得先有个窗口,用于显示界面。其次我们还得实现重绘机制,使游戏不停地刷新,达到动态化的目的。所以我们的引擎开发的第一个阶段就是创建窗口和重绘界面。 在上一章《序》中我们讲到本次开发...

html5游戏开发--"动静"结合(二)-用地图块拼成大地图 & 初探lufylegend

一、前言 本次教程将向大家讲解如何用html5将小地图块拼成大地图,以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏。 首先让我们来了解了解如何用html5实现动画,毕竟“...

html5游戏开发-零基础开发《圣诞老人送礼物》小游戏

开言: 以前lufy前辈写过叫“ html5游戏开发-零基础开发RPG游戏”的系列文章,在那里面我学习了他的引擎以及了解了游戏脚本。自从看了那几篇文章,我便对游戏开发有了基本的认识。今天我也以零基础...

速度挑战 - 2小时完成HTML5拼图小游戏

初学lufylegend.js之日,我用lufylegend.js开发了第一个HTML5小游戏——拼图游戏,还写了篇博文来炫耀一下:HTML5小游戏《智力大拼图》发布,挑战你的思维风暴。不过当时初学游...

如何制作一款HTML5 RPG游戏引擎——第二篇,烟雨+飞雪效果

今天我们来实现烟雨+飞雪效果。首先来说,一款经典的RPG游戏难免需要加入天气的变化。那么为了使我们的RPG游戏引擎更完美,我们就只好慢慢地实现它。 本文为该系列文章的第二篇,如果想了解以前的文章可以...

HTML5游戏开发-扫雷及其算法研究

吕蒙曰:士隔三月【1】,当刮目相看。所以,在下在这三月中发奋图强,花了约莫8节信息课的时间研究扫雷。呜呼,由于在下才能尚且不足,所以也就只能勉强打过中级难度的吧。不过,一边玩的同时,我还一边对扫雷这个...

[html5游戏开发]数独游戏-完整算法-开源讲座

开言:本次讲一下数独游戏的开发,数独游戏是一个填数字的游戏,在一个9x9的方格内,这个9x9的大格子又可以分为9个3x3的小的九宫格,在这些格子内填写上1至9的数字,使得每一行,每一列,并且每个小的九...

Python游戏引擎开发(三):显示图片

在前面的章节中,我们屡次提到了显示对象这个东西,那显示对象到底是什么呢?顾名思义,它是一个可视的物体,比如说游戏中的人物,地图等。例如`list`,`tuple`等,这些对象是不可以显示的,它们只用于...

【推荐】一个强大的html5游戏引擎 pixi

pixi官网前言当初不用phaser而改用lufylegend是因为phaser在微信上面有问题。 现在竟然发现另一个强大的游戏引擎pixi,无论是简单的2d精灵动画还是骨骼动画应有尽有。。 没办...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)