cocos2dx 自學記錄（4）-- 寫一個自己的界面

1.像我這種初學者，都很難發現到底cocos2dx的代碼要寫去哪里，我也找了很久才發現是在你項目的Classes文件夾中。

我的： D:\cocos2d-x-2.2.3\projects\game1\Classes

2.里面有AppDelegate和HelloWorldScene

前者是整個游戲的入口，里面有3個函數，都有注釋說明的

applicationDidFinishLaunching() 加載完成后執行的

applicationDidEnterBackground() 程序被擱置時執行的，最小化之類的

applicationWillEnterForeground() 程序被恢復時執行的

后者是一個場景的實現，相當于地圖，

我們就是修改這個來寫自己的界面

3.在編寫代碼時候，多多查看API是必不可少的。

官網online的API文檔：http://www.cocos2d-x.org/reference/native-cpp/V2.2.3/index.html

4.打開HelloWorldScene.cpp來看看

原有一個label，一個中央圖片，一個退出按鈕

5.仿照原來的替換出自己的背景

我用的是這張，圖片的資源放在 D:\cocos2d-x-2.2.3\projects\game1\Resources

隨便改個名字，我的是 mainbg.png，記得權限

然后修改代碼

CCSprite* pSprite = CCSprite::create("mainbg.png");
CCSize bgsize = pSprite->getContentSize();
pSprite->setScale(visibleSize.height / bgsize.height);
pSprite->setPosition(ccp(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));

中間那句是我查出來的，可以得到精靈的大小（據說很多東西都要用到sprite精靈這東西）

原來我試了一張自己覺得比較大的圖片，發現好像cocos2dx會自己壓縮它，但大的它不會平鋪下來

所以我取了下它的大小和屏幕的大小，讓圖片拉伸一下（setScale），適應屏幕

然后ccp是什么呢，專業名詞叫 錨點 ，我也是查的，不過感覺就是它的中點，

而origin.x,origin.y目前也沒搞懂是什么，但涉及坐標的我都會把它加上。。這里就會把圖片居中，然后拉伸開來

另外，圖片的名字打錯會導致程序不能運行

6.有關坐標系，cocos2dx采用OpenGL，所以左下角是（0,0）

7.編寫 開始 - 退出 菜單

我把原來退出部分刪除了，然后加入了自己這部分

CCMenuItemFont::setFontSize(30);
CCMenuItemFont *start = CCMenuItemFont::create("Start",this,menu_selector(HelloWorld::menuCallBackStart));
start->setPosition(ccp(50,200));
CCMenuItemFont *exit = CCMenuItemFont::create("Exit",this,menu_selector(HelloWorld::menuCallBackClose));
exit->setPosition(ccp(50,100));
CCMenu *menu = CCMenu::create(start,exit,NULL);
menu->setPosition(CCPointZero);
this->addChild(menu,1);

具體API自己查看，大概就是先創建兩個菜單選項，然后每一個顯示的是什么（原來的是圖片），點擊后調用的是哪個函數；然后用一個菜單包含兩個選項，最后把菜單加入到layer里面。

ccp里面的坐標，是相對于其父節點的 錨點 的。

而看到addChild的第二個參數，查看API文檔發現時 zorder，zorder越大，它所在位置就越上面，也就是有覆蓋效果（我猜測），然后我一開始是寫 2 的，按下去之后沒有反應，改成 1 才行

8.添加對應的函數

void HelloWorld::menuCallBackStart(CCObject* pSender)
{
    //wait for next time
}
void HelloWorld::menuCallBackClose(CCObject* pSender)
{
    exit(0);
}

我之后還把中央的label改成了自己作者了，這個就不貼代碼了

9.最后編譯運行，效果圖