Cocos2dx 3.x 屏幕適配

Cocos2dx 3.10+Cocos Studio3.10

1.在適配過程當中必須明確幾個概念：

①Frame大小：這個值在windows/mac/linux下就是建立窗體的大小，在手機上就是屏幕大小。

設置方式：這裏咱們設置一個全局的變量(這個是iphone5/5s的分辨率)。

 

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

 

 1     auto director = Director::getInstance();  2     auto glview = director->getOpenGLView();  3     if(!glview) {  4 #if (CC_TARGET_PLATFORM == CC_PLATFORM_WIN32) || (CC_TARGET_PLATFORM == CC_PLATFORM_MAC) || (CC_TARGET_PLATFORM == CC_PLATFORM_LINUX)
 5         glview = GLViewImpl::createWithRect("ScreenFix", Rect(0, 0, g_frame_size.width, g_frame_size.height)); //這裏設置窗體大小
 6 #else
 7         glview = GLViewImpl::create("ScreenFix"); //這裏就是手機屏幕大小
 8 #endif
 9         director->setOpenGLView(glview); 10     }

 

獲取方式：

Size cur_frame_size = Director::getInstance()->getOpenGLView()->getFrameSize();

 

②Design分辨率大小：邏輯設計分辨率大小，美術能夠根據這個設計分辨率來設計資源大小以及UI佈局。會根據不一樣的分辨率適配策略，按Frame和Design的某種比例進行縮放。

設置方式：這裏咱們設置一個全局的變量(這個是比較經常使用的分辨率），後面將不斷修改分辨率策略對畫面總體的影響。

 

1 static cocos2d::Size g_design_resolution_size = cocos2d::Size(960, 640);

 

1 glview->setDesignResolutionSize(g_design_resolution_size.width, g_design_resolution_size.height, ResolutionPolicy::EXACT_FIT); //這裏設置分辨率策略

 

獲取方式：（注意：修改分辨率策略，得到的設計分辨率將不同！！！）

1 Size cur_design_size = Director::getInstance()->getOpenGLView()->getDesignResolutionSize();

 

 

③VisibleSize：可視區域大小，通常狀況下UI都要在可視範圍內，根據這個值能夠對UI進行位置的適配。

獲取方式：

 

1     Size cur_visible_size = Director::getInstance()->getOpenGLView()->getVisibleSize();

 

 

④VisibleOrigin：可視區域原點位置，用於可視區域位置的計算。

獲取方式：

1 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

輸出的值：

1 cur_frame_size : width  = 1136.000000 height = 640.000000
2 cur_visible_size : width  = 960.000000 height = 640.000000
3 cur_origin : x  = 0.000000 y = 0.000000
4 cur_design_size : width  = 960.000000 height = 640.000000

圖像分析：

圖像拉伸變形；四角可見；右上角button可見；

 

②SHOW_ALL

輸出的值：

1 cur_frame_size : width  = 1136.000000 height = 640.000000
2 cur_visible_size : width  = 960.000000 height = 640.000000
3 cur_origin : x  = 0.000000 y = 0.000000
4 cur_design_size : width  = 960.000000 height = 640.000000

圖像分析：

圖像沒有拉伸變形，沒有裁剪；四角可見；右上角button可見；

 

③FIXED_HEIGHT

輸出的值：（注意VisibleSize和DesignSize的改變）

1 cur_frame_size : width  = 1136.000000 height = 640.000000
2 cur_visible_size : width  = 1136.000000 height = 640.000000
3 cur_origin : x  = 0.000000 y = 0.000000
4 cur_design_size : width  = 1136.000000 height = 640.000000

圖像分析：

圖像沒有拉伸變形；四角可見；右上角button可見；右側圖像空缺，因此使用這種方式，須要美術出底圖時足夠寬，不然穿幫。

若是Frame的width過小時，右下角標記，右上角標記，以及button將消失。好比設置g_frame_size = (640, 640)時，獲得入下圖結果：

 

④FIXED_WIDTH

輸出的值：（注意VisibleSize和DesignSize的改變）

1 cur_frame_size : width  = 1136.000000 height = 640.000000
2 cur_visible_size : width  = 960.000000 height = 541.000000
3 cur_origin : x  = 0.000000 y = 0.000000
4 cur_design_size : width  = 960.000000 height = 541.000000

圖像分析：

圖像沒有拉伸變形；左上角標記、右上角標記以及button消失；

若是Frame的height足夠大時，頂部將出現黑邊，因此採用這種模式，美術提供的底圖高度必須足夠，不然將穿幫。好比設置g_frame_size = (1136, 960)時，獲得入下圖結果：

 

⑤NO_BORDER

輸出的值：(注意VisibleSize和VisibleOrigin的值)

1 cur_frame_size : width  = 1136.000000 height = 640.000000
2 cur_visible_size : width  = 960.000061 height = 540.845093
3 cur_origin : x  = -0.000031 y = 49.577454
4 cur_design_size : width  = 960.000000 height = 640.000000

圖像分析：

圖像沒有拉伸變形，有裁剪；四個角的標記以及button都消失。

 

4.從上面能夠看到，分辨率策略方式不同，button位置變化。通常狀況下，咱們須要將UI上的元素都按照位置比例限制在可視區域內（在這裏就是將button限制在屏幕的右上角上）。

按照當前通過縮放的設計分辨率和原來的設計分辨率之間的比例，就能夠計算獲得UI的相對位置，保證了button必定出如今右上角的位置；

 1     if (cocos2d::Node* csb_node = CSLoader::createNode("res/MainScene.csb")){  2         if (Layout* layout = dynamic_cast<Layout*>(csb_node->getChildByName("Layout"))){  3             if (Button* button = dynamic_cast<Button*>(layout->getChildByName("Button"))){  4 
 5                 //按照比例以及可視位置原點計算位置
 6                 float pos_x_scale = cur_design_size.width / g_design_resolution_size.width;  7                 float pos_y_scale = cur_design_size.height / g_design_resolution_size.height;  8 
 9                 button->setPositionX(pos_x_scale*button->getPositionX() - cur_origin.x); 10                 button->setPositionY(pos_y_scale* button->getPositionY() - cur_origin.y); 11  } 12  } 13         this->addChild(csb_node); 14     }

 

以上，完。