Cocos2D-X2.2.3学习笔记6(UI系统)

上一节我们介绍了其中两种字体和计时器的使用，以及字体的一些常用方法，比如获取指定下标的单个字体(getChildByTag),改变字体内容(setString)

接下来我们介绍最后一种字体，以及进度条的简单使用

bool HelloWorld::init(){if ( !CCLayer::init() ){return false;}CCSize visibleSize= CCDirector::sharedDirector()->getVisibleSize();CCLabelAtlas* atlas= CCLabelAtlas::create("HelloWorld","fonts/tuffy_bold_italic-charmap.png",64,48,32);atlas->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));this->addChild(atlas);return true;}

运行结果

为嘛这样呢？

我们来说一下这五个参数

第一个为要显示的字符串

第二个为图片的名称

第三个每个字符的宽度

第四个为每个字符的高度

第五个为这张图片中第一个字符的编码

 之所以我不知道第一个字符的编码是什么，随便填了个32(32对应哪个字母我也不知道，呵呵)，所以会出现如下情况

当然 create还有一个重载方法，只有两个参数，第一个还是需要显示的字符串，第二个为plis文件，但是你用记事本打开该文件.

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"><plist version="1.0"><dict><key>version</key><integer>1</integer><key>textureFilename</key><string>tuffy_bold_italic-charmap.png</string><key>itemHeight</key><integer>64</integer><key>itemWidth</key><integer>48</integer><key>firstChar</key><integer>32</integer></dict></plist>

它维护的其实还是一样的东西。

这里我们不深究，总之我还是喜欢BMFont一点

接下来我们来看看进度条

bool HelloWorld::init(){if ( !CCLayer::init() ){return false;}//创建一个精灵显示，这将作为进度条的底层CCSprite*  progressbgSprite=CCSprite::create("time_slot-hd.png");progressbgSprite->setPosition(ccp(240,160));this->addChild(progressbgSprite);//创建一个进度条CCProgressTimer* progress1=CCProgressTimer::create(CCSprite::create("time_bars-hd.png"));//设置进度条的类型为条形progress1->setType(kCCProgressTimerTypeBar);progress1->setMidpoint(ccp(0,1));    progress1->setBarChangeRate(ccp(1, 0));//设置进度条当前的值progress1->setPercentage(0); progress1->setPosition(ccp(240,160));this->addChild(progress1);//创建一个进度条动画progress1->runAction(CCRepeatForever::create(CCProgressTo::create(2,100)));return true;}

这段代码很简单，

第一步创建一个精灵作为进度条的底层，

第二步，创建一个进度条，类为CCProgressTimer

三，设置进度条的类型setType,F12跟进去参数是CCProgressTimerType类型的，在继续F12，意思很明显。他是个枚举，其中有两个类型，条形和扇形

typedef enum {    /// Radial Counter-Clockwise    kCCProgressTimerTypeRadial,    /// Bar    kCCProgressTimerTypeBar,} CCProgressTimerType;

这里我们先设置为Bar，条形

四，设置Midpoint,这里我们看源码

/**     *    Midpoint is used to modify the progress start position.     *    If you're using radials type then the midpoint changes the center point     *    If you're using bar type the the midpoint changes the bar growth     *        it expands from the center but clamps to the sprites edge so:     *        you want a left to right then set the midpoint all the way to ccp(0,y)     *        you want a right to left then set the midpoint all the way to ccp(1,y)     *        you want a bottom to top then set the midpoint all the way to ccp(x,0)     *        you want a top to bottom then set the midpoint all the way to ccp(x,1)     */    CC_PROPERTY(CCPoint, m_tMidpoint, Midpoint);

还记得我们讲解内存管理的时候用到的一些常用的宏吧？？它会自动给出GET/SET方法

这里也是一样，我现在也不知道SetMidpoint是干什么用的，现在我们来翻译一下它的注释

1.Midpoint 是用来修改进度条的开始位置

2.如果你使用的类型是扇形，那么它将变为中心点

3.如果是条形，它将改变条形的成长

4.它扩展了中心点和精灵的边缘

5.如果从左到右，设置为ccp(0,y)

6.如果从右到左，设置为ccp(1,y)

7.如果从下到上，设置为ccp(x,0)

8.如果从上到下，设置为ccp(x,1)

英文不太好，翻译出来能理解个大概意思就可以了，这里我们设置为CCP(0，1).从左到右  OK

五，我们设置了setBarChangeRate

这里我也不知道是什么东西，看源码

 /**     *    This allows the bar type to move the component at a specific rate     *    Set the component to 0 to make sure it stays at 100%.     *    For example you want a left to right bar but not have the height stay 100%     *    Set the rate to be ccp(0,1); and set the midpoint to = ccp(0,.5f);     */    CC_SYNTHESIZE(CCPoint, m_tBarChangeRate, BarChangeRate);

翻译

这里真心不会翻译

但是根据我多次测试，总结出来，

第一个参数控制横向，第二个参数控制竖向，你可以把这句代码删除，运行，默认是从左上角到右下角延生，

但是我只想长度延生，OK   ccp(1,0)

高度延生 ccp(0,1)

一起延生 ccp(1,1)

都不延生 ccp(0,0)

自己多试试就明白了，这里还可以设置0.5f   

六，设置进度条的当前值

设置位置，

添加到节点

创建一个持续执行的动画 CCRepeatForever

创建进度条动画CCProgeressTo    2秒将进度执行到100

明白了之后我们在修改修改我们的代码

#ifndef __HELLOWORLD_SCENE_H__#define __HELLOWORLD_SCENE_H__#include "cocos2d.h"#include "SimpleAudioEngine.h"using namespace CocosDenshion;typedef enum{eprogressbgSprite=1,eprogress1=2,ettf=3};class HelloWorld : public cocos2d::CCLayer{public:    virtual bool init();  virtual void update(float delta);    static cocos2d::CCScene* scene();    CREATE_FUNC(HelloWorld);};#endif // __HELLOWORLD_SCENE_H__

#include "HelloWorldScene.h"USING_NS_CC;CCScene* HelloWorld::scene(){// 'scene' is an autorelease objectCCScene *scene = CCScene::create();// 'layer' is an autorelease objectHelloWorld *layer = HelloWorld::create();// add layer as a child to scenescene->addChild(layer);// return the scenereturn scene;}// on "init" you need to initialize your instancebool HelloWorld::init(){if ( !CCLayer::init() ){return false;}//创建一个精灵显示，这将作为进度条的底层CCSprite*  progressbgSprite=CCSprite::create("time_slot-hd.png");progressbgSprite->setPosition(ccp(240,160));this->addChild(progressbgSprite,1,eprogressbgSprite);//创建一个进度条CCProgressTimer* progress1=CCProgressTimer::create(CCSprite::create("time_bars-hd.png"));//设置进度条的类型为条形progress1->setType(kCCProgressTimerTypeBar);progress1->setMidpoint(ccp(0,1));    progress1->setBarChangeRate(ccp(1, 0));//设置进度条当前的值progress1->setPercentage(0); progress1->setPosition(ccp(240,160));this->addChild(progress1,1,eprogress1);//创建一个字体,显示到进度条中间CCLabelTTF *ttf=CCLabelTTF::create("0","fonts/arial.ttf",12);ttf->setPosition(ccp(240,160));this->addChild(ttf,1,ettf);//添加计时器this->scheduleUpdate();//创建一个进度条动画//progress1->runAction(CCRepeatForever::create(CCProgressTo::create(2,100)));return true;}void HelloWorld::update(float delta){//获得进度条和字体标签 CCProgressTimer* progress1=(CCProgressTimer*)this->getChildByTag(eprogress1); CCLabelTTF* ttf=(CCLabelTTF*)this->getChildByTag(ettf); //获得当前进度 float cu= progress1->getPercentage(); cu+=0.1f; progress1->setPercentage(cu); //改变字体 CCString *custr= CCString::createWithFormat("%2.0f%%",cu); ttf->setString(custr->getCString());}

运行

这里和上一个实例比较起来无非就是加了一个进度值

我们看看代码，

我们把运行进度条动画的代码注释了，

创建了一个字体加入到了进度条的中心位置

然后添加了一个计时器

这个计时器和我们上一节讲的不一样了，对吧。。多了个update，没错，这是继承CCNode类下面的

我们看运行窗口做下角，是不是有个60？？这个计时器就是一秒钟执行60次，应该是这个意思吧？？我也不确定。这里换成我们上一节介绍的计时器也可以

这个计时器调用的是update函数，从CCNode继承下来的，

我们看看函数的实现

通过getChildByTag获得一些我们需要的精灵

getPercentage获得当前进度值

setPercentage设置进度值

CCString这个类是Cocos2d-x里面的字符串类，这两句代码简单的使用了这个类

理解了吧？？

我们接下来在来看看扇形进度条

//背景精灵CCSprite *sprite= CCSprite::create("Icon.png");sprite->setOpacity(80);sprite->setPosition(ccp(240,10));sprite->setAnchorPoint(ccp(0.5,0));this->addChild(sprite,1);//进度条CCProgressTimer* spriteProgress=CCProgressTimer::create(CCSprite::create("Icon.png"));//设置透明度spriteProgress->setPosition(ccp(240,10));spriteProgress->setAnchorPoint(ccp(0.5,0));spriteProgress->setType(kCCProgressTimerTypeRadial);spriteProgress->setPercentage(0);this->addChild(spriteProgress,1);//执行动画spriteProgress->runAction(CCRepeatForever::create(CCProgressTo::create(5,100)));

运行

有点象技能冷却完成的效果哈

今天就到这来。还有菜单，下一篇介绍，UI系统就算完成了，

记得多看源码，能学到很多知识的

总结一下：

进度条的创建，和几个重要的方法

midpoint，barchangeRate，settype，percentage

的理解

scheduleUpdate

再次重点使用了getChildByTag

分析源码get、set宏的再次介绍

最后一个实例，用到锚点和设置透明度

附源码