【麦可网】Cocos2d-X跨平台游戏开发---学习笔记
第十四课：Cocos2D-X UI系统1-4
=======================================================================================================================================================================
课程目标：
-Cocos2D-XUI系统
课程重点：
-Cocos2D-X常用UI控件
考核目标：
-熟练运用Cocos2D-XUI控件
-掌握Cocos2D-X中字体的使用
=======================================================================================================================================================================
一、字体
CCLabelTTF（.ttf） 参考代码：tests->FontTest CCLabelBMFont(.fnt+.png图片) <span style="white-space:pre"> </span>参考代码：tests->LabelTest CCLabelAtlas（.png图片） CCLabelTTF 例子： CCSize s = CCDirector::sharedDirector()->getWinSize(); CCLabelTTF *ttffont = CCLabelTTF::laelWithString(“HelloWorld”,”Marker Felt”,20); addChild(ttffont); ttffont->setPosition(ccp(s.width/2,s.height)/2); ttffont->setString(“Hello Cocos2D”); <span style="white-space:pre"> </span>//更改显示内容 ttffont->setColor(ccc3(255,0)); <span style="white-space:pre"> </span>//设置颜色 ttffont->setScale(3.0f); //放大3倍 ttffont->setRotation(45.0f); <span style="white-space:pre"> </span>//旋转45度 ttffont->setOpacity(200) //透明度设置 （0-全透明，255-不透明） CCLabelBMFont例子： CCLabelBMFont *label = CCLabelBMFont::labelWithString(“Test”,”fonts/bitmapFontTest2.fnt”); CCLabelAtlas例子： CCLabelAtlas* label1 = CCLabelAtlas::labelWithString("123 Test","fonts/tuffy_bold_italic-charmap.png",48,64,' '); 使用该字体的三个条件： 1.每个字体的宽度和高度相等 2.指定图片上的第一个字是什么 3.图片上的字是按照acsii码排序的 参考代码：tests->FontTest ----------------标签枚举---------------- enum { kTagLabel1,kTagLabel2,kTagLabel3,kTagLabel4,}; ----------------字体数组---------------- static std::string fontList[] = { #if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS) "American Typewriter","Marker Felt",#endif "fonts/A Damn Mess.ttf","fonts/Abberancy.ttf","fonts/Abduction.ttf","fonts/Paint Boy.ttf","fonts/Schwarzwald Regular.ttf","fonts/Scissor Cuts.ttf",}; ----------------字体选择---------------- static const char* nextAction(void) { fontIdx++; fontIdx = fontIdx % (sizeof(fontList) / sizeof(fontList[0])); return fontList[fontIdx].c_str(); } static const char* backAction(void) { fontIdx--; if (fontIdx < 0) { fontIdx += (sizeof(fontList) / sizeof(fontList[0])); } return fontList[fontIdx].c_str(); } static const char* restartAction(void) { return fontList[fontIdx].c_str(); } ----------------字体构造函数---------------- FontTest::FontTest() { CCSize size = CCDirector::sharedDirector()->getWinSize(); CCMenuItemImage *item1 = CCMenuItemImage::itemFromNormalImage(s_pPathB1,s_pPathB2,this,menu_selector(FontTest::backCallback)); CCMenuItemImage *item2 = CCMenuItemImage::itemFromNormalImage(s_pPathR1,s_pPathR2,menu_selector(FontTest::restartCallback)); CCMenuItemImage *item3 = CCMenuItemImage::itemFromNormalImage(s_pPathF1,s_pPathF2,menu_selector(FontTest::nextCallback)); CCMenu *menu = CCMenu::menuWithItems(item1,item2,item3,NULL); menu->setPosition(CCPointZero); item1->setPosition(ccp(size.width/2 - 100,30)); item2->setPosition(ccp(size.width/2,30)); item3->setPosition(ccp(size.width/2 + 100,30)); addChild(menu,1); showFont(restartAction()); } ----------------字体显示---------------- void FontTest::showFont(const char *pFont) { removeChildByTag(kTagLabel1,true); <span style="white-space:pre"> </span>//根据标签删除节点 removeChildByTag(kTagLabel2,true); removeChildByTag(kTagLabel3,true); removeChildByTag(kTagLabel4,true); CCSize s = CCDirector::sharedDirector()->getWinSize(); CCLabelTTF *top = CCLabelTTF::labelWithString(pFont,pFont,24); CCLabelTTF *left = CCLabelTTF::labelWithString("alignment left",CCSizeMake(s.width,50),CCTextAlignmentLeft,32); CCLabelTTF *center = CCLabelTTF::labelWithString("alignment center",CCTextAlignmentCenter,32); CCLabelTTF *right = CCLabelTTF::labelWithString("alignment right",CCTextAlignmentRight,32); top->setPosition(ccp(s.width/2,250)); left->setPosition(ccp(s.width/2,200)); center->setPosition(ccp(s.width/2,150)); right->setPosition(ccp(s.width/2,100)); addChild(left,kTagLabel1); //添加带标签的节点 addChild(right,kTagLabel2); addChild(center,kTagLabel3); addChild(top,kTagLabel4); } ----------------获取某一个字母---------------- CCLabelBMFont *label = CCLabelBMFont::labelWithString("Bitmap Font Atlas","fonts/bitmapFontTest.fnt"); addChild(label); CCSize s = CCDirector::sharedDirector()->getWinSize(); label->setPosition( ccp(s.width/2,s.height/2) ); label->setAnchorPoint( ccp(0.5f,0.5f) ); CCSprite* BChar = (CCSprite*) label->getChildByTag(0); CCSprite* FChar = (CCSprite*) label->getChildByTag(7); CCSprite* AChar = (CCSprite*) label->getChildByTag(12);
二、菜单
参考代码：Tests->Menu Tests MenuLayer1::MenuLayer1() { CCMenuItemFont::setFontSize( 30 ); CCMenuItemFont::setFontName("Courier New"); <span style="white-space:pre"> </span>setIsTouchEnabled(true); // 精灵创建MenuItem CCSprite* spriteNormal = CCSprite::spriteWithFile(s_MenuItem,CCRectMake(0,23*2,115,23)); CCSprite* spriteSelected = CCSprite::spriteWithFile(s_MenuItem,23*1,23)); CCSprite* spriteDisabled = CCSprite::spriteWithFile(s_MenuItem,23*0,23)); //dynamic_cast<CCNode*>(mgr)->addChild(spriteNormal); //dynamic_cast<CCNode*>(mgr)->addChild(spriteSelected); //dynamic_cast<CCNode*>(mgr)->addChild(spriteDisabled); CCMenuItemSprite* item1 = CCMenuItemSprite::itemFromNormalSprite(spriteNormal,spriteSelected,spriteDisabled,menu_selector(MenuLayer1::menuCallback) ); // 图片创建MenuItem CCMenuItem* item2 = CCMenuItemImage::itemFromNormalImage(s_Sendscore,s_PressSendscore,menu_selector(MenuLayer1::menuCallback2) ); // 标签创建MenuItem (字体：LabelAtlas) CCLabelAtlas* labelAtlas = CCLabelAtlas::labelWithString("0123456789","fonts/fps_images.png",16,24,'.'); CCMenuItemLabel* item3 = CCMenuItemLabel::itemWithLabel(labelAtlas,menu_selector(MenuLayer1::menuCallbackDisabled) ); item3->setDisabledColor( ccc3(32,32,64) ); item3->setColor( ccc3(200,200,255) ); // 文字创建MenuItem CCMenuItemFont *item4 = CCMenuItemFont::itemFromString("I toggle enable items",menu_selector(MenuLayer1::menuCallbackEnable) ); item4->setFontSizeObj(20); item4->setFontName("Marker Felt"); // 标签创建MenuItem (字体：CCLabelBMFont) CCLabelBMFont* label = CCLabelBMFont::labelWithString("configuration","fonts/bitmapFontTest3.fnt"); CCMenuItemLabel* item5 = CCMenuItemLabel::itemWithLabel(label,menu_selector(MenuLayer1::menuCallbackConfig)); // Testing issue #500 item5->setScale( 0.8f ); // 字体创建MenuItem CCMenuItemFont* item6 = CCMenuItemFont::itemFromString("Quit",menu_selector(MenuLayer1::onQuit)); CCActionInterval* color_action = CCTintBy::actionWithDuration(0.5f,-255,-255); CCActionInterval* color_back = color_action->reverse(); CCFiniteTimeAction* seq = CCSequence::actions(color_action,color_back,NULL); item6->runAction(CCRepeatForever::actionWithAction((CCActionInterval*)seq)); CCMenu* menu = CCMenu::menuWithItems( item1,item4,item5,item6,NULL); menu->alignItemsVertically(); //垂直摆放 // elastic effect CCSize s = CCDirector::sharedDirector()->getWinSize(); int i=0; CCNode* child; CCArray * pArray = menu->getChildren(); CCObject* pObject = NULL; CCARRAY_FOREACH(pArray,pObject) { if(pObject == NULL) break; child = (CCNode*)pObject; CCPoint dstPoint = child->getPosition(); int offset = (int) (s.width/2 + 50); if( i % 2 == 0) offset = -offset; child->setPosition( CCPointMake( dstPoint.x + offset,dstPoint.y) ); child->runAction( CCEaseElasticOut::actionWithAction( CCMoveBy::actionWithDuration(2,CCPointMake(dstPoint.x - offset,0)),0.35f ) ); i++; } m_disabledItem = item3; item3->retain(); m_disabledItem->setIsEnabled( false ); //设置item3不能被点击 addChild(menu); }
三、进度条
参考代码：tests->ProgressAction Test void SpriteProgressToRadial::onEnter() { SpriteDemo::onEnter(); CCSize s = CCDirector::sharedDirector()->getWinSize(); //2秒完成进度100 CCProgressTo *to1 = CCProgressTo::actionWithDuration(2,100); CCProgressTo *to2 = CCProgressTo::actionWithDuration(2,100); CCProgressTimer *left = CCProgressTimer::progressWithFile(s_pPathSister1); left->setType( kCCProgressTimerTypeRadialCW ); //顺时针旋转 addChild(left); left->setPosition(CCPointMake(100,s.height/2)); left->runAction( CCRepeatForever::actionWithAction(to1));//持续动作to1 CCProgressTimer *right = CCProgressTimer::progressWithFile(s_pPathBlock); right->setType( kCCProgressTimerTypeRadialCCW ); //逆时针旋转 addChild(right); right->setPosition(CCPointMake(s.width-100,s.height/2)); right->runAction(CCRepeatForever::actionWithAction(to2));//持续动作to2 } 六种进度条： typedef enum { /// 逆时针旋转 kCCProgressTimerTypeRadialCCW,/// 顺时针旋转 kCCProgressTimerTypeRadialCW,/// 从左到右显示 kCCProgressTimerTypeHorizontalBarLR,/// 从右到左显示 kCCProgressTimerTypeHorizontalBarRL,/// 从下到上显示 kCCProgressTimerTypeVerticalBarBT,/// 从上到下显示 kCCProgressTimerTypeVerticalBarTB,} CCProgressTimerType;
四、计时器
----------------方式一----------------
schedule( schedule_selector(Atlas3::step) );
void CCNode::schedule(SEL_SCHEDULE selector)
{
this->schedule(selector,1); //一秒执行一次
}
----------------方式二----------------
schedule(schedule_selector(LabelsEmpty::updateStrings),1.0f);//一秒一次
===================================================================
总结：
只有熟练的掌握字体、菜单、计时器等才能做出好看的UI。
开心一刻：
小明告诉妈妈，今天客人来家里玩的时候，哥哥放了一颗图钉在客人的椅子上，被我看到了。妈妈说：“那你是怎幺做的呢？”小明说：“我在一旁站着，等客人刚要坐下来的时候，我将椅子从他后面拿走了。”
【麦可网】Cocos2d-X跨平台游戏开发---教程下载:http://pan.baidu.com/s/1kTio1Av
【麦可网】Cocos2d-X跨平台游戏开发---笔记系列:http://blog.csdn.net/qiulanzhu
