Cocos Creator UI 多分辨率适配

不同设备的屏幕分辨率和宽高比差异很大，一套 UI 布局需要在各种屏幕上都能正常显示，这就是多分辨率适配要解决的核心问题。

---

2.x

Canvas 设计分辨率配置

在 Canvas 节点的 Inspector 中设置设计分辨率（Design Resolution），这是 UI 布局的"基准画布"。

推荐做法：以主流竖屏手机（如 750×1334）为基准。

适配策略选择

策略	说明	适用场景
SHOW_ALL	保持宽高比，两侧留黑边	不推荐，影响体验
FIXED_WIDTH	固定宽度，高度自适应（可能裁切上下）	横屏游戏
FIXED_HEIGHT	固定高度，宽度自适应（可能裁切左右）	竖屏游戏（推荐）
NO_BORDER	不留黑边，可能裁切内容	背景图全屏铺

竖屏游戏推荐 FIXED_HEIGHT：高度固定，宽屏手机只是左右多出一点空间，核心内容不被裁切。

// 代码设置适配策略（通常在项目设置中配置，也可代码设置）
cc.view.setDesignResolutionSize(750, 1334, cc.ResolutionPolicy.FIXED_HEIGHT);

Widget 对齐要点

Widget 组件是实现自适应布局的核心，使用时注意：

✅ 顶部 UI（血条、金币）：勾选 Top，设置与顶部的固定距离
✅ 底部 UI（操作按钮）：勾选 Bottom，设置与底部的固定距离
✅ 左右两侧 UI：分别勾选 Left/Right 对齐
✅ 全屏背景图：四边全勾，宽高不锁定，自动拉伸
❌ 避免同时锁定 Left+Right+Width（会有冲突警告）

刘海屏安全区适配

参考站内文章：[适配iPhoneX刘海屏](/cocos creator/component/AdaptedTopOfIPhoneX)

---

3.x

Canvas Scaler 配置

3.x 中 Canvas 节点挂载 UITransform 组件，在场景设置中配置设计分辨率。适配策略通过 cc.view 设置方式与 2.x 相同。

Device Pixel Ratio（DPR）

高 DPI 屏幕（Retina 屏）下，一个 CSS 像素对应多个物理像素。3.x 可在项目设置中开启高清模式，自动处理 DPR。

import { view, ResolutionPolicy } from 'cc';

// 设置设计分辨率（横屏示例：1334×750）
view.setDesignResolutionSize(1334, 750, ResolutionPolicy.FIXED_HEIGHT);

多套 UI 布局方案

当设备宽高比差异很大时（如 iPad 4:3 vs 全面屏 19.5:9），单套布局无法兼顾，推荐：

1. 统一 Canvas，Widget 自适应：适合简单 UI，Widget 四边对齐，中间内容居中
2. 宽高比检测，动态切换布局：

import { _decorator, Component, view, Node } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('AdaptLayout')
export class AdaptLayout extends Component {
    @property(Node) normalLayout: Node = null;   // 16:9 布局
    @property(Node) wideLayout: Node = null;     // 超宽屏布局

    onLoad() {
        const ratio = view.getVisibleSize().width / view.getVisibleSize().height;
        const isWide = ratio > 2.0; // 宽高比大于 2:1 认为是超宽屏

        if (this.normalLayout) this.normalLayout.active = !isWide;
        if (this.wideLayout) this.wideLayout.active = isWide;
    }
}

---

Widget 对齐实战要点

无论 2.x 还是 3.x，Widget 对齐规则相同：

场景：顶部 HUD（金币、血量）
→ 勾选 Top，Top 值 = 刘海高度 + 设计间距
→ 勾选 Left + Right，Left=Right=0（横向撑满）
→ 不勾选 Bottom 和 Height（高度由内容决定）

场景：底部操作栏
→ 勾选 Bottom，Bottom 值 = 安全区底部高度 + 设计间距
→ 勾选 Left + Right（横向撑满）

场景：全屏背景
→ 四边全勾，均为 0
→ Sprite 设置 SLICED 模式并配置九宫格边距

刘海屏安全区适配

参考站内文章：[适配iPhoneX刘海屏](/cocos creator/component/AdaptedTopOfIPhoneX)

该组件已封装了获取安全区、自动调整顶部节点位置的逻辑，可直接复用。