如何快速地製作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帶來的便捷.
二、子控制項布局
在cocostudio中有四種布局方式:
1. 絕對布局
絕對布局下, 子控制項的位置由其座標決定.優點在於布局靈活性大, 但對於移動開發來說, 通常要適應多種不同的解析度, 絕對布局在做全屏多解析度的情況下就不太適用。
2. 相對布局
相對布局, 子控制項的位置由其相對于父控制項的縱橫兩個方向的位置決定. 其中橫方向上分居左,居中, 居右三個位置, 縱方向上分為居上, 居中, 居下三個位置. 這樣也就是說子控制項的位置由其相對于父節點的9個位置(左上, 左中, 左下, 上中, 中心, 下中, 右上, 右中, 右下)決定. 相對布局還允許子控制項相對於以上9個位置做偏移。
由於相對布局的相對性, 所以對父節點的大小不敏感. 在多解析度的情況下, 優勢很大。
3. 線性橫向布局
線性布局, 可以用糖葫蘆做比喻, 子控制項在父控制項上依次排列. 分橫向和豎向兩種。
4. 線性橫向布局
同上, 不介紹了.
我們可以在cocostudio的ui編輯器中, 檢視乙個層容器並的屬性. 可以看到如下圖所示, 子控制項布局共有四個選項, 分別是絕對布局, 相對布局, 線性橫向, 線性縱向布局。
三、目標
我們今天要製作乙個遊戲的介面如上圖所示, 並且要自動適應多解析度的介面. 我們在其中用到了相對布局, 線性的橫向和縱向布局.
我們使用的cocos2d-x的版本是3.0rc0, cocostudio的版本是1.3.0.0. 不同的版本, 功能上會有差異, 大家學習時, 最好採用對應的版本.
cocostuido sample----samplelayout源**位址
目前臨時位址, 希望以後能合併進官方庫
四、建立專案並匯入資源
五、根節點屬性設定
因為我們資源是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, 可以參見這篇文章：
十、**實現
我們在預設的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(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);
我們通過修改framesize就能看到不同解析度下的顯示效果。
我們再來貼一張960*640的效果.
****：
Cocos Studio製作多解析度UI布局
如何快速地製作ui,是開發遊戲時不得不面臨的問題.cocos2d x 經歷了1.0時代的固定位置,2.0時代的相對位置,在3.0時代引入了全新的gui機制.新的gui機制,類似於android的gui系統,功能強大但如果手動編碼來實現就很繁瑣.cocostudio對cocos2d x的新的gui系統...
使用PHP製作多檔案上傳
將 files統一為二維索引 關聯陣列 return array function getfilesarray else if is array file name return arr 多檔案上傳 param string uploaddir 必選引數，上傳檔案存放的目錄 param int ma...
CSS製作多種鏈結樣式
多種鏈結樣式製作方法挺簡單的,看看下面這個多種鏈結樣式製作方法的例項,你就明白了如何用css製作多種鏈結樣式了 第一種樣式 預設的 個人日誌 第二種樣式 個人日誌 另外一種實現鏈結樣式的方法 個人日誌 div容器實現鏈結樣式的方法 個人日誌 當然,你完全可以將css 寫入乙個css檔案,這樣做的好處...