各位同学,今天是第七节,在本节我会学习如何使用TileMap来完成背景搭建。
一、添加TileMap结点
先做个介绍,TileMap是基于 2D 图块的地图节点。Tilemap(图块地图)使用 TileSet,其中包含了图块的列表,用于创建基于栅格的地图。TileMap 可以有若干图层,可以将图块布局在彼此之上。开始啦,在main场景中选择Main结点点击添加结点按钮,在弹出对话框中选择TileMap结点,点击创建,这样就创建了一个TileMap结点,步骤如下:
在TileMap结点检查器中新建TileSet,操作过程如下:
新建完成后,会在编辑器中间出现TileSet和TileMap两个编辑面板,如下图:
我把背景需要的图片拖入到文件系统,然后在拖动将背景图拖入到TileSet编辑面板的图块内。操作过程如下:
在弹出对话框中,选择否,也可以选择是。选择是表示背景图片会自动被分割,选择否一会自己进行分割。在编辑面板中选择需要的图块,其中1-4图块是按住Shift建创建的。结果如下图:
切换到TileMap,如下图:
1处表示我们可以编辑了,2处是TileSet选择的哪些图片。重点介绍上面的工具栏,各个工具用途如下:
用gif展示一下各个工具如何使用,用手机的朋友就抱歉了,gif好像不能再手机上展示。
绘制过程是真个样子的,首先在工具栏中选择绘制工具,然后在TileMap编辑面板上选择绘制的对象,比如绿地、大树,最后在Tilemap结点的编辑窗口上绘制,这样就完成了。利用上述功能,就可以绘制背景了,最终我绘制了如下的背景:
二、调整结点顺序
运行调试,发现主人公没了,什么原因?原来是TileMap把主人公遮挡了,目前只需要在main场景中调整结点顺序,主人公就会出现了。节点顺序如下:
运行一下,发现背景没有随着主人公的移动变化而变化,下面就修改这个。
三、跟随相机移动
切换到Player场景,在Player结点下添加Camera2D结点,添加方法如下:
这样背景就可以移动了,但又出现下图样式:
这个需要对Camera2D结点检查器进行设置,将Camer2D->Limit属性下的left、top设置为0;Right设置1150,Bottom设置为630,这样就OK。
这里告诉同学一个技巧,若果你不知道这个属性是干什么用的,你就把鼠标放到属性上不动就会弹出属性说明,如下图:
或者在属性上单击右键选择打开文档,就会在编辑器正中央有属性说明。如下图:
来看一下,这小节的劳动成果如下:
这节就到这吧,谢谢同学们的关注。