Home > 游戏开发 > Tiled Map Editor 使用说明

Tiled Map Editor 使用说明

1. 首先下载 Tiled Map Editor:

地图编辑器:http://www.skywind.me/mw/images/8/81/TiledMapEditor.7z

资源图片集:http://www.skywind.me/mw/images/0/09/Server_in_12h_images.7z

解压,然后下载资源图片解压,保存在examples目录下面

(点击Read more 阅读全文)

我们最终将编辑下图的地图,并用Python读出来:

image

2. 图块命名如下:

Tile01 Tile02 Tile04
tile01.png tile02.png tile03.png

 

3. 运行 tiled.exe,选择:文件->新文件:

image

按照这个对话框填写,然后“确定”

image

 

4. 打开资源管理器将文件“Tile01.png” 拖入上图右下角“图块”面板:

image

设置宽度,高度为32,边距,间距为0,然后确定。

image

这时tile01.png已经被按照刚才的规则切割好了,放在右下角的面板中。点击工具栏上的“图章刷”或者按键盘B就可以进入刷子绘制模式了,然后从右下角选择你需要绘制的图块,就可以在中间区域绘制了。

如法炮制,我们再将tile02.png拖入到右下角的图块面板:

image

右下角就有两个图块选项卡了,一个代表刚才的tile01.png, 一个是现在的tile02.png。接着选择一个草的图块,并在工具栏上选择“填充”(或者按F),将背景全部刷成草地:

image

5. 图块一次性可以选择很多块(用鼠标拖着,我们先简单的画一些沙子地形上去,还有池塘:

image

接着到主菜单“图层”选择“添加块层”,右上角的“图层”面板就多了一个图层2:

image

我们选中“块层2”以后就可以在这个图层上编辑了,不会影响到刚才的图层,接着在这个图层上添加树木和房屋,拖入tile3.png以后在“图块”面板拖动鼠标整体选择房屋图块:

image

注意房屋图块在tile03的右下角,需要再“图块”面板的“tile03”这个标签下,将滚动条拖到右下,接着在”块层2”上建房顶:

image

在右上角选择块层1,然后右下角选择对应图块给房子建墙:

image

然后接着编辑“块层2”,在墙上绘制门窗,然后同样的方法绘制另外一间木屋:

image

 

6. 继续绘制地图,添加希望添加的内容:

image

然后新建一个图块层4,用来表示可以走不可以走的地方,随便选一个颜色明显的图块,在图块层4上表示不能走的区域:

image

编辑好不可走的区域后,如果不想它影响画面,可以将右上“图块层4”前面的勾去掉,就不显示了。

7. 最终我们要导出成python可以识别的格式:选择主菜单->编辑->参数:

image

将“另存为数据层”选择为“CSV”,然后关闭。

这时候用“文件”-“保存”功能保存成“game1.tmx”

image

8. 用文本编辑器,打开game1.tmx文件,可以看到如下内容:

image

呵呵,一看就明白,就是CSV,前面记录了右下角“图块”的资源文件以及切割方式,ColorKey等,后面每个图层都用CSV格式来记录了里面的数据,0代表没有,1代表tile01.png的左上角第一个图块,2代表tile01.png左上角左数第二个图块:

image

tile01被按照32×32的大小切割成了20×28个小图块。按照行优先存储,在tile01左上角的第一个图块编号为1,往右一个图块是2,再往右就是3,第二行左数第一个图块就是编号21。

在game1.tmx的如下部分:

 <tileset firstgid="1" name="Tile01" tilewidth="32" tileheight="32">
  <image source="Tile01.PNG" trans="ff00ff" width="640" height="896"/>
 </tileset>
 <tileset firstgid="561" name="Tile02" tilewidth="32" tileheight="32">
  <image source="Tile02.PNG" trans="ff00ff" width="640" height="960"/>
 </tileset>
 <tileset firstgid="1161" name="Tile03" tilewidth="32" tileheight="32">
  <image source="Tile03.PNG" trans="ff00ff" width="640" height="480"/>
 </tileset>

其中 firstgid代表这个资源文件的左上角第一个图块的开始编号,如Tile02图块,它左上角第一个图块编号就是561.非常清爽明白的定义。

 

好了,有了这些,就可以在python中方便的解析了。

Categories: 游戏开发 Tags:
  1. mr.chen
    June 30th, 2013 at 16:46 | #1

    兄弟你那个资源的链接无效了,我直接保存网页上的图片在创建图块的时候却发现像素怎么都对不准。能不能重新上传下资源,或者发我一份- – 谢谢啦…

  1. May 18th, 2013 at 21:52 | #1
  2. May 22nd, 2013 at 08:29 | #2