实现一款简单的RPG游戏

RPG游戏地图教程

相信很多人的童年是在红白机、世嘉游戏机下长大的,那些经典的游戏如:魂斗罗,超级玛丽,世嘉的战斧、怒之铁拳等等一系列的经典。如今那些经典的记忆,已经随着时间的冲刷慢慢减淡了。
今天就来看看如何使用phaser引擎制作一款rpg游戏。
实现一款简单的RPG游戏
是不是满满的回忆(●’◡’●)。
制作一款rpg游戏需要先制作一张地图,看过前面的教程,相信大家都可以制作一款自己的地图来。我这里在保存地图的时候选择的保存格式是json格式。
先上两张场景的代码,前面的教程里有很多介绍,这里只解释一下没有碰到过的功能。
实现一款简单的RPG游戏

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

接下来在游戏场景中preload方法里做一些初始化操作。
实现一款简单的RPG游戏

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

现在添加地图到场景中。
实现一款简单的RPG游戏
实现一款简单的RPG游戏

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

实现一款简单的RPG游戏

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

实现一款简单的RPG游戏

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

现在添加主角。
实现一款简单的RPG游戏

实现一款简单的RPG游戏

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

现在该到碰撞检测和游戏输入了。
实现一款简单的RPG游戏

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

最后是update里对主角的一些控制。
实现一款简单的RPG游戏

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

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