对quickcocos2dx 多分辨率适配的理解

梦里梦外; 2022-08-05 20:30 188阅读 0赞

我的适配版本是quickcocos2dx 2.2.5，下面我来谈一谈自己对多分辨率适配的理解。

1.我们应当确定我们的参考分辨率，得到我们的图片资源大概的缩放比例。可以通过我们的 config.lua中的参数来确定。

\-- screen orientation  
CONFIG\_SCREEN\_ORIENTATION = "landscape"  
  
\-- design resolution  
CONFIG\_SCREEN\_WIDTH  = 960  
CONFIG\_SCREEN\_HEIGHT = 640  
  
\-- auto scale mode  
CONFIG\_SCREEN\_AUTOSCALE = "FIXED\_HEIGHT"

首先，我们新建了一个横版的项目，并且这个横版项目的参考分辨率是960 \* 640，我们不妨取一张960 \* 640的图片来进行测试，在960 \* 640 的分辨率下，我们的图片应该刚好填满整个屏幕。

CONFIG\_SCREEN\_AUTOSCALE = "FIXED\_HEIGHT"这行代码的意思是我以我的高为标准，也就是不管我在什么分辨率的情况下，我都是以我当前分辨率的高填满屏幕的高为标准进行缩放。那么举个例子，如果我是800 \* 640 这样一个分辨率下，我的图片要在纵向填满，我的960\*640的这张图片刚好不需要进行缩放，但是我的图片横向就会超出我的屏幕。如果我的分辨率是1280 \* 720 的话，我要在纵向填满我的屏幕，那么我的那张960\*640的图片就会被拉伸，也就是宽和高都会乘以720/640的这个比值，也就是9/8,那么我的示例图片应当被拉伸成为1080\*720，那么我的图片就会在横向留有黑边。同样地，在目前的主流分辨率市场，应该只有1024\*768或者2048\*1536这样的分辨率会导致我们上述的设定会在横向溢出屏幕（之前的800\*640是一个例子，应该几乎没有这种分辨率）。

那么，如果我们的参考分辨率是960\*640的横板项目，并且我们是CONFIG\_SCREEN\_AUTOSCALE = "FIXED\_HEIGHT"，那么根据上文，我们要保证没有黑边，也就是我的背景图片要正好贴着屏幕横向的两条边或者有部分溢出。也就是说，我们要让相对黑边最宽的那一个分辨率的背景图片的最终效果也要顶到屏幕的左右两端。我们不妨用quick模拟器的所有分辨率来进行测试，共有12种分辨率，分别是480\*320,960\*640,1136\*640,1024\*768,2048\*1536,800\*480,854\*480,960\*540,1024\*600,1280\*720,1280\*800,1920\*1080。通过比值的计算，我们求出相对黑边最多的分辨率应该是 854\*480， 那么我们的背景图片应为 854\*640/480=1138.66,大概为1140，也就是我们的背景图片的大小应为1140\*640 。

2.我们的参考分辨率是960\*640的话，我们的背景图上的元素则分为两种，一种是ui，如放置于屏幕左上角等位置的返回按钮，另一种是我的场景元素（应该一直置于可见区域以内）。这里场景元素指的是我们的人物动画等可能与用户交互的东西。

（1）如果是ui，而且这个ui置于屏幕的左上角，我们可以直接用display.left + 100, display.top - 100去确定。

（2）如果是可见区域内元素，一个可视界面内元素居于屏幕左侧，我们不妨用display.cx 和 display.cy加减一些相对偏移量来进行定位，同时务必在1024\*768这个分辨率下保证我们的界面内元素不会超出屏幕。

总结：我对于quickcocos2dx多分辨率的做法就是先确定背景图片的大小，如果我的参考分辨率是960\*640，在定高的情况下，那么我的背景图片的大小应当是1140\*640，注意，这里的背景图片横向在有的分辨率上会有一些溢出屏幕，只有在854\*480的分辨率上会几乎显示完整。所以我们的ui的位置需要放在屏幕四周，与屏幕边缘接近，那么就用display.top等进行加减定位。我们的可视区域内的动画和图片可以通过在960\*640下通过display.cx和display.cy加减来进行确定，保证在1024\*768这种较为极端的分辨率下也能完整显示。

github： [https://github.com/Froyo91/quickcocos2dx-multi-resolution-adaptation][https_github.com_Froyo91_quickcocos2dx-multi-resolution-adaptation]

[https_github.com_Froyo91_quickcocos2dx-multi-resolution-adaptation]: https://github.com/Froyo91/quickcocos2dx-multi-resolution-adaptation