RPG游戏地图教程

相信很多人的童年是在红白机、世嘉游戏机下长大的，那些经典的游戏如：魂斗罗，超级玛丽，世嘉的战斧、怒之铁拳等等一系列的经典。如今那些经典的记忆，已经随着时间的冲刷慢慢减淡了。
今天就来看看如何使用phaser引擎制作一款rpg游戏。

是不是满满的回忆(●’◡’●)。
制作一款rpg游戏需要先制作一张地图，看过前面的教程，相信大家都可以制作一款自己的地图来。我这里在保存地图的时候选择的保存格式是json格式。
先上两张场景的代码，前面的教程里有很多介绍，这里只解释一下没有碰到过的功能。

game.load.tilemap加载我们制作的地图，因为我保存的时候选择的格式是json格式，所以最后一个参数是Phaser.Tilemap.TILED_JSON，还有一种选项是Phaser.Tilemap.CSV表示地图文件是csv格式的。前一个参数是json数据对象，我们这里没有，设为null。

接下来在游戏场景中preload方法里做一些初始化操作。

这里初始化角色的跳跃、行走的参数。

现在添加地图到场景中。

addTilesetImage第一个参数是我们制作地图的时候选择图块时给图块起的名称，第二个参数是我们已经加载的图块图片。
setCollision和setCollisionBetween指定图块中哪些图块区域要做碰撞检测，那它的参数是怎么回事呢？看下图解释。

• 如图解释，这个图块里的小图块是从左上角开始的，第一小块的索引是1，如果不确定它的宽高，可以使用鼠标来点击选中，选中后有高亮区域，就能确定小图块的区域。比如金币的索引是11（数出来的）。
• 如果有图片是几块拼起来的，比如烟囱，那么它所用到的几个小图块都要做碰撞检测。

this.map.setCollisionBetween(14, 16);这几个小图块如上图所示，包括14和16。（这些数字我都是通过鼠标点击查看区域数出来的）

现在添加主角。

• 主角图片资源是个序列图集。
• 前4张是朝左跑的动画，后4张是朝右跑的动画，中间那张是静态状态下的图片。
• rpg游戏地图会比较大，默认是主角走到哪就显示哪部分，所以让摄像机跟随主角。

现在该到碰撞检测和游戏输入了。

• this.map.setTileIndexCallback(11, this.getCoin, this)跟金币做碰撞检测，上面已经解释过了，金币的索引是11。
• 这里为了方便，图片上只制作了一个图层，实际开发游戏的时候，注意不同用途的图片要分开放到不同的图层，比如边界用的放一个图层，不做碰撞检测的用一个图层，特殊用的再放一个图层（比如金币）。这里在主角跟金币碰撞后只是把金币隐藏了，并且取消了这个金币的碰撞检测，强制让引擎重绘图层后金币就看不到了。

最后是update里对主角的一些控制。

• 主角跟图层做碰撞检测，不然主角会掉出屏幕。
• 主角跳跃需要条件，不能在跳的过程中按下上方向键还能继续跳，不合理。
• 左右跑动，这部分比较简单，就是x轴上移动一个距离。
• 如果主角掉出屏幕，重置到初始位置。

上代码：
码云
github
到这里，rpg游戏就完成了，想象力丰富的你，会开发一款什么样的rpg游戏呢？欢迎交流讨论。