Tilemap

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

tilemap类型

我们为用户提供了两种类型的tilemap,90°tilemap 以及45°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的方式计算。

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

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