游戏地图设计具体教程解析

作者:课课家教育更新于： 2019-03-06 13:50:01

　　说道游戏开发，首先一定先要有地图画面，现在家家课就和大家一起探讨一下游戏地图到底是如何制作出来的。

　　一张地图，可能是由一张大图组成的，如下

　　也可能是由一些小图块儿组成，如下

　　本次来研究一下如何开发一个两种情况都可用的地图系统。

　　原理很简单，将大地图也看作小地图块儿就可以了，比如设定一个数组，里面装有一些小地图块儿。

　　 ［地图块1,地图块2,地图块3］

　　 ［地图块4,地图块5,地图块6］

　　一张大地图的时候，就是一种特殊情况，如下

　　 ［地图块1］

　　当然，一张地图，不能只有图片，还要有地形。在《零基础开发RPG游戏开源讲座》里，每个小地图块和一个地形坐标是一一对应的，其实这不是必须的，比如上面的几张小图块儿图片。

　　用它们来拼接地图的话，就不需要和地形坐标一一对应了，也就是说图片只是用来显示的，和地形并无关联。

　　如此，我们就可以设计下面一个地图文件

　　其中，各个变量含义如下

　　有了这个定义，地图层的显示，我们就可以这么写

　　代码解析：

　　首先获取小地图块儿数组，循环二维数组，将所有小地图块儿添加到地图层的相应的位置上，这样就组成一张完整的地图了。

　　注：此处当然还可以优化，本次只将实现，优化处理下次会介绍。

　　地形部分，其实没有必要显示到页面上的，但是为了便于大家理解，我把地形以网格的形势显示到画面上，如下

　　代码解析：

　　graphics.add函数是在lufylegend.js引擎中使用canvas原生的绘图处理，graphics的相关使用请看官方API文档。

　　上面代码将地形以网格的形式画到了网格层上，并且当地形不可移动的时候，在网格层上加上了红色的矩形方框。

　　这两部分的效果如下图

　　RPG游戏怎么会没有角色上阵呢，下面我利用LAnimationTimeline来创建一个角色类Character，然后用它来新建一个角色添加到地图上。

　　代码解析：

　　Character类待会儿随代码下载。

　　本次主要介绍地图相关的处理，所以上面只是简单创建了一个角色，后续扩展等后面再详细讲。

　　加入角色后，效果如下

　　接着当然要有寻路和移动了，我在《(战棋部分)战场上的寻路和移动》里面提供了一个A*寻路的类LStarQuery，这里可以直接拿来用了。用法很简单，大家可以到前面的文章里看一下。

　　在RPG游戏里，人物移动的时候，实际上是地图在移动，就是当人物移动的时候，同时改变地图层坐标，具体实现如下

　　代码解析：

　　现在的游戏，手机是主流了，手机画面比较小，所以讲画面放大是很有用的一个功能，而画面放大后，可视范围就缩小了，所以我加入了缩放功能，以方便玩家切换，具体的实现方法大家一会儿下载代码自己看看吧。

　　虽然还是半成品，最后的效果如下

　　只是为了测试功能，所以用的地图不一定合适，地形也是为了便于理解随便设置了几个遮挡点。

     需要注意的是，单单就地图功能来说，这也只是一个半成品，比如地图的优化工作没有做，比如人物移动的时候直线速度和斜角速度是不一样的。