Cocos学习笔记：瓦片地图与坐标转换

制作格子地图类游戏时，瓦片地图编辑器是核心工具。其生成的资源文件包含两类关键数据：可见的图层数据和不可见的对象层数据。图层用于表现地面、装饰和障碍，对象层则标记出生点、出口、道具位置和怪物生成点等逻辑点位。

编辑器中的路径不能包含中文，否则可能导致资源加载异常。图块集图片导入后，需要设置每个格子的宽高，编辑器会根据这个尺寸自动切割大图。地图的整体尺寸由格子数决定，比如16列10行、每个格子70像素，那么地图总像素就是1120×700。

一个完整的瓦片地图通常包含多个图层。行走层铺设基础地面，玩家可以在上面自由移动；装饰层放置石头、植物等不影响通行的视觉元素；障碍层则设置围墙、树木等阻挡物。障碍层的格子会生成碰撞数据，程序读取后用于移动限制。

图层之间可以独立控制显隐，调试时关闭某些图层能更清晰地观察结构。障碍层的数据在程序中以二维数组形式存在，每个格子对应一个图块编号，编号为零表示该位置没有障碍，非零则表示存在阻挡。

对象层不显示任何图片，只在编辑器中以标记点或区域的形式存在。常见的对象包括玩家出生点、关卡出口、钥匙位置、宝箱位置等。每个对象都有名称，程序通过名称查找对应对象并获取其坐标。

对象还可以附加自定义属性，比如宝箱中金币的数量、怪物的类型等。这些属性以键值对形式存储在地图文件中，程序解析时一并读取，无需在代码中硬编码。对象的位置通常以格子行列表示，但需要注意编辑器中的坐标系与游戏引擎可能不同，Y轴方向往往是相反的。

瓦片地图保存为TMX格式，本质是XML文件。其中记录了图块集路径、图层名称、每个格子的图块编号、对象层中各个对象的名称和属性等信息。引擎加载后会自动解析这些数据，生成对应的节点树结构。

通过地图组件可以获取整体尺寸、格子尺寸、各个图层和对象层。遍历障碍层时，按行列索引读取每个格子的数据，返回值为零表示空，非零表示该位置放置了图块。这个编号对应图块集中的序号，程序不关心具体是哪个图块，只关心是否为零。

瓦片地图中的坐标与游戏引擎的坐标存在多处差异。首先是原点位置，编辑器中通常以左上角为原点，而引擎中以左下角或中心为原点。其次是Y轴方向，编辑器中Y向下递增，引擎中Y往往向上递增。

从地图数据中获取的格子坐标需要经过转换才能用于实际摆放物体。一种常见的做法是先计算格子左下角在地图本地坐标系中的位置，再根据地图在场景中的偏移量转换为世界坐标或画布坐标。如果直接拿编辑器中的坐标值使用，很容易出现物体位置偏移半个格子甚至完全错位的情况。

很多情况下，物体需要摆放在格子的中心位置而非角落。已知格子左下角坐标和格子宽高，中心点只需在X和Y方向各偏移半个格子即可。但如果涉及多级节点嵌套，还需要考虑父节点的锚点设置。父节点锚点在中心与在左下角，子节点的坐标计算方式完全不同。

建议在做坐标转换时统一使用同一种坐标系，要么全部用世界坐标，要么全部用本地坐标，混用极易出错。引擎提供的转换接口可以将本地坐标转为世界坐标，也可以反向转换，善用这些接口能减少手动计算的错误。

让角色被障碍挡住，有两种常见做法。一种是根据障碍层数据实时判断，角色移动前计算目标格子是否有障碍，有则禁止移动。这种方式不需要物理碰撞体，纯逻辑判断，开销小但实现稍复杂。

另一种是在每个有障碍的格子上生成碰撞体预制体，利用引擎的物理系统自然阻挡角色。这种方式更直观，但会创建大量碰撞体节点，需要注意性能。碰撞体的尺寸应略小于格子，比如格子70像素，碰撞体设为68或65，避免相邻障碍的碰撞体相互挤压导致角色卡住。

从对象层读取出生点、道具点等数据后，需要在该位置创建对应的预制体。流程大致是：根据对象名称找到对象数据，获取其坐标，将坐标转换为世界坐标，实例化预制体，设置位置，添加到场景节点中。

不同类型的对象可以共用同一套初始化逻辑，通过传入不同的预制体名称和对象名称来区分。比如钥匙、宝箱、出口都走同一个实例化流程，只是参数不同。这样代码更简洁，也方便后续扩展新的对象类型。

在格子地图上实现点击移动，最简单的做法是计算点击位置与角色当前位置的方向向量，让角色沿该方向持续移动。移动速度乘以时间增量得到每帧位移，叠加到角色位置上。

遇到障碍时的处理可以简化：当碰撞检测触发时，立即停止移动，并将角色沿反方向回退一小段距离，避免角色卡在障碍内部。更完善的做法是引入寻路算法，在移动前计算一条绕过障碍的路径，但这需要额外的算法支持，适合在后续阶段逐步引入。

向场景中添加节点时，坐标设置的顺序很重要。应当先将节点添加到父节点下，再设置其世界坐标。如果先设置坐标再添加节点，坐标可能是相对于旧父节点或默认父节点的，添加后位置会发生偏移。这个细节看似微小，却是导致物体位置错位的常见原因。