CocosCreator 面试题（十七）Cocos creator 固定宽度与固定高度的底层原理是什么？Cocos creator是如何做适配的?

一、Cocos creator 固定宽度与固定高度的底层原理

在 Cocos Creator 中，固定宽度和固定高度是两种常见的适配方式，用于在不同屏幕尺寸上保持游戏画面的一致性。它们的底层原理如下：

1、固定宽度适配

固定宽度适配的目标是在不同屏幕宽度上保持游戏画面的一致性。底层原理如下：

• 游戏设计时基于一个固定的宽度进行布局和渲染，通常称为「设计宽度」。
• 在游戏初始化阶段，通过获取设备的屏幕宽度，计算出一个缩放比例，将设计宽度缩放到设备的实际宽度上。
• 将游戏画面按照缩放比例进行缩放，保持宽度的一致性。高度会根据缩放比例等比例缩放，以保持画面的纵横比不变。
• 使用相对坐标和布局方式，确保游戏中的元素在不同屏幕尺寸上正确定位和显示。

2、固定高度适配

固定高度适配的目标是在不同屏幕高度上保持游戏画面的一致性。底层原理如下：

• 游戏设计时基于一个固定的高度进行布局和渲染，通常称为「设计高度」。
• 在游戏初始化阶段，通过获取设备的屏幕高度，计算出一个缩放比例，将设计高度缩放到设备的实际高度上。
• 将游戏画面按照缩放比例进行缩放，保持高度的一致性。宽度会根据缩放比例等比例缩放，以保持画面的纵横比不变。
• 使用相对坐标和布局方式，确保游戏中的元素在不同屏幕尺寸上正确定位和显示。

通过固定宽度或固定高度的适配方式，可以使游戏在不同屏幕尺寸上保持一定的一致性，确保游戏中的元素的大小和位置相对稳定。具体选择哪种适配方式取决于你的游戏需求和设计考虑。在 Cocos Creator 中，你可以通过设置「设计分辨率」和使用相对坐标和布局方式来实现固定宽度或固定高度的适配。

二、Cocos creator如何做适配？

Cocos Creator 提供了多种适配方式，用于在不同屏幕尺寸上保持游戏画面的一致性。下面介绍 Cocos Creator 中常用的适配方式和相应的配置方法：

1. 固定宽度适配：
   • 在 Cocos Creator 编辑器中，选择「项目设置」窗口。
   • 在「分辨率」选项卡中，选择「固定宽度适配」。
   • 设置设计分辨率的宽度，这是游戏设计时使用的固定宽度。
   • 在代码中，可以通过 cc.view.getFrameSize().width 获取屏幕宽度，并使用缩放比例将设计宽度缩放到设备宽度上。

2. 固定高度适配：
   • 在 Cocos Creator 编辑器中，选择「项目设置」窗口。
   • 在「分辨率」选项卡中，选择「固定高度适配」。
   • 设置设计分辨率的高度，这是游戏设计时使用的固定高度。
   • 在代码中，可以通过 cc.view.getFrameSize().height 获取屏幕高度，并使用缩放比例将设计高度缩放到设备高度上。

3. 自适应适配：
   • 在 Cocos Creator 编辑器中，选择「项目设置」窗口。
   • 在「分辨率」选项卡中，选择「自适应适配」。
   • 设置设计分辨率的宽度和高度，这是游戏设计时使用的分辨率。
   • 在代码中，可以使用相对坐标和布局方式，使用百分比或比例来定位和缩放游戏中的元素，以适应不同屏幕尺寸。

4. 其他适配方式：
   • Cocos Creator 还提供了其他适配方式，如填充适配、裁剪适配等，可以根据具体需求进行选择和配置。

除了选择适配方式，你还可以使用 Cocos Creator 提供的 UI 组件和布局系统来实现自适应布局。例如，使用 cc.Widget 组件来设置节点的锚点、边距、对齐方式等，以适应不同屏幕尺寸。

总之，Cocos Creator 提供了多种适配方式和工具，帮助你在不同屏幕尺寸上保持游戏画面的一致性。选择适当的适配方式，并结合 UI 组件和布局系统，可以实现灵活而精确的适配效果。