cocos-creator-adaptationlisted

# Cocos Creator 多分辨率适配 ## 何时用 - 项目要同时支持手机横屏/竖屏或平板，发现不同机型界面错位、拉伸时。 - 设置 Canvas 的 `setDesignResolutionSize` 却不清楚 `fitWidth`/`fitHeight` 该选哪个时。 - 刘海屏/挖孔屏上关键 UI（血条、返回按钮）被系统状态栏遮住时。 - 背景图在宽屏机上两侧露黑边，或在窄屏机上被压缩变形时。 - 只在编辑器里预览没问题，发到真机后布局乱掉时。 ## 核心规则 ### 1. 设计分辨率与 fit 策略：按横竖屏选 fitWidth/fitHeight **规则：** 竖屏游戏设计分辨率用「宽固定」策略（`ResolutionPolicy.FIXED_WIDTH`，等价于 fitWidth），横屏游戏用「高固定」策略（`FIXED_HEIGHT`，等价于 fitHeight）；在 `onLoad` 最早处或启动场景的 `App.ts` 里统一调用，不在各业务组件里重复设置。 **为什么：** 这是最高频犯错的地方。新手默认保持编辑器的 `SHOW_ALL`（黑边适配），在宽屏手机上两侧各出现一条黑边，玩家体验极差。AI 生成代码时经常写死 `cc.view.setDesignResolutionSize(750, 1334, cc.ResolutionPolicy.SHOW_ALL)`——这在 iPhone 8 比例下"看起来对"，换到 18:9 或 20:9 的安卓机立刻穿帮。竖屏游戏应该固定宽度让高度自然延伸（上下内容按 Widget 锚定），这样无论多长的屏幕内容都能自适应撑满，不露黑边；横屏游戏则反过来固定高度。 **怎么做：** - 竖屏：`cc.view.setDesignResolutionSize(750, 1334, cc.ResolutionPolicy.FIXED_WIDTH);` - 横屏：`cc.view.setDesignResolutionSize(1334, 750, cc.ResolutionPolicy.FIXED_HEIGHT);` - 在最顶层启动脚本的 `onLoad` 里设置一次，场景切换后 `cc.view` 配置保持，不需要每个场景重设。 - 设计分辨率的宽高比不必与主流机型完全匹配，只需保证主要内容区在所有机型上不被截断即可。 --- ### 2. Widget 对齐：UI 全部用 Widget 锚定，禁止写死绝对坐标 **规则：** 所有 UI 节点（按钮、血条、对话框、提示文字）必须挂 `Widget` 组件并锚定到合适的边或居中；绝对坐标（`position.x = 375`）只允许出现在以父节点为参考系且父节点本身已正确适配的情况下。 **为什么：** 在 1080×2340 手机上绝对坐标看起来对，到 720×1600 上就整体偏移。AI 生成 UI 代码时习惯输出 `this.node.setPosition(0, -500)`——这在设计分辨率内是居中底部，但换机型后高度变了，`-500` 就不再是"底部附近"。更隐蔽的问题：场景切换或节点被动态 `addChild` 到另一个父节点后，绝对坐标失效但运行时无报错，只是 UI 错位。Widget 的「UpdateAlignment」会在节点激活时自动重算位置，是唯一正确的跨分辨率对齐方式。 **怎么做：** - 顶部 UI：Widget 勾选 Top，设 Top = 0（加安全区偏移见规则 3）。