1. 在HelloWorld之前
因为我准备按照第一篇教程里教我的东西，一步步从简单到难写成多个Demo，于是我又不想新建那么多项目，所以，是的~我们需要一个菜单界面。
要创建很难，很多步，别激动，慢慢来，噗：
- 首先我们需要一个CCMenu对象，它是一个菜单对象，当然菜单是可以包含子菜单的。
- 然后我们需要子菜单，在cocos2d-x里子菜单就是CCMenuItem，但是Item的类别有很多，在这里，我选择文字标签Item：CCMenuItemLabel
- CCMenu需要一个CCMenuItemLabel，同样CCMenuItemLabel它只是一个Item，而它又要作为一个标签Item，所以它需要一个标签对象：CCLabelTTF
- 于是，整个步骤就是，一个CCLabelTTF对象添加到一个CCMenuItemLabel对象，然后CCMenuItemLabel对象再添加到CCMenu里。
好了，废话多了，看代码：
|
/* 创建一个Label对象 */ CCLabelTTF* helloWorldLab1 = CCLabelTTF::create("HelloWorld1", "Arial", 35); /* 创建一个CCMenuItemLabel对象，需要Label对象作为参数 */ CCMenuItemLabel* helloWorldItem1 = CCMenuItemLabel::create( helloWorldLab1, this, menu_selector(MenuScene::showHelloWorld1)); /* 创建一个CCMenu对象，需要Item对象作为参数 */ CCMenu* menu = CCMenu::create(helloWorldItem1, NULL); /* 最后将CCMenu菜单添加到场景中 */ this->addChild(menu); |
menu_selector，没有人想好奇一下这个是什么吗？虽然它的内在原理我现在还没懂，但是我知道它相当于一个回调功能。当菜单的Item对象被点击之后，会调用
showHelloWorld1函数。也就是说，我们可以在这里设置点击菜单项之后要做的事情。
2. 第一个HelloWorld
现在来一个最简单的吧：
|
CCSprite* backgroundSprite = CCSprite::create("HelloWorld.png"); this->addChild(backgroundSprite); |
友情提示：如果对C++语法也不熟悉的朋友（比如我，噗），最好自己一点点写，重新写一个场景类，包括它的头文件，cpp文件。
3. 第二个-使用TexturePacker打包后的图片创建精灵
关于TexturePacker的使用我就不说了，大牛的教程里讲得很详细了。另外一提，TexturePacker并不是万能的，千万不要过度依赖，本人亲测，如果用TexturePacker打包的图片有过多空白冗余的地方，将会适得其反地使得图片更加占用内存（和打包之前相比）。所以，打包的时候一定要用心，尽量减少空白的地方。
嗯，然后，为了添加第二个Demo，我需要在菜单里加入第二个Item对象，于是，看看：
|
/* 获取屏幕大小*/ CCSize size = CCDirector::sharedDirector()->getWinSize(); CCLabelTTF* itemLab = NULL; /* Demo1-最简单的方式创建一个精灵*/ itemLab = CCLabelTTF::create("HelloWorld1", “Arial”, 30); CCMenuItemLabel* helloWorldItem1 = CCMenuItemLabel::create( itemLab, this, menu_selector(MenuScene::showHelloWorld1)); /* Demo2-使用TexturePacker打包后的图片创建一个精灵*/ itemLab = CCLabelTTF::create("HelloWorld2", “Arial”, 30); CCMenuItemLabel * helloWorldItem2 = CCMenuItemLabel::create( itemLab, this, menu_selector(MenuScene::showHelloWorld2)); /* 创建菜单*/ CCMenu* menu = CCMenu::create(); menu->setPosition(ccp(size.width / 2, size.height / 2)); /* 添加所有Item到菜单中*/ menu->addChild(helloWorldItem1); menu->addChild(helloWorldItem2); /* 自动按垂直方向排列子Item */ menu->alignItemsVertically(); this->addChild(menu); |
然后，刚开始我发现直接这样add进入的Item全都挤在一起了，于是我首先想到用setPosition
，当然，结果是成功的。可是，后来我想，cocos2d-x这么强大，应该有自动排列才对的，于是我找了一下CCMenu的函数，发现了这个alignItemsVertically()，让子Item按垂直方向自动排队~很好用，噗。
然后进入正题，先打包好图片，得到两个文件：images.plist、images.png。我比较懒，直接从大牛的教程里下载的…然后看代码：
|
/* 将图片加载到缓存池中*/ CCSpriteFrameCache* cache = CCSpriteFrameCache::sharedSpriteFrameCache(); cache->addSpriteFramesWithFile("images.plist", "images.png"); CCSize size = CCDirector::sharedDirector()->getWinSize(); /* 使用TexturePacker打包图片后创建精灵的方式*/ CCSprite* people = CCSprite::spriteWithSpriteFrameName("p6.png"); people->setPosition(ccp(size.width / 2, size.height / 2)); this->addChild(people); |
噗，开玩笑的。CCSpriteFrameCache是缓存池，存放所有CCSpriteFrame对象的地方，用addSpriteFramesWithFile方法把打包好的图片解析成CCSpriteFrame对象，然后放到缓存池里。
于是，创建精灵的时候就直接用图片打包前各自的名字就可以了，比如下图中的箭头所指的那个图片（由于怕你们看不到它，所以我稍微多用了2个箭头，是2个么？应该是的= =）：
它在打包前有自己的文件名的，叫做”p6.png”，于是，我想用这个小人图片创建一个精灵，就这样：
CCSprite* people = CCSprite::spriteWithSpriteFrameName("p6.png");
好了，这就是第二个HelloWorld了。
待续…