cocos2d-x遊戲開發(一)開始菜單

歡迎轉載：http://blog.csdn.net/fylz1125/article/details/8489333

開啟html5的工程，我用的是WebStorm。然後看到MoonWarriors的源碼，如下：

源碼都在src目錄下，config目錄下是一下配置資訊，比如遊戲狀態，分數，命條數等。接下來就是遊戲js代碼了。看名字就大致知道是幹什麼的了。

我從開始菜單開始。

html5版的開始菜單代碼是SysMenu.js。我按照它的邏輯用cocos2d-x重寫了一下。看下效果

這個開始菜單有幾個元素：功能表項目，logo，飛機，背景圖，fps就不說了。

這個類繼承CCLayer。跟HelloWorld裡面的結構差不多。可以看到沒有建構函式。咦，為什麼沒有建構函式？簡單解釋一下。引擎引入引用計數來管理記憶體，然後為了方便開發人員，把C++的東西封裝了一下，搞的有點類似O-c了。很多地方都能看到這樣的結構，又叫“二階段構造”。如下流程：

     最下面有一個宏定義的函數CREATE_FUNC(StartMenu),看代碼知道他就是一個create()函數。

首先new一個對象，然後看其init()函數的傳回值，init成功則將對象添加到自動釋放池，否則返回null。

所以如果用這個結構來定義類，就需要實現init()函數。

我所有的介面元素都在init()函數做完了，然後下面都是一些回呼函數，update()用來完成飛機的隨機飛行。

1.背景

    CCSprite* sl = CCSprite::create(s_loading);    sl->setAnchorPoint(ccp(0, 0));    this->addChild(sl,0,1);

是一個CCSprite，設定其錨點，然後添加。錨點設定為(0, 0)表示以其左下角為基準點。addChild函數有3個參數，第一個是要add的child，第二個是z座標，決定層次關係，有螢幕指向螢幕外，越大表示越在上層，第3個參數是一個tag標記，需要用的時候可以get到。

2.logo

    CCSprite* logo = CCSprite::create(s_logo);    logo->setAnchorPoint(ccp(0, 0));    logo->setPosition(ccp(0, 250));    this->addChild(logo, 10, 1);

這個也是一個CCSprite，設定錨點，設定位置，添加。設定錨點為（0，0）即以其左下角為基準點，然後設定位置（0，250），這樣就是logo的左下角在（0，250）處，而其餘部分則按照opengl的座標系確定。

3.菜單

這些菜單都是用圖片做的，所以還是用CCSprite來實現

    CCSprite* newGameNormal = CCSprite::create(s_menu, CCRectMake(0, 0, 126, 33));    CCSprite* newGameSelected = CCSprite::create(s_menu, CCRectMake(0, 33, 126, 33));    CCSprite* newGameDisabled = CCSprite::create(s_menu, CCRectMake(0, 33*2, 126, 33));

這是一個功能表項目的三種狀態，s_menu是menu圖片的索引，menu的圖片如下

可以看到這張圖片包含了所有的功能表項目，所以建立某個功能表項目的時候需要用座標來取。取這個圖片的時候座標系是螢幕座標系，就是原點在左上方，向右為x正軸，向下為y正軸。

然後建立一個MenuItem

CCMenuItemSprite* newGame = CCMenuItemSprite::create(newGameNormal, newGameSelected, newGameDisabled, this, menu_selector(StartMenu::flareEffec));

參數不說了，第四個是target，最後一個是一個回呼函數，就是點擊這個menu就執行回調。這裡這個回調做了一個特效，就是點擊newgame的時候有一個特效，後面再講。

這隻是其中一個item，還有兩個menu item，about和settings，跟newGame是一樣的，只是用的圖片不一樣，回調不一樣。

然後建立Menu：

CCMenu* menu = CCMenu::create(newGame, gameSetting, about, NULL);

注意，2.1.0版本的最後一個參數貌似必須是NULL，應該是一個結束標誌。

然後,

    menu->alignItemsVerticallyWithPadding(10);    this->addChild(menu, 1, 2);    menu->setPosition(ccp(winSize.width / 2, winSize.height / 2 - 80));

設定item的布局，垂直間隔10。add函數的zOrder設為1，說明在背景的上層。然後設定位置。說明一下，如果不設定錨點，那麼預設是（0.5，0.5）就是在中心點。

到這裡就差不多了，就差後面亂跑的飛機了。