Cocos Studio製作多分辨率UI佈局
如何快速地製作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