制作HTML5的游戏引擎
2015年03月04日 10:50
0 点赞
0 评论
更新于 2025-11-21 16:40
由于 lufylegend 框架设计较为完善，我们对其进行封装会相对简单。下面来详细分析 LTileMap 的完整构造器。
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。这样在后续代码中，使用s来替代this，可以避免重复引用this带来的性能开销。 - 继承
LSprite：让LTileMap继承LSprite，这样我们可以通过改变x和y属性直接变换其位置。这是因为LSprite提供了位置变换的相关功能。 - 属性追加：
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：它是一个装图片的容器，用于存储包含所有地图块的图片。
- 地图块尺寸参数：
width和height用于表示地图块的宽度和高度。例如，如果每张地图块是32*42的，那么需要将width设为32，height设为42。这样会将装满地图块的图片分割成小地图块。
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);
}
}
};
代码解释
这段代码是画出地图的核心部分。它首先遍历地图数组 mapdata，对于数组中的每个元素，计算其在图片中的位置（通过 indexY 和 indexX），然后从 imgData 中截取对应的小地图块（使用 LBitmapData），创建 LBitmap 对象并设置其位置，最后将其添加到自身（s）中。由于 LTileMap 继承自 LSprite，当将 LTileMap 对象添加到底层或其他 Sprite 中时，整个地图就会显示出来。
使用示例
<!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>
代码解释
这段 HTML 代码展示了如何使用 LTileMap 类来创建一个地图。主要步骤包括：
- 引入必要的 JavaScript 库（
lufylegend-1.7.3.min.js和lufylegendrpg-1.0.0.min.js）。 - 初始化游戏环境（
init函数）。 - 加载图片资源（
LLoadManage.load）。 - 创建
LTileMap对象并添加到backLayer中。
运行上述代码，即可看到地图效果。为了防止大家认为是 PS 图片，这里提供测试链接（未给出），大家可以自行测试。代码量较少，大家可以复制粘贴下来进行测试。