如何制作一款HTML5 RPG游戏引擎——第一篇，地图类的实现
一，话说天下大事
前不久看到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
代码很少，可以自己复制粘贴下来看看。哈！
如何制作一款HTML5 RPG游戏引擎——第一篇，地图类的实现的更多相关文章
- 如何制作一款HTML5 RPG游戏引擎——第二篇，烟雨+飞雪效果
今天我们来实现烟雨+飞雪效果.首先来说,一款经典的RPG游戏难免需要加入天气的变化.那么为了使我们的RPG游戏引擎更完美,我们就只好慢慢地实现它. 本文为该系列文章的第二篇,如果想了解以前的文章可以看 ...
- 如何制作一款HTML5 RPG游戏引擎——第五篇，人物&人物特效
上一次,我们实现了对话类,今天就来做一个游戏中必不可少的——人物类. 当然,你完全是可以自己写一个人物类,但是为了方便起见,还是决定把人物类封装到这个引擎里. 为了使这个类更有意义,我还给人物类加了几 ...
- 如何制作一款HTML5 RPG游戏引擎——第四篇，情景对话
今天我们来实现情景对话.这是一个重要的功能,没有它,游戏将变得索然无味.所以我们不得不来完成它. 但是要知道,使用对话可不是一件简单的事,因为它内部的东西很多,比如说人物头像,人物名称,对话内容... ...
- 如何制作一款HTML5 RPG游戏引擎——第三篇，利用幕布切换场景
开言: 在RPG游戏中,如果有地图切换的地方,通常就会使用幕布效果.所谓的幕布其实就是将两个矩形合拢,直到把屏幕遮住,然后再展开直到两个矩形全部移出屏幕. 为了大家做游戏方便,于是我给这个引擎加了这么 ...
- HTML5 RPG游戏引擎 地图实现篇
一,话说全国年夜事 前没有暂看到lufy的专客上,有一名伴侣念要一个RPG游戏引擎,出于兴趣筹办入手做一做.因为我研讨lufylegend有冶时间了,对它有必然的依赖性,因而便筹办将那个引擎基于 ...
- 用Html5结合Qt制作一款本地化EXE游戏-太空大战(Space War)
本次来说一说如何利用lufylegend.js引擎制作一款html5游戏后将其通过Qt转换成EXE程序.步骤其实非常简单,接下来就一步步地做一下解释和说明. 首先我们来开发一个有点类似于太空大战的游戏 ...
- HTML5开源RPG游戏引擎lufylegendRPG 0.1发布
一,小小开篇 首先不得不先介绍一下这个引擎: lufylegendRPG是lufylegend的拓展引擎,使用它时,需要引入lufylegend.同时您也需要了解lufylegend语法,这样才能 ...
- 推荐一些好用的 HTML5 & JavaScript 游戏引擎开发库
推荐一些好用的 HTML5 & JavaScript 游戏引擎开发库 0. 引言 如果你是一个游戏开发者,并且正在寻找一个可以与 JavaScript 和 HTML5 无缝工作的游戏引擎.那么 ...
- 或许您还不知道的八款Android开源游戏引擎
很多初学Android游戏开发的朋友,往往会显得有些无所适从,他们常常不知道该从何处入手,每当遇到自己无法解决的难题时,又往往会一边羡慕于iPhone下有诸如Cocos2d-iphone之类的免费游戏 ...
随机推荐
- Scala类中的get与set
在scala类中get和set使用有以下几种: 1. var foo: Scala自动合成一个getter和一个setter 2. val foo: Scala自动合成一个getter scala中v ...
- Streams：深入剖析Redis5.0全新数据结构
Streams:深入剖析Redis5.0全新数据结构 原创: 阿飞的博客 Redis 5.0 全新的数据类型:streams,官方把它定义为:以更抽象的方式建模日志的数据结构.Redis的st ...
- TF和SD
TF卡又称T-Flash卡,全名:TransFLash,又名:Micro SD SD卡(Secure Digital Memory Card,安全数码卡)
- VS Code直接调试Angular代码
安装VS Code扩展 安装Debugger for Chrome 安装Debugger for Firefox 配置Launch.json文件 Launch.json文件的创建和生成我们可以利用VS ...
- Hadoop源码分析之客户端向HDFS写数据
转自:http://www.tuicool.com/articles/neUrmu 在上一篇博文中分析了客户端从HDFS读取数据的过程,下面来看看客户端是怎么样向HDFS写数据的,下面的代码将本地文件 ...
- java----EL表达式
Java Web中的EL(表达式语言)详解 表达式语言(Expression Language)简称EL,它是JSP2.0中引入的一个新内容.通过EL可以简化在JSP开发中对对象的引用,从而规范页面 ...
- 一老掉牙的故事、是一个阿Q还是另一道曙光
几年前曾经看到过这个故事,当时以为自己要怎样怎样!可结果似乎不那么美好! 几年人生美好广景,几年依然碌碌无为,不沉着.不冷静.不务实.不圆滑.不老练.不勇敢.不勤劳,关键不聪明,无毅力.着 ...
- 多线程sshd爆破程序代码
不多说了,直接上手代码,也没有啥练手的,都是很熟悉的代码,水一篇,方便作为工作的小工具吧.试了一下,配合一个好点的字典,还是可以作为个人小工具使用的. #!/usr/bin/env python # ...
- panzer 电力项目十一--hibernate操作大文本字段Blob和Clob
hibernate操作大文本字段Blob和Clob解决方案: 1.大文本字段Blob和Clob(流); 2.截串存取 第一步: 创建新表:Elec_CommonMsg_Content create t ...
- PHP 开发环境的搭建和使用02--整合让apache处理php
PHP5.3.5直接下载解压即可.但是怎样才能让apache处理php呢? 1/ 在apache 的conf目录下 的 httpd.conf(用于指定apache的设置)加入如下代码: Load ...