关于使用Cocos2d-x 3.2和Cocos Studio做屏幕适配的方案总结

今天，我花费时间深入研究了屏幕适配过程中出现的缩放以及展示不全的问题，其中黑边方案因适用性不佳已被排除。接下来，让我们深入探讨屏幕适配的具体方案。

起初，美工为我们提供了一张图片，假设这张图片的宽度足够长，那么在不同分辨率的设备上，我们应该如何展示它呢？显然，我们无法在所有分辨率的设备上都按照原比例完美展示这张图片，因此可行的方案主要有以下两种：

1. 铺满屏幕（长宽非等比缩放 EXACTFIT）

天天德州这款游戏采用了这种屏幕适配方法。在不同分辨率的设备上，可以明显看到游戏中的元素被缩放或拉伸。对于休闲类游戏而言，这种方式在一定程度上是可以接受的，因为这类游戏通常不必过于追求画面的完美比例。由于这种效果比较常见，这里就不再展示相关图片了。

2. 部分图片被遮挡（长宽等比缩放 FIXHEIGHT）

保卫萝卜采用了这种屏幕适配方式。在该游戏中，场景中的控件相对布局大小会进行等比缩放。由于背景图采用了足够长的图片，在较宽的手机上，背景图展示的内容会更多；而在较窄的手机上，展示的内容则相对较少。

下面通过两张手机截图的四个角来直观展示这种效果。从图片中可以看到，控件的大小保持一致，但由于分辨率不同，背景图的展示宽度存在差异。

方案测试

测试方案一

• 布局设置：根节点使用绝对布局，并勾选自适应屏幕。子空间尺寸不勾选百分比，以避免宽高非等比缩放导致元素变形；控件布局勾选百分比。设置分辨率为 480320，背景图片大小同样为 480320。
• 代码设置：

  // 修改屏幕大小 1
  glview->setFrameSize(480, 320);
  glview->setDesignResolutionSize(480, 320, ResolutionPolicy::FIXED_HEIGHT);
  

// 修改屏幕大小 2 glview->setFrameSize(640, 320); glview->setDesignResolutionSize(480, 320, ResolutionPolicy::FIXED_HEIGHT);

测试结果显示，控件未做任何拉伸，但背景图明显变小。

#### 测试方案二
- **布局设置**：根节点依旧使用绝对布局，勾选自适应屏幕。子空间尺寸不勾选百分比，控件布局勾选百分比。分辨率设置为 480*320，背景图片大小改为 640*320。
- **代码设置**：

// 修改屏幕大小 1 glview->setFrameSize(480, 320); glview->setDesignResolutionSize(480, 320, ResolutionPolicy::FIXED_HEIGHT);

// 修改屏幕大小 2 glview->setFrameSize(640, 320); glview->setDesignResolutionSize(480, 320, ResolutionPolicy::FIXED_HEIGHT);

// 修改屏幕大小 3 glview->setFrameSize(640, 480); glview->setDesignResolutionSize(480, 320, ResolutionPolicy::FIXED_HEIGHT);

### 结论
在本次测试中，为了更清晰地展示效果，使用的分辨率差异较为夸张。在实际情况中，设备的长宽比通常不会有如此明显的差距。如果游戏对背景的展示要求不是非常严格，建议采用第二种方案进行屏幕适配。这种方案可以保证控件的宽高进行等比缩放，背景图部分展示，从而在不同分辨率的设备上都能呈现出相对协调的视觉效果。