Tilemap

感谢您选择唤境Evkworld！在这一篇教程里，我们将学习Tilemap对象。

tilemap类型

我们为用户提供了两种类型的tilemap，90°tilemap 以及45°tilemap

使用注意事项

目前引擎不支持导入超过1024规格的tmx地图资源。
你可以观看视频学习，也可以下拉查看文字教程
tilemap的教程视频

90°tilemap

添加Tilemap对象

那么我们先来看看如何添加Tilemap对象，首先我们在项目库中要选中要添加的场景和图层组。

在上方顶部快捷栏中，省略号按钮里可以找到，这里有两个方法添加，第一鼠标左键直接点击。第二鼠标左键按住拖拽到舞台区域松开左键。

tilemap类型选择【正常】

添加成功后，在左下方对象库和舞台中都会出现我们新添加的Tilemap。

设置Tilemap相关属性

选中舞台上的Tilemap实例，右边属性可以看到，多了一个Tilemap。

这里是编辑区域，可以进行一些设置

替换图片

最上面一排可以将编辑区域的图片放大缩小，变回原尺寸以及替换图片素材。

注意这里替换的是图片，引擎里已经配备好了默认的地图块编号

替换地图块数据

如果想要更改地图编号数据，则需要导入格式tmx或xml地图文件,导入方法：选中左下方对象库里的Tilemap，右边属性里，导入

编辑地图

下面一排分别是对图片编辑

鼠标可以按着鼠标左键在编辑区域拖拽，选择一个区域

画笔可以将鼠标选择的区域当作笔头，然后在舞台上的Tilemap实例上涂抹即可。

擦除可以将Tilemap上的图擦掉，擦除区域的大小，依然是鼠标选择的区域大小

四方有点类似于九宫格

填充会根据鼠标所在位置，把Tilemap的空白区域填充。

碰撞可以在舞台上的Tilemap实例上画出碰撞区域，双击添加碰撞点

然后单击碰撞点，拖拽调整碰撞区域，

还可以在线之间双击添加点，delete键删除碰撞点

注Tilemap只有一层，也就是说如果想要有叠加效果，需要再加个Tilemap对象。

必须是不同的对象，同一对象复制出来的实例也不可以。

两个对象叠加的效果预览

获取Tilemap的地图块编号

首先将地图导入到Tilemap里

然后鼠标选出地图区域，可以看到地图块的编号

舞台上画出地图，并拖拽Tilemap四角调整大小

然后添加新精灵和文本，用文本显示精灵当前所在的地图块编号

精灵添加八方向运动能力，方便移动

写事件，每帧执行，文本显示精灵当前所在地图块的编号。

动作是文本的设置文本，

通过Tilemap的表达式可以获取当前地图x编号，y编号，或者是里的最近的x编号，y编号

我们设置显示精灵X坐标的地图块Y编号。

效果预览

45°tilemap

添加组件

与90°添加操作相似，双击或拖动添加tilemap组件，选择45°地图

原点位置

属性栏中的原点位置，用于决定第一个地图块相对于该组件的坐标位置。 在决定了初始位置后，组件会根据当前宽高，向左右延伸地图块。

当原点位置X为320时，第一个图块的位置相对于该组件坐标X320的位置。

当我们把原点位置X设置成32时，效果如下图所示

第一个图块的位置被设置到了X:32的位置上。
通过对比可以发现，当原点位置X设置成32时，组件只生成了一排的图块区域。 这是因为图块是往左下角以及右下角延伸的，当到达左右两边时自动停止延伸。
改变宽度后，显示的图块区域也会相应变化


需要注意的是，该组件的高度不能过小，否则会导致界面上没有图块区域生成。这是因为图块的生成是到达左右边界在停止的。 如果高度过小，生成的图块在没有到达左右边界之前就会到达底部，这是目前该组件不允许的。

编辑地图

编辑地图方式与90°tilemap一致，右侧窗口选中TileMap，进入编辑界面

选中想要使用的素材，点击画笔，在地图上绘制


图块之间的重叠关系为右下优先。 优先比较Y坐标，Y坐标大的显示在上方，当Y坐标一致时比较X坐标，X坐标大的显示在上方。

坐标、图块编号

尽管显示上是一个菱形区域，但是每个图块的坐标依旧按照90°tilemap的方式计算。

通过表达式可以获取某编号的图块的实际坐标，或通过实际坐标获取某图块的编号。

目前坐标转换较为繁琐，后续会对表达式坐标转换进行优化。

tilemap作刚体

仅仅在自动寻路能力的情况下，加了刚体的tilemap上，有图的格子就是有碰撞区域的。
其他运动能力，加了刚体的tilemap，需要手动绘制碰撞区域。