Tiled实现斜45度瓦片地图

Tiled实现斜45度瓦片地图

Androider1232014-06-20 09:52:451277 次阅读

首先是我最近在做的一个项目的需求，要做一个斜45度角的大地图，里面有很多的建筑，会有人在里面走来走去。一个手指按住滑动可以拖动地图，两个手指按下可以调整地图的放大和缩小。



1、tiled新建地图，加入我们要做一个480*320的地图





地图方向：选择45度（交错的）这样生成的地图就基本上是矩形的，比较方便。个人感觉用正常方式的也可，不知道有人尝试过没有。

cocos2d-x默认不支持交错式的地图，需要修改下引擎的源码，我参考的是以下两个地方

/article/1681076.html

http://download.csdn.net/download/ycg514230/6801099
地图块大小：你的地图的每一个单元格的宽度、高度。大小前期美术没有做好地面以前，可以自己先临时设置一个，不影响功能开发，我设置的50、25
地图宽度：你要做的地图大小的宽度除以块宽度，最好多出几格，我设置的11
地图高度：你要做的地图大小的高度除以块高度乘以2，也是最好多出几格，我设置的27

注意，使用交错式的时候，红框里面显示的大小不太对，不用理会

　 效果如图





2、添加背景层（除了能点击的建筑，其他的我统称为背景层）

将块层1修改为ground表示背景，做背景层需要考虑地图的大小、地面素材单元格的复用

1、如果地图比较小，不管有没有复用的单元格，可以直接用一张整图，没必要为了程序包小那么一点而纠结。

2、如果地图比较小，地面上可以复用的单元很少，可以考虑把背景切成几个(设备有加载的图片的最大尺寸限制)，比如说ground1、ground2...

3、如果地图比较大，而且复用的单元比较多，那这个就得美术来弄一下了。

在此，我们直接用一张整图作为背景。

点击菜单栏，地图=>新图块，来添加一个地图图块，块宽度和高度直接等于原图大小





选中图片，刷到地图上合适的位置，方便我们下来对地面上的一些位置设置遮挡，设置碰撞属性等等，比如下图，树根的地方是不允许通过的，树背后是允许穿过的，但是穿过的时候，需要把角色设置为半透明，这些属性可以根据这个地图去设置。





3、添加建筑层，这一层是玩家可以点击，可以和玩家交互的，比如NPC，建筑等

点击菜单栏，图层=>添加图层，命名为building，然后点击菜单栏，地图=>新图块，添加一个新的图块，是个小人。过程就不细说了。把小人加到地图的最右侧。






在小人图块上面右击=>图块属性，在里面新加一条键值对，key=type、value="npc1"，建筑层也就基本完成了





4、添加属性层

本来这些东西是可以用对象层做，但是这斜45度角的对象层怎么不好用，不知道是否我用的软件的原因，我就用了一个图层表示了

4.1、碰撞属性层

点击菜单栏，图层=>添加图层，新建一个图层，命名为meta-collision，这个就不贴图了

点击菜单栏，地图=>新图块，添加一个用于设置碰撞属性的图块，这个也不贴图了

为新加的图块设置属性，在图块上右击=>图块属性

红色图块：





绿色图块：





在meta-collision图层中设置属性，也就是把能通过和不能通过两个属性的图块刷到该层中，最终的效果如下





4.2、遮挡属性层

点击菜单栏，图层=>添加图层，新建一个图层，命名为meta-mask

点击菜单栏，地图=>新图块，添加一个用于设置碰撞属性的图块，也可以用这个红绿图块

为新增加的图块数值属性，和上面碰撞层的一样，绿色：mask，true 红色：mask，false

在meta-mask上面设置属性，和碰撞层一致。最终效果图如下，刷得时候把meta-collision先隐藏掉





到此，地图基本上就做好了，下来准备导入到项目里面去用了