Cocos2dx 3.x 屏幕适配

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进行位置的适配。)入下图:

Cocos2dx 3.x 屏幕适配

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可见;

Cocos2dx 3.x 屏幕适配

②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可见;

Cocos2dx 3.x 屏幕适配

③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可见;右侧图像空缺,所以使用这种方式,需要美术出底图时足够宽,否则穿帮。

Cocos2dx 3.x 屏幕适配

如果Frame的width太小时,右下角标记,右上角标记,以及button将消失。比如设置g_frame_size = (640, 640)时,得到入下图结果:

Cocos2dx 3.x 屏幕适配

④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消失;

Cocos2dx 3.x 屏幕适配

如果Frame的height足够大时,顶部将出现黑边,所以采用这种模式,美术提供的底图高度必须足够,否则将穿帮。比如设置g_frame_size = (1136, 960)时,得到入下图结果:

Cocos2dx 3.x 屏幕适配

⑤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都消失。

Cocos2dx 3.x 屏幕适配

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

以上,完。

上一篇:两分钟让你明白cocos2dx的屏幕适配策略


下一篇:Cocos2d-x——Cocos2d-x 屏幕适配新解【转载】