关卡地图：路径、状态、布局和适配

依据：Cocos Creator 3.8 多分辨率、Widget 与输入文档。示例为浏览器适配原理，微信真机未验证。

目标画面

一条蜿蜒路径串起关卡节点，已完成、当前和未解锁关卡具有不同外观。顶部货币栏与底部操作区固定，地图可以滚动。简单版本使用静态背景与有限节点；复杂版本加入长地图分段加载、章节切换、自动定位与环境动效。

关卡状态来自数据，视觉只负责表达。当前关卡的脉冲动画与是否允许进入是两个属性；服务器或关卡进度改变后，界面重新绑定状态，不能从节点有没有发光推断它是否已解锁。

在地图自己的坐标系中记录每个关卡位置，路径和节点使用同一套数据。屏幕尺寸变化时调整视口与缩放策略，不要分别缩放背景和节点。对于设计成曲线的路径，可以预存关卡位置，也可以沿曲线按进度取点；两种方式都应保留稳定的关卡 ID。

自动定位当前关卡时，用视口高度和操作区留白计算目标偏移，再限制在可滚动范围内。地图靠近开头或结尾时不能强行把节点居中，否则会露出不应出现的空白。点击则反过来转换坐标，检查节点实际命中区域。

远景背景、路径、关卡、装饰和固定 HUD 分开。背景允许超出视口，关键关卡节点应保持可读；装饰动画在离开可见区域后可停止更新。长地图可以按章节拆资源，但相邻章节连接处要处理好预加载和过渡。

打开屏幕适配实验台，切换不同屏幕比例并显示安全区，观察固定操作区与内容区如何分开。站内实验展示适配机制，实际项目的自动滚动、资源分段等功能需要单独实现。

背景按图片宽度缩放，节点却使用另一套设计分辨率，或节点被 Widget 约束而路径没有。把路径和关卡放在共同内容父节点，统一缩放与滚动；HUD 使用独立父节点对齐窗口。不要用设备型号条件分支不断修补坐标。

先用少量关卡验证状态、点击、拖动和自动定位，再增加关卡数量与装饰。长地图的难点是资源、可见性与定位，而不仅是画一条更长的曲线。检查返回地图后是否恢复位置、更新进度后是否正确定位，以及极端屏幕下按钮是否被裁切。基础知识见适配、输入、资源。

资料核查日期：2026-10-30。文中的案例参数与图解用于教学；目标项目应按所用版本及平台重新验证。