三、基于lufylegend引擎的魔塔游戏开发（绘制第一层地图）

绘制地图前准备

在绘制之前，我们先看一下地图的数据实现

globalData = {
  mapCol: 11,
  mapRow: 11,
  size: 32,
  floor: 0,
  data:[{
    map: [
      [1, 2, 2, 2, 2, 0, 2, 2, 2, 2, 1],
      [1, 2, 2, 2, 2, 0, 2, 2, 2, 2, 1],
      [1, 2, 2, 2, 2, 0, 2, 2, 2, 2, 1],
      [1, 2, 2, 2, 2, 0, 2, 2, 2, 2, 1],
      [1, 2, 2, 2, 2, 0, 2, 2, 2, 2, 1],
      [1, 2, 2, 2, 2, 0, 2, 2, 2, 2, 1],
      [1, 1, 2, 2, 2, 0, 2, 2, 2, 1, 1],
      [1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1],
      [3, 1, 3, 1, 0, 0, 0, 1, 3, 1, 3],
      [3, 3, 3, 3, 3, 0, 3, 3, 3, 3, 3],
      [3, 3, 3, 3, 3, 0, 3, 3, 3, 3, 3]
    ]}
  ]
}

这里的mapCol和mapRow是我定死的行和列，size为定死的单元格宽度也是高度，floor为当前楼层，data存放了所有楼层的数据。

绘制

//当前场景信息
var senceData = null;
function drawInit() {
  senceData = globalData.data[globalData.floor];
  // 页面初始化
  layers.mapview.removeAllChild();
  addMap();
}

将当前场景的信息赋值给senceData便于操作管理
layers.mapview.removeAllChild()会清除mapview层的所有东西（就是东西吧）
下面我们看一下addMap()

//添加地图
function addMap() {
  var bitMapData, bitMapDataCell, bitMap, mapImagesArray;
  var index;

  for (var i = 0; i < globalData.mapRow; i++) {
    for (var j = 0; j < globalData.mapCol; j++) {
      index = senceData.map[i][j];
      // 根据index的值判断地图的类型
      // 0 道路
      // 1 普通墙
      // 2 星星墙
      // 3 岩浆墙
      if (index === 0 || index === 1) {
        bitMapDataCell = new LBitmapData(imgList['map'], index * globalData.size, 3 * globalData.size, globalData.size, globalData.size);
        bitMap = new LBitmap(bitMapDataCell);
      } else if (index === 2 || index === 3) {
        bitMapData = new LBitmapData(imgList['map']);
        mapImagesArray = LGlobal.divideCoordinate(bitMapData.width, bitMapData.height, 4, 4);
        bitMap = new LAnimationTimeline(bitMapData, mapImagesArray);
        bitMap.setLabel("2", 2, j % 4, 1, true);
        bitMap.setLabel("3", 0, j % 4, 1, true);
        bitMap.speed = 5;
        bitMap.gotoAndPlay(index);
      }
      bitMap.x = j * globalData.size;
      bitMap.y = i * globalData.size;
      layers.mapview.addChild(bitMap);
    }
  }
};

这里我们通过二维数组做了地图的映射。
0和1代表普通道路和墙，2和3代表星星和岩浆。区别在于一类是不动的一类是动的。
LBitmapData用作裁剪
接收图片对象、起始坐标和裁剪区域五个参数（起始坐标和裁剪区域可选）
LBitmap
用于创建图像，可以添加到游戏图层
divideCoordinate
将指定尺寸按照指定行列进行裁剪，返回一个二维数组
LAnimationTimeline
生成动画，每一行为一组动画。可以通过setLabel设置每一行的name、起始行列、正倒序播放、是否镜像。
bitMap.gotoAndPlay(index)运行指定的labelName

最后添加在游戏图层

layers.mapview.addChild(bitMap)