2026.5.26-日报-王雨默

用户2965

5月27日修改

一.工作内容概述

•
产出剩余系统所需美术资源，并完成项目内替换​

•
学习 Cocos 多分辨率适配方法，理解 Canvas、Widget、UITransform 等相关组件的作用，并初步对部分界面尝试进行适配调整。​

二.多分辨率适配知识梳理

1.
多分辨率适配原理思路​

多分辨率适配并不是单纯地把 UI 等比例缩放到不同屏幕上，而是要在不同设备宽高比下，保证核心内容可见、界面布局稳定、交互区域合理，并尽量避免 UI 被裁切、留黑边或位置错乱的问题。​

Cocos 中多分辨率适配的核心，可以理解为“以设计分辨率为基准，在真实设备屏幕上重新映射显示区域”。​

设计分辨率相当于开发时使用的一套标准画布尺寸，例如按照1080×1920来搭建界面。但在不同的设备下，屏幕分辨率和宽高比并不总会保持统一，因此运行时需要根据设备屏幕尺寸，对 UI 进行缩放与布局调整。​

Cocos 的 Canvas 会基于设计分辨率和当前设备屏幕尺寸，计算 UI 在真实屏幕中的显示区域与缩放关系。​

适配中比较关键的是 Fit Width 和 Fit Height。它们本质上决定了设计分辨率如何映射到真实屏幕，不同组合会影响 UI 的缩放比例和最终可视区域。​

•
Fit Width：优先保证设计宽度与屏幕宽度匹配，适合宽度方向布局较敏感的界面。 ​

•
Fit Height：优先保证设计高度与屏幕高度匹配，适合高度方向内容较重要的界面。 ​

•
组合使用时，需要结合实际设备比例进行验证，避免出现内容过度缩放、边缘留白或局部裁切。 ​

因此，实际项目中不能对所有界面使用同一种适配策略。背景类资源更关注铺满屏幕，必要时允许边缘裁切；核心玩法区域、按钮和交互内容则更关注完整可见和布局稳定。而且不能只看某一种分辨率下的表现，而是需要同时考虑窄屏、宽屏、全面屏、平板等不同设备比例下的显示效果。​

48%

52%

2.
相关节点与组件理解​

Canvas

Canvas 是 UI 适配的基础节点，主要负责整体显示区域和缩放策略。通常 UI 节点都会放在 Canvas 下，由 Canvas 统一管理它们在不同分辨率下的显示。​

在项目中，Canvas 更适合处理“整体层级”的适配问题，例如：​

•
 当前界面以什么设计分辨率为基准； ​

•
 整个 UI 是按宽度适配还是按高度适配； ​

•
 屏幕比例变化时，可视区域如何变化； ​

•
 根节点下的 UI 元素整体如何跟随缩放。 ​

可以把 Canvas 理解为“统一画布”和“整体适配规则”的承载者。​

Widget

Widget 更偏向处理单个 UI 节点相对于父节点或屏幕边缘的位置关系。它可以让节点固定在上、下、左、右、中间等位置，也可以设置距离边缘的偏移值。​

例如：

•
 顶部资源栏固定在屏幕顶部； ​

•
 返回按钮固定在左上角； ​

2026.5.26-日报-王雨默​