Cocos2dx 3.10+Cocos Studio3.10
1.在适配过程中必须明确几个概念：
①Frame大小：这个值在windows/mac/linux下就是创建窗体的大小，在手机上就是屏幕大小。
设置方式：这里我们设置一个全局的变量(这个是iphone5/5s的分辨率)。
static cocos2d::Size g_frame_size = cocos2d::Size(, );
auto director = Director::getInstance();
auto glview = director->getOpenGLView();
if(!glview) {
#if (CC_TARGET_PLATFORM == CC_PLATFORM_WIN32) || (CC_TARGET_PLATFORM == CC_PLATFORM_MAC) || (CC_TARGET_PLATFORM == CC_PLATFORM_LINUX)
glview = GLViewImpl::createWithRect("ScreenFix", Rect(, , g_frame_size.width, g_frame_size.height)); //这里设置窗体大小
#else
glview = GLViewImpl::create("ScreenFix"); //这里就是手机屏幕大小
#endif
director->setOpenGLView(glview);
}
获取方式：
Size cur_frame_size = Director::getInstance()->getOpenGLView()->getFrameSize();
②Design分辨率大小：逻辑设计分辨率大小，美术可以根据这个设计分辨率来设计资源大小以及UI布局。会根据不同的分辨率适配策略，按Frame和Design的某种比例进行缩放。
设置方式：这里我们设置一个全局的变量(这个是比较常用的分辨率），后面将不断修改分辨率策略对画面整体的影响。
static cocos2d::Size g_design_resolution_size = cocos2d::Size(, );
glview->setDesignResolutionSize(g_design_resolution_size.width, g_design_resolution_size.height, ResolutionPolicy::EXACT_FIT); //这里设置分辨率策略
获取方式：（注意：修改分辨率策略，获得的设计分辨率将不一样！！！）
Size cur_design_size = Director::getInstance()->getOpenGLView()->getDesignResolutionSize();
③VisibleSize：可视区域大小，一般情况下UI都要在可视范围内，根据这个值可以对UI进行位置的适配。
获取方式：
Size cur_visible_size = Director::getInstance()->getOpenGLView()->getVisibleSize();
④VisibleOrigin：可视区域原点位置，用于可视区域位置的计算。
获取方式：
Vec2 cur_origin = Director::getInstance()->getOpenGLView()->getVisibleOrigin();
2.分辨率策略：根据不同分策略，将设计分辨率的画面进行缩放。
①EXACT_FIT：缩放设计分辨率画面，铺满整个窗体（手机）。会产生拉伸变形，一般情况下不使用。
②SHOW_ALL：按照设计分辨率的锁定比例，缩放设计分辨率画面，不变形、不裁剪填充窗体（手机）。会产生黑边，一般情况下不使用。
③FIXED_HEIGHT：按照 窗体（手机）分辨率高度/设计分辨率高度 的比例，缩放设计分辨率画面。这种设计分辨率，适合于横版游戏。美术出底图资源时，要保证宽度足够，否则会穿帮。
④FIXED_WIDTH：按照 窗体（手机）分辨率宽度/设计分辨率宽度 的比例，缩放设计分辨率画面。这种设计分辨率，适合于竖版游戏。美术出底图资源时，要保证高度足够，否则会穿帮。
⑤NO_BORDER：按照设计分辨率的锁定比例，缩放设计分辨率画面，不变形、裁剪填充窗体（手机）。会产生裁剪，可视原点位置会修改。
3.下面使用Cocos Studio用设计分辨率(960,640)设计一个基本的场景，里面包含一张底图(四个角都有红色框标记)。一个layout，layout的右上角有一个button。
（使用layout容器，可以包含所有UI，然后对UI进行位置的适配。）入下图：
4.加载csb后，使用不同策略，得到的图像和数值如下：
①EXACT_FIT
输出的值：
cur_frame_size : width = 1136.000000 height = 640.000000
cur_visible_size : width = 960.000000 height = 640.000000
cur_origin : x = 0.000000 y = 0.000000
cur_design_size : width = 960.000000 height = 640.000000
图像分析：
图像拉伸变形；四角可见；右上角button可见；
②SHOW_ALL
输出的值：
cur_frame_size : width = 1136.000000 height = 640.000000
cur_visible_size : width = 960.000000 height = 640.000000
cur_origin : x = 0.000000 y = 0.000000
cur_design_size : width = 960.000000 height = 640.000000
图像分析：
图像没有拉伸变形，没有裁剪；四角可见；右上角button可见；
③FIXED_HEIGHT
输出的值：（注意VisibleSize和DesignSize的改变）
cur_frame_size : width = 1136.000000 height = 640.000000
cur_visible_size : width = 1136.000000 height = 640.000000
cur_origin : x = 0.000000 y = 0.000000
cur_design_size : width = 1136.000000 height = 640.000000
图像分析：
图像没有拉伸变形；四角可见；右上角button可见；右侧图像空缺，所以使用这种方式，需要美术出底图时足够宽，否则穿帮。
如果Frame的width太小时，右下角标记，右上角标记，以及button将消失。比如设置g_frame_size = (640, 640)时，得到入下图结果：
④FIXED_WIDTH
输出的值：（注意VisibleSize和DesignSize的改变）
cur_frame_size : width = 1136.000000 height = 640.000000
cur_visible_size : width = 960.000000 height = 541.000000
cur_origin : x = 0.000000 y = 0.000000
cur_design_size : width = 960.000000 height = 541.000000
图像分析：
图像没有拉伸变形；左上角标记、右上角标记以及button消失；
如果Frame的height足够大时，顶部将出现黑边，所以采用这种模式，美术提供的底图高度必须足够，否则将穿帮。比如设置g_frame_size = (1136, 960)时，得到入下图结果：
⑤NO_BORDER
输出的值：(注意VisibleSize和VisibleOrigin的值)
cur_frame_size : width = 1136.000000 height = 640.000000
cur_visible_size : width = 960.000061 height = 540.845093
cur_origin : x = -0.000031 y = 49.577454
cur_design_size : width = 960.000000 height = 640.000000
图像分析：
图像没有拉伸变形，有裁剪；四个角的标记以及button都消失。
4.从上面可以看到，分辨率策略方式不一样，button位置变化。一般情况下，我们需要将UI上的元素都按照位置比例限制在可视区域内（在这里就是将button限制在屏幕的右上角上）。
按照当前经过缩放的设计分辨率和原来的设计分辨率之间的比例，就可以计算得到UI的相对位置，保证了button一定出现在右上角的位置；
if (cocos2d::Node* csb_node = CSLoader::createNode("res/MainScene.csb")){
if (Layout* layout = dynamic_cast<Layout*>(csb_node->getChildByName("Layout"))){
if (Button* button = dynamic_cast<Button*>(layout->getChildByName("Button"))){
//按照比例以及可视位置原点计算位置
float pos_x_scale = cur_design_size.width / g_design_resolution_size.width;
float pos_y_scale = cur_design_size.height / g_design_resolution_size.height;
button->setPositionX(pos_x_scale*button->getPositionX() - cur_origin.x);
button->setPositionY(pos_y_scale* button->getPositionY() - cur_origin.y);
}
}
this->addChild(csb_node);
}
以上，完。