【麦可网】Cocos2d-X跨平台游戏开发---学习笔记
第十四课：Cocos2D-X UI系统1-4
=======================================================================================================================================================================
课程目标：
-Cocos2D-XUI系统
课程重点：
-Cocos2D-X常用UI控件
考核目标：
-熟练运用Cocos2D-XUI控件
-掌握Cocos2D-X中字体的使用
=======================================================================================================================================================================
一、字体cclabelTTF（.ttf） 参考代码：tests->FontTestcclabelBMFont(.fnt+.png图片) <span > </span>参考代码：tests->LabelTestcclabelAtlas（.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 > </span>//更改显示内容ttfFont->setcolor(ccc3(255,0)); <span > </span>//设置颜色ttfFont->setScale(3.0f); //放大3倍ttfFont->setRotation(45.0f); <span > </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 > </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 TestsMenulayer1::Menulayer1(){ CcmenuItemFont::setFontSize( 30 ); CcmenuItemFont::setFontname("CourIEr New");<span > </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 TestvoID 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
总结以上是内存溢出为你收集整理的【麦可网】Cocos2d-X跨平台游戏开发学习笔记---第十四课：Cocos2D-X UI系统1-4全部内容，希望文章能够帮你解决【麦可网】Cocos2d-X跨平台游戏开发学习笔记---第十四课：Cocos2D-X UI系统1-4所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）