使用Tiled编辑器制作phaser地图

499 阅读1分钟

安装

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

资源准备

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

开始使用Tiled

1. 新建一个Map

1728897459610.png

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

2. 新建一个瓦片资源集

1728897962407.png

1728898039518.png

3. 开始画地图

1728898205955.png

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

得到效果如下:

1728898366836.png

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

新建一个Tile Layer图层 微信截图_20241014173716.png

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

1728898862541.png

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

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

编辑瓦片资源:

1728899061853.png

微信截图_20241014174548.png

1728899219845.png

1728899254270.png