资讯专栏INFORMATION COLUMN

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

Wildcard / 2410人阅读

摘要:和代表普通道路和墙,和代表星星和岩浆。用作裁剪接收图片对象起始坐标和裁剪区域五个参数起始坐标和裁剪区域可选用于创建图像,可以添加到游戏图层将指定尺寸按照指定行列进行裁剪,返回一个二维数组生成动画,每一行为一组动画。

绘制地图前准备

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

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]
    ]}
  ]
}

这里的mapColmapRow是我定死的行和列,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) 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/91404.html

相关文章

  • 一、基于lufylegend引擎魔塔游戏开发(设计介绍)

    摘要:使用的引擎也是第一次写游戏,主要是兴趣使然游戏体验地址未完成游戏设计游戏图层设计游戏图层分为了五层。游戏数据存储将游戏涉及的所有数据存放到一个对象中,可以在后期很方便的做游戏进度保存。其中为角色的属性信息。 使用的引擎 lufylegend也是第一次写rpg游戏,主要是兴趣使然游戏体验地址(未完成) 游戏设计 游戏图层设计 var layers = { back: null, ...

    Code4App 评论0 收藏0
  • 二、基于lufylegend引擎魔塔游戏开发(准备工作)

    摘要:准备工作图片素材角色精灵图分为四个移动方向地图素材包含精灵图和普通块图物品为普通块图人物素材包含和怪物的精灵图游戏还在开发中,怪物素材还不完整游戏初始化定义结构并引入引擎初始化为引擎中的全局函数用于初始化。 准备工作:图片素材 hero.pngshowImg(https://segmentfault.com/img/bVSYN8?w=128&h=132);角色精灵图分为四个移动方向 m...

    PrototypeZ 评论0 收藏0
  • HTML5 Canvas游戏开发实战 PDF扫描版

    摘要:游戏开发实战主要讲解使用来开发和设计各类常见游戏的思路和技巧,在介绍相关特性的同时,还通过游戏开发实例深入剖析了其内在原理,让读者不仅知其然,而且知其所以然。HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧,在介绍HTML5 Canvas相关特性的同时,还通过游戏开发实例深入剖析了其内在原理,让读者不仅知其然,而且知其所以然。在本书...

    cocopeak 评论0 收藏0
  • 3D GIS 应用开发 —— 基于 Mapbox GL 的实践总结

    摘要:最近在折腾的端的可视化项目,由于相关业务的需要,用到了这一地图开发的神器。其技术奠基于与。分别指缩放级别地面法线偏移角地轴偏移角等,用以确定当前视窗所显示的地图区域和空间关系。个人认为其最大的亮点在于即使不了解内部实现,也不影响其使用。 最近在折腾的 web 端的可视化项目,由于相关业务的需要,用到了 Mapbox 这一地图开发的神器。在此先奉上一个基于mapbox-gl实现的demo...

    YancyYe 评论0 收藏0

发表评论

0条评论

Wildcard

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<