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

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

其中我們會學(xué)到：

1.texturepacker 軟件的基本使用

2.cocosbuilder 的基本使用

3.代碼的簡單編寫

第一步：提取圖片

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

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

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

第二步：cocosbulider

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

選擇文件的類型，我選的是ccnode，當(dāng)我選擇CClayer的時候，動畫不會循環(huán)播放，不知道為什么。

之后我們拖動左邊窗口的圖片，調(diào)整一下

之后關(guān)閉通過右邊的屬性窗口調(diào)整各個圖片的位置。也可以通過幾個快捷鍵調(diào)整。

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

“旋轉(zhuǎn)”是以錨點的位置來旋轉(zhuǎn)的，還有很多都是跟“錨點”有關(guān)。

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

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

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

第三步：xcode 中編寫代碼

將builder生成的幾個文件拷貝進(jìn)xcode中

之后別忘了在xcode中添加進(jìn)去。

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

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

當(dāng)然了你也可以放在一個函數(shù)中

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