Cocos Creator 响应式布局实战5 项配置让界面在任何屏幕上都稳得住【免费下载链接】cocos-engineCocos simplifies game creation and distribution with Cocos Creator, a free, open-source, cross-platform game engine. Empowering millions of developers to create high-performance, engaging 2D/3D games and instant web entertainment.项目地址: https://gitcode.com/GitHub_Trending/co/cocos-engine刘海屏上设置按钮被挡住一半平板里底部菜单挤成一条PC 浏览器窗口一拉大 UI 直接飞出视野——这类翻车都指向同一个问题屏幕适配没做扎实。本文以 Cocos Creator 的响应式布局为对象从设计分辨率讲起说明界面如何在手机、平板和 PC 窗口上稳定不动。01 概念对齐先搞对三个词动手之前先对齐三个名词它们各自对应引擎里的一个开关理解错了布局就会做错。设计分辨率设计师摆放 UI 的画布尺寸如 1280×720。它决定了项目内的坐标系Canvas 下所有节点的坐标和尺寸都以它为基准。适配模式设计分辨率到设备实际分辨率的映射规则。它决定了设备比例与设计不符时怎么裁切或留白——是出黑边、全展示还是定宽/定高。引擎一共提供 EXACT_FIT、NO_BORDER、SHOW_ALL、FIXED_HEIGHT、FIXED_WIDTH 五种策略定义在 cocos/ui/view.ts 里。安全区域屏幕里不被刘海、挖孔、圆角、指示条遮挡的矩形范围。它决定了关键按钮能摆在哪里超出这个范围控件就会被硬件吃掉。概念含义决定了什么设计分辨率设计期 UI 画布尺寸坐标系与缩放基准适配模式设计分辨率与设备分辨率的映射规则比例不符时的裁切与留白安全区域排除刘海、圆角的矩形范围关键控件的摆放边界Cocos Creator 编辑器界面设计分辨率与适配模式在工程设置里配置场景视口里可实时预览多分辨率下的效果。02 配置清单按顺序做完 5 步前 4 步是工程级设置第 5 步写进运行时代码。定设计分辨率选最接近主力机型比例的尺寸竖屏 750×1334、横屏 1280×720 都是常见起点不必纠结像素点与实际机型完全一致。选适配模式竖屏游戏底部 UI 多用 FIXED_HEIGHT 固定高度上下可见横屏游戏背景需要铺满用 NO_BORDER 无边框左右裁切要求什么都露出来才用 SHOW_ALL 全展示代价是接受黑边。锁屏幕方向初始化时声明支持的方向。方向内部是位标志位实现PORTRAIT1、LANDSCAPE_LEFT4、LANDSCAPE_RIGHT8用|组合即允许多个方向。读安全区域往屏幕上下边缘放关键控件前先取安全区域的留白值。监听窗口事件尺寸或方向变化时重新布局而不是只在启动时摆一次。方向枚举定义在 pal/screen-adapter/enum-type/orientation.ts全文只有几行export enum Orientation { PORTRAIT 1, PORTRAIT_UPSIDE_DOWN PORTRAIT 1, // 2 LANDSCAPE_LEFT PORTRAIT 2, // 4 LANDSCAPE_RIGHT PORTRAIT 3, // 8 LANDSCAPE LANDSCAPE_LEFT | LANDSCAPE_RIGHT, // 12 AUTO PORTRAIT | LANDSCAPE, // 15 }位标志设计的直接好处是判断是否允许横屏只需一次orientation Orientation.LANDSCAPE位运算单个数字就能编码任意方向组合。03 相对与百分比布局锚点 相对坐标先说结论关键控件不要写死坐标把位置和尺寸表达为锚点 设计画布的百分比适配模式一旦定好界面在任何屏幕上都不动。Cocos 里 UI 尺寸是设计分辨率像素下的数值所谓百分比实际是设计画布的占比。下面这段把按钮钉在顶部中央、底栏钉在底部中央const DESIGN_W 1280, DESIGN_H 720; // 设计分辨率 // 顶部按钮宽度占设计画布 20% const topBtn find(Canvas/TopBtn)!; topBtn.width DESIGN_W * 0.2; topBtn.setPosition(0, -DESIGN_H / 2 topBtn.height / 2); // 底栏宽 80%、高 12%锚点 (0.5, 1)贴底居中 const bar find(Canvas/BottomBar)!; bar.width DESIGN_W * 0.8; bar.height DESIGN_H * 0.12; bar.setPosition(0, -DESIGN_H / 2 bar.height / 2);Canvas 锚点在中心 (0.5, 0.5)所有坐标都是相对中心的偏移按钮锚点取 (0.5, 1) 后贴顶就是一行减法不用关心设备实际宽度。UI 之下还有一层映射引擎先算出游戏容器的缩放整张设计画布再被画进容器。核心就六行位于 pal/screen-adapter/web/screen-adapter.tsconst scaleX frameW / designW; const scaleY frameH / designH; if (scaleX scaleY) { containerW frameW; // 宽为基准 containerH designH * scaleX; // 高等比压缩 } else { containerW designW * scaleY; // 高为基准 containerH frameH; // 宽等比压缩 }这就是等比缩放不变形的底线永远取两个比例里更小的那个剩余空间留给适配模式决定怎么补。04 真机避坑四个场景按现象 → 原因 → 解法处理刘海屏现象全面屏机型上顶部按钮被刘海压住底部功能条被横条指示覆盖。原因布局按整屏摆放没有读取安全区域。解法safeAreaEdge返回四边留白的物理像素值——Web 端从 CSS 变量--safe-top、--safe-bottom等读出并乘以 DPR原生端走jsb.device.getSafeAreaEdge()系统接口。用它给控件向内缩进const edge screenAdapter.safeAreaEdge; // 物理像素单位 // 换算到设计坐标后再内缩顶部按钮 topBtn.y DESIGN_H / 2 - toDesignY(edge.top) - topBtn.height / 2;值已经乘过 devicePixelRatio最典型的错误是拿它当设计坐标直接用必须除以 DPR 并换算到设计分辨率。高 DPI 设备现象Retina 屏上画面发虚或高 DPR 桌面端帧率明显下降。原因实际渲染像素是 CSS 像素的 DPR 倍。Web 端引擎把 DPR 封顶在 2Math.min(window.devicePixelRatio ?? 1, 2)避免渲染 3 倍像素。解法不要手动改 canvas 后备存储想进一步压负载改resolutionScale属性即可它会在赋值后自动触发 framebuffer 重建不需要自己管画布尺寸。窗口尺寸变化现象PC 上拖拽窗口、进出全屏后 UI 错位或残留黑边。原因容器样式变了但布局没有重新求解。解法引擎在 frame 尺寸变化时发window-resize携带宽高另有orientation-change与fullscreen-change事件名汇总在 pal/screen-adapter/enum-type/screen-event.tsscreenAdapter.on(window-resize, (w, h) relayout(w, h)); screenAdapter.on(orientation-change, (orient) relayout(orient));注意方向变化事件被刻意延迟了 EVENT_TIMEOUT 毫秒才处理部分机型旋转后 window.innerWidth/innerHeight 不会立刻更新引擎先等窗口尺寸落定再求解。横屏内容跑在竖屏设备现象横屏游戏开在竖屏手机上画面被压扁或被旋转 90°。原因工程锁定横屏而浏览器窗口是竖屏时引擎会把游戏容器旋转 90° 并交换宽高isFrameRotated 分支给容器设置rotate(90deg)。解法该分支只在移动端且方向冲突为真时触发要么把它当提示旋转屏接受要么把工程方向设为 AUTO、为横竖屏各准备一套布局this.isFrameRotated systemInfo.isMobile ((isBrowserLandscape orientation Orientation.PORTRAIT) || (!isBrowserLandscape orientation Orientation.LANDSCAPE));16:9 横屏下启动屏背景这类全屏资源恰好铺满容器这就是 NO_BORDER 模式在比例匹配设备上的样子。小结设计分辨率管坐标系、适配模式管裁切留白、安全区域管按钮边界三者互相独立都在工程设置里配。关键控件一律写锚点 相对坐标 占设计画布的百分比不写死数值。方向、窗口尺寸、全屏变化都是事件监听了它们布局才不会掉队。安全区域与 DPR 相关取值带单位陷阱物理像素 vs 设计像素换算完再用。延伸阅读两份源码适配容器的完整流程见 pal/screen-adapter/web/screen-adapter.ts五种适配策略的具体裁切行为见 cocos/ui/view.ts。这两个文件读下来Cocos Creator 的响应式布局与屏幕适配体系基本就完整了之后项目里的多分辨率适配问题大多只是调参数的事。【免费下载链接】cocos-engineCocos simplifies game creation and distribution with Cocos Creator, a free, open-source, cross-platform game engine. Empowering millions of developers to create high-performance, engaging 2D/3D games and instant web entertainment.项目地址: https://gitcode.com/GitHub_Trending/co/cocos-engine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Cocos Creator 响应式布局实战：5 项配置让界面在任何屏幕上都稳得住
Cocos Creator 响应式布局实战5 项配置让界面在任何屏幕上都稳得住【免费下载链接】cocos-engineCocos simplifies game creation and distribution with Cocos Creator, a free, open-source, cross-platform game engine. Empowering millions of developers to create high-performance, engaging 2D/3D games and instant web entertainment.项目地址: https://gitcode.com/GitHub_Trending/co/cocos-engine刘海屏上设置按钮被挡住一半平板里底部菜单挤成一条PC 浏览器窗口一拉大 UI 直接飞出视野——这类翻车都指向同一个问题屏幕适配没做扎实。本文以 Cocos Creator 的响应式布局为对象从设计分辨率讲起说明界面如何在手机、平板和 PC 窗口上稳定不动。01 概念对齐先搞对三个词动手之前先对齐三个名词它们各自对应引擎里的一个开关理解错了布局就会做错。设计分辨率设计师摆放 UI 的画布尺寸如 1280×720。它决定了项目内的坐标系Canvas 下所有节点的坐标和尺寸都以它为基准。适配模式设计分辨率到设备实际分辨率的映射规则。它决定了设备比例与设计不符时怎么裁切或留白——是出黑边、全展示还是定宽/定高。引擎一共提供 EXACT_FIT、NO_BORDER、SHOW_ALL、FIXED_HEIGHT、FIXED_WIDTH 五种策略定义在 cocos/ui/view.ts 里。安全区域屏幕里不被刘海、挖孔、圆角、指示条遮挡的矩形范围。它决定了关键按钮能摆在哪里超出这个范围控件就会被硬件吃掉。概念含义决定了什么设计分辨率设计期 UI 画布尺寸坐标系与缩放基准适配模式设计分辨率与设备分辨率的映射规则比例不符时的裁切与留白安全区域排除刘海、圆角的矩形范围关键控件的摆放边界Cocos Creator 编辑器界面设计分辨率与适配模式在工程设置里配置场景视口里可实时预览多分辨率下的效果。02 配置清单按顺序做完 5 步前 4 步是工程级设置第 5 步写进运行时代码。定设计分辨率选最接近主力机型比例的尺寸竖屏 750×1334、横屏 1280×720 都是常见起点不必纠结像素点与实际机型完全一致。选适配模式竖屏游戏底部 UI 多用 FIXED_HEIGHT 固定高度上下可见横屏游戏背景需要铺满用 NO_BORDER 无边框左右裁切要求什么都露出来才用 SHOW_ALL 全展示代价是接受黑边。锁屏幕方向初始化时声明支持的方向。方向内部是位标志位实现PORTRAIT1、LANDSCAPE_LEFT4、LANDSCAPE_RIGHT8用|组合即允许多个方向。读安全区域往屏幕上下边缘放关键控件前先取安全区域的留白值。监听窗口事件尺寸或方向变化时重新布局而不是只在启动时摆一次。方向枚举定义在 pal/screen-adapter/enum-type/orientation.ts全文只有几行export enum Orientation { PORTRAIT 1, PORTRAIT_UPSIDE_DOWN PORTRAIT 1, // 2 LANDSCAPE_LEFT PORTRAIT 2, // 4 LANDSCAPE_RIGHT PORTRAIT 3, // 8 LANDSCAPE LANDSCAPE_LEFT | LANDSCAPE_RIGHT, // 12 AUTO PORTRAIT | LANDSCAPE, // 15 }位标志设计的直接好处是判断是否允许横屏只需一次orientation Orientation.LANDSCAPE位运算单个数字就能编码任意方向组合。03 相对与百分比布局锚点 相对坐标先说结论关键控件不要写死坐标把位置和尺寸表达为锚点 设计画布的百分比适配模式一旦定好界面在任何屏幕上都不动。Cocos 里 UI 尺寸是设计分辨率像素下的数值所谓百分比实际是设计画布的占比。下面这段把按钮钉在顶部中央、底栏钉在底部中央const DESIGN_W 1280, DESIGN_H 720; // 设计分辨率 // 顶部按钮宽度占设计画布 20% const topBtn find(Canvas/TopBtn)!; topBtn.width DESIGN_W * 0.2; topBtn.setPosition(0, -DESIGN_H / 2 topBtn.height / 2); // 底栏宽 80%、高 12%锚点 (0.5, 1)贴底居中 const bar find(Canvas/BottomBar)!; bar.width DESIGN_W * 0.8; bar.height DESIGN_H * 0.12; bar.setPosition(0, -DESIGN_H / 2 bar.height / 2);Canvas 锚点在中心 (0.5, 0.5)所有坐标都是相对中心的偏移按钮锚点取 (0.5, 1) 后贴顶就是一行减法不用关心设备实际宽度。UI 之下还有一层映射引擎先算出游戏容器的缩放整张设计画布再被画进容器。核心就六行位于 pal/screen-adapter/web/screen-adapter.tsconst scaleX frameW / designW; const scaleY frameH / designH; if (scaleX scaleY) { containerW frameW; // 宽为基准 containerH designH * scaleX; // 高等比压缩 } else { containerW designW * scaleY; // 高为基准 containerH frameH; // 宽等比压缩 }这就是等比缩放不变形的底线永远取两个比例里更小的那个剩余空间留给适配模式决定怎么补。04 真机避坑四个场景按现象 → 原因 → 解法处理刘海屏现象全面屏机型上顶部按钮被刘海压住底部功能条被横条指示覆盖。原因布局按整屏摆放没有读取安全区域。解法safeAreaEdge返回四边留白的物理像素值——Web 端从 CSS 变量--safe-top、--safe-bottom等读出并乘以 DPR原生端走jsb.device.getSafeAreaEdge()系统接口。用它给控件向内缩进const edge screenAdapter.safeAreaEdge; // 物理像素单位 // 换算到设计坐标后再内缩顶部按钮 topBtn.y DESIGN_H / 2 - toDesignY(edge.top) - topBtn.height / 2;值已经乘过 devicePixelRatio最典型的错误是拿它当设计坐标直接用必须除以 DPR 并换算到设计分辨率。高 DPI 设备现象Retina 屏上画面发虚或高 DPR 桌面端帧率明显下降。原因实际渲染像素是 CSS 像素的 DPR 倍。Web 端引擎把 DPR 封顶在 2Math.min(window.devicePixelRatio ?? 1, 2)避免渲染 3 倍像素。解法不要手动改 canvas 后备存储想进一步压负载改resolutionScale属性即可它会在赋值后自动触发 framebuffer 重建不需要自己管画布尺寸。窗口尺寸变化现象PC 上拖拽窗口、进出全屏后 UI 错位或残留黑边。原因容器样式变了但布局没有重新求解。解法引擎在 frame 尺寸变化时发window-resize携带宽高另有orientation-change与fullscreen-change事件名汇总在 pal/screen-adapter/enum-type/screen-event.tsscreenAdapter.on(window-resize, (w, h) relayout(w, h)); screenAdapter.on(orientation-change, (orient) relayout(orient));注意方向变化事件被刻意延迟了 EVENT_TIMEOUT 毫秒才处理部分机型旋转后 window.innerWidth/innerHeight 不会立刻更新引擎先等窗口尺寸落定再求解。横屏内容跑在竖屏设备现象横屏游戏开在竖屏手机上画面被压扁或被旋转 90°。原因工程锁定横屏而浏览器窗口是竖屏时引擎会把游戏容器旋转 90° 并交换宽高isFrameRotated 分支给容器设置rotate(90deg)。解法该分支只在移动端且方向冲突为真时触发要么把它当提示旋转屏接受要么把工程方向设为 AUTO、为横竖屏各准备一套布局this.isFrameRotated systemInfo.isMobile ((isBrowserLandscape orientation Orientation.PORTRAIT) || (!isBrowserLandscape orientation Orientation.LANDSCAPE));16:9 横屏下启动屏背景这类全屏资源恰好铺满容器这就是 NO_BORDER 模式在比例匹配设备上的样子。小结设计分辨率管坐标系、适配模式管裁切留白、安全区域管按钮边界三者互相独立都在工程设置里配。关键控件一律写锚点 相对坐标 占设计画布的百分比不写死数值。方向、窗口尺寸、全屏变化都是事件监听了它们布局才不会掉队。安全区域与 DPR 相关取值带单位陷阱物理像素 vs 设计像素换算完再用。延伸阅读两份源码适配容器的完整流程见 pal/screen-adapter/web/screen-adapter.ts五种适配策略的具体裁切行为见 cocos/ui/view.ts。这两个文件读下来Cocos Creator 的响应式布局与屏幕适配体系基本就完整了之后项目里的多分辨率适配问题大多只是调参数的事。【免费下载链接】cocos-engineCocos simplifies game creation and distribution with Cocos Creator, a free, open-source, cross-platform game engine. Empowering millions of developers to create high-performance, engaging 2D/3D games and instant web entertainment.项目地址: https://gitcode.com/GitHub_Trending/co/cocos-engine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考