如何快速地制作UI, 是開發遊戲時不得不面臨的問題. Cocos2d-x 經曆了1.0時代的固定位置, 2.0時代的相對位置, 在3.0時代引入了全新的GUI機制. 新的GUI機制, 類似于Android的GUI系統, 功能強大但如果手動編碼來實作就很繁瑣. CocoStudio對Cocos2d-x的新的GUI系統進行了全面的支援, 可以讓大家在快速開發UI的同時也享受到Cocos2d-x強大的新功能.
今天我們來看下如何在CocoStudio中如何快速制作多分辨率的UI布局.
一 下載下傳和安裝
Cocos2d-x 為v2.2版本也添加了新的GUI系統, 盡管我們推薦大家使用更新的3.0來制作遊戲, 如果你因為各種原因無法更新到v3.0, 依然可以采用v2.2來享受新的GUI系統和CocoStudio帶來的便捷.
我們采用的是Cocos2d-x 3.0RC0和CocoStudio1.3. 大家可以在 http://cocos2d-x.org/download 找到下載下傳連結, 下載下傳安裝過程, 這裡不再贅述.
二 子控件布局
在CocoStudio中有四種布局方式:
1. 絕對布局
絕對布局下, 子控件的位置由其坐标決定.優點在于布局靈活性大, 但對于移動開發來說, 通常要适應多種不同的分辨率, 絕對布局在做全屏多分辨率的情況下就不太适用.
2. 相對布局
相對布局, 子控件的位置由其相對于父控件的縱橫兩個方向的位置決定. 其中橫方向上分居左,居中, 居右三個位置, 縱方向上分為居上, 居中, 居下三個位置. 這樣也就是說子控件的位置由其相對于父節點的9個位置(左上, 左中, 左下, 上中, 中心, 下中, 右上, 右中, 右下)決定. 相對布局還允許子控件相對于以上9個位置做偏移.
由于相對布局的相對性, 是以對父節點的大小不敏感. 在多分辨率的情況下, 優勢很大.
3. 線性橫向布局
線性布局, 可以用糖葫蘆做比喻, 子控件在父控件上依次排列. 分橫向和豎向兩種.
4. 線性橫向布局
同上, 不介紹了.
我們可以在CocoStudio的UI編輯器中, 檢視一個層容器并的屬性. 可以看到如下圖所示, 子控件布局共有四個選項, 分别是絕對布局, 相對布局, 線性橫向, 線性縱向布局.
三 目标
我們今天要制作一個遊戲的界面如上圖所示, 并且要自動适應多分辨率的界面. 我們在其中用到了相對布局, 線性的橫向和縱向布局.
我們使用的cocos2d-x的版本是3.0RC0, CocoStudio的版本是1.3.0.0. 不同的版本, 功能上會有差異, 大家學習時, 最好采用對應的版本.
CocoStuido sample----SampleLayout源代碼位址
官方位址:
https://github.com/chukong/CocoStudioSamplesBasedOnCocos2d-x3.0
目前臨時位址, 希望以後能合并進官方庫
https://github.com/young40/CocoStudioSamplesBasedOnCocos2d-x3.0
大家可以預先下載下傳這個源代碼, 等下要用到裡面的圖檔資源哦
四 建立項目并導入資源
大家可以在下載下傳到源代碼SampleUILayout\SampleLayout_Editor\Resources目錄下找到需要的資源.
請大家自行建立UI編輯器項目并導入資源.
五 根節點屬性設定
因為我們資源是940*640最佳适用的, 是以我們在UI編輯器的普通模式下, 切換分辨率到960*640.
這時我們對象結構面闆隻有一個根節點, 我們先來看下如何設定根節點的屬性.
我們修改下根節點的屬性, 子控件布局設定為相對布局, 名字修改為root, 并且勾選"自适應分辨率".
勾選自适應分辨率後, 整個根節點大小将随着手機螢幕大小(電腦上就是視窗大小了)變化而變化.
六 top-left的屬性設定
我們接下來為根節點添加一個圖檔, 這次我們修改了較多的屬性, 我們來逐一解釋下.
名稱屬性修改為top-left便于識别, 檔案屬性設定為top-left.png這張圖檔.
我們希望圖檔的大小随着分辨率的變化而變化, 把尺寸的模式從Auto修改為了Custom, 并且勾選了百分比選框.
圖檔的原始尺寸是144*66, 是以我們重設下其尺寸為144*66. 這樣在960*640的分辨率下, 就顯示了原始大小.
我們勾選了百分比選框, 在其他分辨率下, 比如480*320下, 圖檔顯示的尺寸就變成了72*33. 這樣顯示效果就保證了一緻性.
需要說明的是, 如果非960:640的比例分辨率, 圖檔難免就會出現拉伸.
我們在适配多分辨率的螢幕的時候, 需要考慮多種因素, 螢幕大小, 像素密度, 高寬比, 安裝包大小甚至項目組人力因素和上線日期, 最終的方案大部分都是一個折衷的方案.
然後我們在控件布局中選擇其橫向布局為左邊, 縱向布局為上邊. 大家可以看到在渲染區我們的圖檔已經緊貼了根節點的左上角了.
我們再渲染區中拖動該控件到一個合适的位置, 可以看到空間布局區域的邊緣屬性左和上有變化(圖中分别為23, 21). 這個就是指無論螢幕分辨率變化, 這個控件都會離螢幕的左上角23, 21像素的距離.
同樣地, 大家可以添加并設定左下的圖檔.
七 居中的三個糖葫蘆
居中的元素在遊戲裡面也很常見, 我們拖動一個層容器添加到根節點,修改其屬性.
子控件布局為線性縱向, 尺寸設定為200*200并勾選百分比. 名字修改為center.控件布局設定為縱橫布局都為居中.
然後我們給center添加三個子節點, 分别是圖檔center0.png, center1.png, center2.png. 并修改下其尺寸及名字屬性, 不再贅述.
我們為center0, center1, center2的橫向布局設定為居中. 這樣三個子節點就居中對齊了.
這時我們将center0向下移動一些(比如20個像素). 可以看到center1, center2也跟着向下移動了.
這裡我們就能看出線性布局的特點. 父控件設定為線性縱向, 那麼子節點會在縱向上依次排列, 并且下第二個子節點的縱向上偏移是依照第一個子節點來的.
好了大家接下來可以按照源代碼中的例子将右下的幾個小按鈕也添加進來.
如果有什麼問題, 大家可以到CocoaChina的CocoStudio的專區來交流.
八 導出資源
我們在編輯器裡面用快捷鍵Ctrl+E打開導出對話框, 選擇導出的路徑, 按預設配置導出. 我們稍後會用到這些檔案.
九 在cocos2d-x工程中添加導出後的資源
想必各位看官都已經熟練掌握了cocos2d-x工程的建立, 我這裡就不再啰嗦了.
建立完工程之後, 需要将我們上面用CocoStudio導出的幾個檔案拷貝到cocos2d-x工程的Resources檔案夾下.
需要指出的是, 2d-x 3.0RC0的win32工程簡單設定下才能支援CocoStudio, 可以參見這篇文章.
http://www.cocoachina.com/bbs/read.php?tid=194668
十 代碼實作
我們在預設的HelloWorld的稍作修改就能看到多分辨率的UI布局在遊戲中的效果.
打開HelloWorld.cpp添加頭檔案
#include "HelloWorldScene.h" #include "CocosGUI.h" #include "CocoStudio.h"
USING_NS_CC; using namespace ui; using namespace cocostudio;
我們修改下HelloWorld::init函數, 你可以清除下原有的無用的代碼, 并添加讀取導出的檔案.
Layout *layout = dynamic_cast<Layout *>(GUIReader ::getInstance()->widgetFromJsonFile("Sample.ExportJson")); addChild(layout);
我們需要讓遊戲運作在不同的分辨率大小下, 來看下我們的最終效果.
在iOS下, 可以用不同的模拟器來檢視效果, 比較友善. 我們來看下Win32平台下如何檢視效果.
我們打開main.cpp修改_tWinMain函數
auto director = Director ::getInstance(); auto glview = director->getOpenGLView(); if (!glview) { glview = GLView::create( "My Game");
glview->setFrameSize(480, 320); //glview->setFrameSize(960, 640);
director->setOpenGLView(glview); }
// create the application instance AppDelegate app; return Application::getInstance()->run();
我們通過修改FrameSize就能看到不同分辨率下的顯示效果.
我們再來貼一張960*640的效果.
原文連結：http://www.cocoachina.com/bbs/read.php?tid=195102