cocos2d-x 一個簡單的游戲界面

大家好今天請跟我一起做一個游戲的開始畫面,就像保衛大蘿卜一樣的.

其中我們會學到：

1.texturepacker 軟件的基本使用

2.cocosbuilder 的基本使用

3.代碼的簡單編寫

第一步：提取圖片

我們先提取一下所用的圖片，當然我們要從《保衛蘿卜》這個游戲中提取，下載《保羅》的android 版本之后解壓（直接解壓不了的改文件后綴zip）用textpacker打開文件 assets - > Thems->scene->mainscene1-hd.pvr.ccz 將它保存成png圖片。如圖：

保存之后我們再用imac自帶的預覽功能打開剛剛保存的文件，用矩形選擇工具星花+c ，星花 + N （就是選擇矩形區域復制，之后從剪切板新建文件），摳出我們需要用的圖片并起好名字。

之后我們打開texturepacker ，將剛剛我們弄好的圖片托進右邊的sprites窗口，之后在左邊的Output窗口中修改Texture Format 為(.pvr.ccz)的那個選項，之后導出，填寫文件名 sence01 。

第二步：cocosbulider

打開cocosbuilder 新建一個工程，將沒用的資源文件都刪除掉，之后將我們texturepacker中生成的2個文件 “sence01.pvr.ccz”和“sence01.plist”拷貝到cocosbuilder工程中的資源文件夾“ccbResources”中,之后我們新建立一個層，New->New File

選擇文件的類型，我選的是ccnode，當我選擇CClayer的時候，動畫不會循環播放，不知道為什么。

之后我們拖動左邊窗口的圖片，調整一下

之后關閉通過右邊的屬性窗口調整各個圖片的位置。也可以通過幾個快捷鍵調整。

這要說說“錨點”和“旋轉”，“錨點”在視圖窗口中有一個小點表示，如圖：

“旋轉”是以錨點的位置來旋轉的，還有很多都是跟“錨點”有關。

好了，有了上面的幾個要點相信大家很快就能把這些圖片排列好了，下面咱就給圖片加點動畫。

還有比如上圖的一片葉子壓著另一片葉子只需要托動其中一個葉子改變一下排列順序就可以了。

這樣就可以點播放按鈕看看效果了，咱的葉子就抖動起來了。好了，下面就要在xcode中編寫代碼了。

第三步：xcode 中編寫代碼

將builder生成的幾個文件拷貝進xcode中

之后別忘了在xcode中添加進去。

添加代碼吧，很簡單只需要添加幾行代碼就可以了。（因為我們沒用button事件響應所以很簡單）

/* 創建一個自動釋放的 Node 加載庫 */
    CCNodeLoaderLibrary * ccNodeLoaderLibrary = CCNodeLoaderLibrary::newDefaultCCNodeLoaderLibrary();
                     
    /* 創建一個 CCBReader，并設置自動釋放 */
    cocos2d::extension::CCBReader * ccbReader = new cocos2d::extension::CCBReader(ccNodeLoaderLibrary);
    ccbReader->autorelease();
                     
    /*讀取一個ccbi的文件,生成一個CCNode實例*/
    CCNode *animationsTest = ccbReader->readNodeGraphFromFile(pCCBFileName, this);
    //放回一個CCnode，剩下就的是添加到場景了。
    return animationsTest;

當然了你也可以放在一個函數中

CCNode *  HelloWorld::openCBBI(const char * pCCBFileName, const char * pCCNodeName, CCNodeLoader * pCCNodeLoader)
{
    //創建一個自動釋放的CCNode加載庫
    CCNodeLoaderLibrary * ccNodeLoaderLibrary = CCNodeLoaderLibrary::newDefaultCCNodeLoaderLibrary();
    ccNodeLoaderLibrary->registerCCNodeLoader(pCCNodeName, pCCNodeLoader);
      
    //創建一個自動釋放的CCB讀取類（CCBReader）
    cocos2d::extension::CCBReader * ccbReader = new cocos2d::extension::CCBReader(ccNodeLoaderLibrary);
    ccbReader->autorelease();
      
    //讀取ccbi文件獲取根節點
    CCNode * node = ccbReader->readNodeGraphFromFile(pCCBFileName, this);
      
    return node;
}