安装

直接去官网下载Tiled编辑器:Tiled | Flexible level editor (mapeditor.org)

资源准备

所有资源仅供学习使用,不可用于其他违法用途,违者与作者无关
https://pan.baidu.com/s/12T3GwRrKB9uqLfYRMcSYcw 提取码:xy6s

开始使用Tiled

1. 新建一个Map

图片

图片
目前phaser并不支持压缩,所以这里选csv格式的,下面的尺寸可以根据需要自行调节

2. 新建一个瓦片资源集

图片

图片

3. 开始画地图

图片

如果成功导入,那么就是如图所示效果,那么我们刻画第一层,在右侧的瓦片中选中某个区域,然后选中油桶工具,将其刻画在中间面板中

得到效果如下:

图片

接着画第二层,这里作者就简单画棵树(大家自由发挥)

新建一个Tile Layer图层
图片

选择瓦片地图中的任意一棵树,然后选择印章工具:

图片

4. 为需要碰撞的区域加标识

这里主要就是方便后续phaser代码中快速增加碰撞

编辑瓦片资源:

图片

图片

图片

图片