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

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

公司所用的框架是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