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.最後編譯運行，效果圖