Cocos2dx 3.x 屏幕适配

Cocos2dx 3.10+Cocos Studio3.10

1.在适配过程中必须明确几个概念：

①Frame大小：这个值在windows/mac/linux下就是创建窗体的大小，在手机上就是屏幕大小。

设置方式：这里我们设置一个全局的变量(这个是iphone5/5s的分辨率)。

 

static cocos2d::Size g_frame_size = cocos2d::Size(1136, 640);

 

    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(0, 0, 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(960, 640);

 

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);
    }

 

以上，完。