企业官网建设流程全解析

1. 项目概述：为什么屏幕适配是Cocos开发者的必修课？

刚接触Cocos Creator做游戏或者应用，很多朋友第一个大坑往往不是写逻辑，而是屏幕适配。你精心设计的UI，在开发者的电脑上看着完美无缺，结果一到真机上，要么两边出现丑陋的黑边，要么按钮被裁掉一半，要么在不同尺寸的手机上布局完全错乱。这感觉就像你画了一幅精美的画，结果画框尺寸不对，要么被硬生生裁切，要么被强行拉伸变形。屏幕适配，本质上就是解决“如何让我们的内容在各种尺寸的画框里都能得体展示”这个核心问题。

Cocos Creator提供了强大的适配工具，但如果不理解其背后的设计哲学和适配策略，很容易配置出错，导致后期返工量巨大。今天，我就结合自己踩过的无数坑，把Cocos Creator屏幕适配从设计分辨率到最终完美呈现的完整流程拆解成5个关键步骤。无论你是做竖屏的休闲游戏、横屏的动作游戏，还是信息展示类的应用，这套方法都能帮你建立起清晰、稳固的适配框架。我们不止讲“怎么做”，更重点剖析“为什么这么做”，以及在不同场景下如何取舍。

2. 核心概念解析：设计分辨率、适配策略与Canvas

在动手配置之前，我们必须先吃透几个核心概念。很多适配问题，根源就在于对这些基础概念的理解有偏差。

2.1 设计分辨率：你的“设计画布”

设计分辨率是你在Cocos Creator编辑器里工作的那个画布尺寸。你可以把它想象成设计师在Photoshop里新建文件时设定的那个尺寸，比如1334x750（iPhone 8的物理分辨率），或者1920x1080（常见的横屏游戏尺寸）。这个分辨率的选择至关重要，它决定了你所有UI元素、场景节点的初始坐标和尺寸基准。

注意：设计分辨率的选择没有绝对的对错，但有最佳实践。通常建议选择你的目标用户群体中最主流或最具代表性的设备分辨率。例如，针对移动端竖屏游戏，1334x750或更现代的1125x2436（iPhone X）都是不错的选择。它的核心目的是提供一个稳定的、高保真的设计环境。

2.2 Canvas与适配组件：内容的“总容器”

在Cocos Creator场景中，根节点通常是一个Canvas节点。这个Canvas组件上，有我们进行屏幕适配的核心设置：Design Resolution和Fit Height / Fit Width。

• Design Resolution：这里填的就是我们上面说的设计分辨率。它告诉引擎：“我的设计稿是基于这个尺寸做的。”
• Fit Height / Fit Width：这是适配策略的核心。它决定了当实际屏幕比例与设计分辨率比例不一致时，Canvas这个“总容器”该如何缩放和定位。

2.3 适配策略详解：Fit Width与Fit Height的博弈

这是最容易让人困惑的地方。我们用最直白的方式解释：

• Fit Height（适配高度）：引擎会保证Canvas的高度永远撑满屏幕高度。宽度则会根据屏幕比例进行缩放。这会导致在更“胖”（宽高比更大）的屏幕上，Canvas两侧可能会超出屏幕，内容被裁切；在更“瘦”的屏幕上，Canvas两侧会出现黑边。
• Fit Width（适配宽度）：引擎会保证Canvas的宽度永远撑满屏幕宽度。高度则会根据屏幕比例进行缩放。这会导致在更“瘦”（宽高比更小）的屏幕上，Canvas上下可能会超出屏幕，内容被裁切；在更“胖”的屏幕上，Canvas上下会出现黑边。

如何选择？这取决于你内容的主要扩展方向。

• 竖屏游戏/应用（如消除类、资讯类）：内容通常沿垂直方向滚动或排列。你肯定希望在任何手机上，垂直方向的内容都能完整显示，不被裁切。因此，优先选择 Fit Height。这样能确保高度方向永远满屏，宽度方向通过设计来兼容（比如背景图做宽一些）。
• 横屏游戏（如跑酷、射击类）：内容通常沿水平方向延伸。你肯定希望在任何手机上，水平视野都能完整显示。因此，优先选择 Fit Width。这样能确保宽度方向永远满屏，高度方向通过设计来兼容。

一个常见的误区：同时勾选Fit Height和Fit Width。这会让引擎同时满足宽高都撑满屏幕，结果就是Canvas会被非等比拉伸，导致所有内容变形！除非你的项目就是需要这种变形效果（极少见），否则千万不要同时勾选。

3. 关键步骤一：确立科学的设计分辨率与适配策略

现在，我们进入实战的第一个关键步骤。这一步做对了，后面事半功倍。

1. 分析项目类型与核心内容：首先问自己：我的项目是横屏还是竖屏？游戏的核心玩法区域（如战斗场景）或应用的核心信息流，哪个方向的完整性更重要？以竖屏卡牌游戏为例，卡牌列表是垂直滚动的，那么保证高度方向完整显示就是首要任务。

2. 选择设计分辨率：基于分析，选择一个主流的设计分辨率。例如：

• 竖屏项目：720 x 1280或750 x 1334。我个人更倾向于750 x 1334，因为其宽高比（约0.562）与大量全面屏手机（如19.5:9 ≈ 0.462）的差异更大，能更好地测试我们宽度方向的适配方案是否健壮。
• 横屏项目：1280 x 720或1920 x 1080。选择1280 x 720可以在保证清晰度的同时，减少纹理资源大小，对性能更友好。

3. 设置Canvas适配策略：在场景的Canvas组件上设置。

• 竖屏项目：设计分辨率设为750 x 1334，只勾选 Fit Height。
• 横屏项目：设计分辨率设为1280 x 720，只勾选 Fit Width。

4. 验证与理解“安全区”：设置好后，在编辑器上方的预览下拉菜单中，选择不同的设备（如iPhone X， iPad等）进行预览。你会发现Canvas的背景色（或你的背景图）在某些设备上无法完全覆盖屏幕，露出的区域就是“黑边”或被裁切的区域。你需要理解这个区域的存在，并在后续的UI布局中规避它。

实操心得：我习惯在项目初期，在Canvas下创建一个全屏的彩色Sprite节点作为背景参考。在预览不同设备时，能非常直观地看到Canvas的实际显示区域和安全区域，为后续的UI挂边和布局提供视觉依据。

4. 关键步骤二：构建弹性的UI布局与挂边系统

确定了Canvas的缩放策略，接下来就要解决UI元素如何在这个会缩放的Canvas上“站对位置”的问题。核心工具是Widget（对齐挂件）和Layout（布局组件）。

4.1 使用Widget实现精准挂边

Widget组件是Cocos Creator UI适配的瑞士军刀。它的作用是将节点相对于父节点（通常是Canvas或某个面板）的边进行对齐。

典型场景与配置：

1. 底部固定按钮栏：

   • 创建一个作为容器的节点（如BottomBar）。
   • 为其添加Widget组件。
   • 勾选Bottom，将Bottom的值设为0（表示紧贴底部）。
   • 勾选Left和Right，值都设为0。这会让该容器节点的宽度拉伸至与父容器等宽，从而实现完美的底部栏适配。内部的按钮则可以用水平布局或固定间距来排列。

2. 顶部标题栏：

   • 同理，创建TopBar节点，添加Widget。
   • 勾选Top，值设为0。
   • 勾选Left和Right，值设为0。

3. 悬浮于侧边的按钮：

   • 创建按钮节点，添加Widget。
   • 勾选Right，值设为50（表示距离右边50像素）。
   • 勾选Top，值设为100（表示距离顶部100像素）。
   • 关键点：此时只勾选了Right和Top，没有勾选Left和Bottom。这意味着这个按钮的位置由“距离右边框50px，距离顶部100px”唯一确定。无论屏幕宽度如何变化，它始终会保持在右上角区域。

注意事项：

• Target属性：默认为当前节点的父节点。通常不需要改动，除非你有复杂的嵌套布局。
• Align Mode：On-Window-Resize表示在窗口大小改变时（如浏览器窗口拖动、手机旋转）才重新对齐。Always表示每帧都对齐。对于静态UI，用前者即可，性能更好。

4.2 使用Layout实现自动排列

对于列表、网格、均匀分布的元素组，使用Layout组件比手动计算位置高效得多。

• Vertical Layout（垂直布局）：适合聊天记录、任务列表。设置好SpacingX和SpacingY（间距），以及Padding（内边距），子节点会自动排列。
• Horizontal Layout（水平布局）：适合水平排列的按钮组、标签页。
• Grid Layout（网格布局）：适合背包、图鉴、商店商品列表。

实操心得：Layout组件经常需要和Content Size Fitter（内容尺寸适配器）配合使用。例如，一个垂直滚动的聊天窗口，其容器节点可以添加Vertical Layout和Content Size Fitter，并将Vertical Fit设置为Preferred Size。这样，当动态添加聊天条目时，容器的高度会自动增长，配合ScrollView就能实现滚动效果。

5. 关键步骤三：处理背景图与场景内容的适配

UI搞定了，游戏世界本身的背景和场景内容怎么办？它们也需要适配。

5.1 背景图的“全屏覆盖”方案

背景图通常需要无条件覆盖整个屏幕，无论屏幕比例多么奇葩。这里不能依赖Canvas的缩放，因为Canvas可能因为Fit Height或Fit Width策略而没有完全覆盖屏幕。

推荐方案：使用两个背景节点

1. 主背景（用于内容）：作为Canvas的子节点，尺寸等于设计分辨率（如750x1334）。它承载游戏的主要视觉内容。它的显示范围受Canvas适配策略影响。
2. 全屏背景（用于兜底）：作为Canvas的兄弟节点，或者放在一个更顶层的节点下。为这个节点添加Widget组件，并同时勾选Top,Bottom,Left,Right，且值都设为0。再为其添加一个Sprite组件，放入一张足够宽（或高）的背景图。

为什么需要两张图？因为主背景图要保证核心内容不被拉伸变形（比如UI的边框、场景的关键地形）。而全屏背景图的作用是填充因为屏幕比例差异而露出的“黑边”区域。这张图可以是纯色、渐变，或者是主背景图的扩展部分（在Photoshop中把画布向两侧加宽，填充一些无关紧要的图案或模糊效果）。

5.2 游戏场景内容的适配策略

对于游戏内的精灵、地图等，适配策略更为灵活。

• 固定尺寸对象：比如角色、道具图标。它们通常不需要随屏幕缩放，保持设计时的像素大小即可。但它们的位置可能需要根据屏幕比例进行微调。例如，一个横版游戏的角色出生点，你可能希望它始终距离屏幕底部一定距离，而不是一个固定的Y坐标。这时可以用代码根据实际屏幕高度来计算位置。

  // 假设设计分辨率高度是720，希望角色出生在距离底部100设计像素的位置 const designBottom = 100; const canvas = find('Canvas').getComponent(Canvas); const actualScreenHeight = canvas.node.height; // Canvas缩放后的实际高度 const scaleFactor = actualScreenHeight / 720; // 高度缩放比例 const actualBottom = designBottom * scaleFactor; playerNode.setPosition(playerNode.position.x, actualBottom);

• 背景层（Parallax Layer）：在横版卷轴游戏中，远处的山、云层移动速度慢，近处的树木移动速度快。在适配时，要确保最远的背景层宽度足够，能够覆盖最宽的屏幕，避免穿帮。通常需要准备宽度远超设计分辨率的背景图。

6. 关键步骤四：字体、间距与多分辨率资源的处理

细节决定成败。适配不仅仅是宏观布局，微观的视觉体验同样重要。

6.1 字体大小的动态缩放

一个在750x1334屏幕上看起来正好的24号字体，在更小的手机上可能显得巨大，在平板电脑上又可能显得太小。我们有几种策略：

1. 使用Widget配合百分比：对于标题等需要挂边的文字，将其锚点设置为对应位置，然后使用Widget定位。字体大小可以设置为固定值，因为容器本身在缩放。
2. 代码动态计算：对于必须保持视觉比重相对稳定的文字（如血条上的数字），可以通过脚本根据屏幕的物理尺寸或缩放比例来动态设置字体大小。

   import { _decorator, Component, Label, screen } from 'cc'; @ccclass('AdaptiveFontSize') export class AdaptiveFontSize extends Component { @property designFontSize: number = 24; // 在设计分辨率下的字体大小 start() { const label = this.getComponent(Label); const canvas = find('Canvas').getComponent(Canvas); // 一种简单的基于高度缩放的方法 const scaleFactor = Math.sqrt(canvas.node.height / 1334); // 使用平方根缩放，变化更平缓 label.fontSize = Math.floor(this.designFontSize * scaleFactor); } }

3. 使用Canvas节点的scale属性：如果整个UI节点树都放在一个统一的父节点下，可以尝试调整这个父节点的scale来整体缩放UI，但这会影响所有子节点，包括位置，需谨慎使用。

6.2 间距与边距的处理

不要使用绝对的像素值来设置元素之间的间距或边距，尤其是在Layout组件里。尽量使用相对值，或者将间距设置为设计像素值，并接受其在缩放后产生的微小变化（通常可以接受）。对于关键间距，也可以参考字体动态缩放的方法进行微调。

6.3 多分辨率资源（Optional）

对于顶级画质要求的项目，可以考虑为不同分辨率的设备准备不同精度的资源。Cocos Creator通过Asset Manager的cc.assetManager.downloader和cc.assetManager.loader可以设置presets，根据设备分辨率加载不同的资源包。但这会显著增加包体和开发复杂度，对于大多数中小型项目，使用一套高清资源，依靠引擎的纹理压缩和过滤缩放，已经足够。

7. 关键步骤五：全流程测试、调试与问题排查

配置完不等于结束，全面的测试是保证适配效果的最后一环，也是最重要的一环。

7.1 建立标准测试设备矩阵

不要只在自己的手机和模拟器上测试。建立一个涵盖主流屏幕比例的设备矩阵：

在Cocos Creator编辑器的预览窗口，可以方便地选择这些预设设备进行快速预览。

7.2 常见问题排查清单

在实际测试中，你可能会遇到以下问题，这里提供排查思路：

7.3 真机调试技巧

预览器再好，最终也要上真机。

1. 使用cc.view获取真实视口信息：在脚本中打印cc.view.getVisibleSize()和cc.view.getFrameSize()，可以分别获得设计分辨率下的可视区域和设备的物理像素尺寸，帮助你精准定位问题。
2. 构建开发包：使用Cocos Creator的构建功能，生成手机上的调试包（如Android的APK），安装到真实设备上进行测试。这是最可靠的测试方式。
3. 关注异形屏（刘海屏、挖孔屏）：对于这些屏幕，除了整体适配，还需要注意安全区域。Cocos Creator提供了sys.safeArea接口来获取避开刘海和圆角的安全区域，对于需要绝对置顶或置底的按钮，应参考此区域进行调整。

踩坑实录：我曾经在一个横屏游戏里，为顶部标题栏设置了Widget贴顶。在普通手机上运行良好，但在某个有巨大刘海的手机上，标题文字被刘海遮住了一部分。解决办法就是获取sys.safeArea，将标题栏的Widget的Top值设置为safeArea.top（即安全区域的上边距），而不是0。

屏幕适配是一个从设计之初就要纳入考虑的系统工程。遵循这五个关键步骤——从确立设计分辨率与策略，到构建弹性UI布局，再到处理背景与场景，细化字体间距，最后进行全方位测试——能够帮你建立起清晰的适配逻辑，避免后期陷入混乱的修改。记住，没有一劳永逸的配置，只有针对项目特点的、深思熟虑后的方案。多预览、多测试、多思考“如果屏幕变得更长或更宽，这里会怎样”，是做好适配的不二法门。