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.最后编译运行，效果图