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 object
	CCScene *scene = CCScene::create();

	// 'layer' is an autorelease object
	HelloWorld *layer = HelloWorld::create();

	// add layer as a child to scene
	scene->addChild(layer);

	// return the scene
	return scene;
}

// on "init" you need to initialize your instance
bool 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宏的再次介绍

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

附源码