公司的项目的多分辨率适配工作

淡淡的烟草味﹌ 2022-08-13 11:42 175阅读 0赞

仅供自己平时学习和工作所用~

公司所用的框架是quick cocos 2dx的，不过感觉这种多分辨率适配同样适用于cocos2dx，也不失为是一种方法。

这里还要考虑的东西是一个是位置的相对定位，还有一个是大小的相对设计。

首先我来说一下公司的项目（宝贝云计划）的分辨率适配我们需要怎样操作，然后再来说明这样做的原因。

使用方法：

在quickcocos2dx项目的config.lua中，把以下的内容全部屏蔽掉：

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

相当于使用的是自己的多分辨率适配的方法，而屏蔽了quick自带的方法。

（1）首先从大小入手：

资源：背景图片的大小一般都为1260 \* 940 （这个图片足够将绝大部分的手机的界面填满），但是其他的资源都是按照960\*640的这个分辨率来提供的。

代码：所有的资源包括背景图片都是以setScale（Imagescale）这样的格式进行缩放。

（2）其次再来看位置：

这又分为两个部分：第一个部分是所有的背景元素（互动动画之类的东西），它们全部都被绘制在中心的960\*640的区域内。这些的位置就直接使用getFixedX()和getFixedY()来进行定位就可以了。

第二部分是所有的ui元素（比如返回按钮，上一首，下一首，重新开始这样的按钮），它们在绘制的同时使用getFixedX（）加或减 相应的 我们定义的偏移量（如CommonAPI.GAP\_W），确定最后的位置。例如左上角的一个ui它的定位就应该是backBtn:setPosition(CommonAPI:getFixedX(34) - CommonAPI.GAP\_W, CommonAPI:getFixedY(289) + CommonAPI.GAP\_H)

ps:这里的getfixedX（）和getFixedY() 它们的参数 都是在 ***480\*320*** 这个分辨率我们量出来的值。

这样做的好处是可以将这个屏幕全部填满，使之没有黑边（不美观），同时我们真正有用的互动部分都放在屏幕中央的正方形以内，而周围则有一圈区域是在不同手机上呈现不同的情况，这里可以放置我们的ui，比如说我们的返回按钮要一直放在屏幕的左上角，距离左边界和上边界都很近。（使用方法在代码中都有体现，我这里只是进行了一个总结）

下面我们来说一说这种分辨率适配的原理：

1.本来quickcocos2dx可以控制图片的缩放，但是当我们注释掉config里的代码之后，图片的大小将不会有变化，也就是说缩放需要我们自己来做（通过setScale来做）。

2.（详见宝贝云计划commonapi文件calculateScale）     把960\*640 的 依次往 800\*480 和 1024\*768里放，根据分子和分母的比值来进行判断，保证960\*640的有超出部分，然后进行缩放。正好与相应边重合的即为标准。

3.背景图片大小：1260\*940。

CommonAPI = \{  
\-- 解析NPC配置文件，返回最终解析结果  
SCALE = 1.0  
,  
FIXED\_WIDTH = true --这里暂时用不到了  
,  
CENTER\_X = 240 -- 中心参考点（根据像素计算出中心点）这个值会被重新赋值  
,  
CENTER\_Y = 160 -- 中心参考点（根据像素计算出中心点）这个值会被重新赋值  
,  
BASE\_W = 480 -- 分辨率基础宽度   
,  
BASE\_H = 320 -- 分辨率基础高度  
,  
IMAGE\_BASE\_W = 960 -- 图片基础标准宽度  
,  
IMAGE\_BASE\_H = 640 -- 图片基础标准高度  
,  
BASE\_IMAGE\_SCALE = 1.0 --     这个值也会被重新赋值  
\}

function CommonAPI:calculateScale( )  
self.CENTER\_X = display.widthInPixels / 2  
self.CENTER\_Y = display.heightInPixels / 2  
if self.BASE\_W/self.BASE\_H >= display.widthInPixels/display.heightInPixels then  
self.SCALE = display.widthInPixels / self.BASE\_W  
self.FIXED\_WIDTH = true  
self.BASE\_IMAGE\_SCALE = display.widthInPixels / self.IMAGE\_BASE\_W  
else   
self.SCALE = display.heightInPixels / self.BASE\_H  
self.FIXED\_WIDTH = false  
self.BASE\_IMAGE\_SCALE = display.heightInPixels / self.IMAGE\_BASE\_H  
end  
self.GAP\_W = (display.widthInPixels - self.IMAGE\_BASE\_W\*self.BASE\_IMAGE\_SCALE)/2 -- 超出显示线外的宽度  
self.GAP\_H = (display.heightInPixels - self.IMAGE\_BASE\_H\*self.BASE\_IMAGE\_SCALE)/2 -- 超出显示线外的高度  
end  
  
  
\-- 位置的缩放  
function CommonAPI:getPosScale( )  
return self.SCALE  
end  
  
  
function CommonAPI:getImageScale( )  
return self.BASE\_IMAGE\_SCALE  
end  
  
  
\-- 传进来的x是320\*480下的X的距离  
function CommonAPI:getFixedX( x )  
return self.CENTER\_X + self.SCALE \* (x - self.BASE\_W / 2)  
end  
  
  
\--- 传进来的x是320\*480下的Y的距离  
function CommonAPI:getFixedY( y )  
return self.CENTER\_Y + self.SCALE \* (y - self.BASE\_H / 2)  
end