cocos2dx基礎(chǔ)篇(23)——進(jìn)度條CCProgressTimer

【嘮叨】

    哎，周圍的同學(xué)都在搞cocos2dx 3.X了，而我還在用2.2.3。沒辦法，網(wǎng)上3.X的教程畢竟很少，還是等我的同學(xué)學(xué)得差不多了，我再換成3.X跟著同學(xué)搞，哪里不會(huì)問哪里。

    本節(jié)主要來講講進(jìn)度條CCProgressTimer，相信大家也不會(huì)陌生的吧。如安裝軟件時(shí)顯示的進(jìn)度、游戲中人物的HP、MP顯示的百分比橫條。

【致謝】

    http://gl.paea.cn/contents/2260d48c5e2bc83d.html

【Demo下載】

    https://github.com/shahdza/Cocos_LearningTest/tree/master/demo_%E8%BF%9B%E5%BA%A6%E6%9D%A1CCProgressTimer 

【3.x】

    （1）去掉 “CC”

    （2）CCProgressTimerType 改為強(qiáng)枚舉 ProgressTimer::Type::

//
			RADIAL     //扇形進(jìn)度計(jì)時(shí)器
			BAR        //條形進(jìn)度計(jì)時(shí)器
//

    （3）其他變化不大。

【CCProgressTimer】

1、進(jìn)度動(dòng)作CCProgressTo、CCProgressFromTo

    在講解進(jìn)度條CCProgressTimer之前，先講講和進(jìn)度條有半毛線關(guān)系的兩個(gè)動(dòng)作類：

    （1）CCProgressTo        （2）CCProgressFromTo

    為什么在之前的基本動(dòng)作CCAction那章不介紹，而放在這里進(jìn)行介紹呢？這是因?yàn)椋@兩個(gè)動(dòng)作只是針對(duì)CCProgressTimer而言的，對(duì)其他的CCNode子類（如：CCSprite）沒啥用處。

    從這兩個(gè)動(dòng)作的字面上，也可以看出他們的用處了吧？就是進(jìn)度條的進(jìn)度從 a% 變化到 b% 。

    使用方法如下：

//
	//幾秒內(nèi)從0%變化到指定進(jìn)度
	CCProgressTo::create('時(shí)間', '變化到百分之幾');

	//幾秒內(nèi)從a%進(jìn)度變化到b%進(jìn)度
	CCProgressFromTo::create('時(shí)間', '從百分之幾', '變化到百分之幾');
//

2、CCProgressTimer

    CCProgressTimer就是拿一張CCSprite精靈圖片來作為進(jìn)度條，然后根據(jù)一個(gè)百分比屬性，實(shí)現(xiàn)顯示/隱藏圖片的一部分區(qū)域，達(dá)到圖形化顯示進(jìn)度的作用。

    進(jìn)度條有兩種樣式：扇形進(jìn)度條、條形進(jìn)度條。默認(rèn)錨點(diǎn)（0.5,0.5）。

    常用操作如下：

        （1）創(chuàng)建方法

        （2）設(shè)置精靈圖片、設(shè)置進(jìn)度值、設(shè)置樣式

        （3）設(shè)置開始的中心位置，設(shè)置用于做進(jìn)度條的比例（這兩個(gè)比較抽象，需要單獨(dú)講解）

    其中，有兩個(gè)函數(shù)比較抽象：setMidpoint、setBarChangeRate。由于語言組織能力太弱，所以后面我會(huì)用圖片來說明一下。

//
class CCProgressTimer : public CCNodeRGBA
{
/**
 *		創(chuàng)建方法 create
 */

	//精靈圖片作為進(jìn)度條
	CCProgressTimer::create(CCSprite* sp);


/**
 *		屬性設(shè)置
 *		setSprite , setPercentage , setType
 */

	//設(shè)置進(jìn)度條所使用的精靈圖片
	void setSprite(CCSprite *pSprite);
	CCSprite* getSprite();


	//設(shè)置進(jìn)度百分值[0,100]
	void setPercentage(float fPercentage);
	float getPercentage();


	//設(shè)置進(jìn)度條樣式
	//		kCCProgressTimerTypeRadial	 扇形進(jìn)度計(jì)時(shí)器
	//		kCCProgressTimerTypeBar		 條形進(jìn)度計(jì)時(shí)器
	void setType(CCProgressTimerType type);
	CCProgressTimerType getType();


	//反進(jìn)度顯示
	//條形：從100到0。
	//扇形：false順時(shí)針，true逆時(shí)針
	void setReverseProgress(bool reverse);


/**
 *		進(jìn)度條設(shè)置
 *		setMidpoint , setBarChangeRate
 */

	//設(shè)置進(jìn)度條起始的中心位置，范圍[0,1]（默認(rèn)圖片中點(diǎn)ccp(0.5,0.5)）
	void setMidpoint(CCPoint);
	CCPoint getMidpoint();


	//用于做進(jìn)度條所占的圖片比例
	void setBarChangeRate(CCPoint);
	CCPoint getBarChangeRate();


/**
 *		父類繼承
 *		setAnchorPoint , setColor , setOpacity
 */

	//設(shè)置錨點(diǎn)
	void setAnchorPoint(CCPoint anchorPoint);

	//設(shè)置顏色
	virtual void setColor(const ccColor3B& color);
	virtual const ccColor3B& getColor() const;

	//設(shè)置透明度
	virtual void setOpacity(GLubyte opacity);
	virtual GLubyte getOpacity() const;
};
//

3、setMidpoint

    setMidpoint是用來設(shè)置進(jìn)度條的起始中心位置的。

    （1）對(duì)于扇形進(jìn)度條：相當(dāng)于“圓心”，從0到100，慢慢展開扇形。

    （2）對(duì)于條形進(jìn)度條：相當(dāng)于從某點(diǎn)向兩邊擴(kuò)散。

    還是看圖吧，語言表達(dá)有限：

3、setBarChangeRate

    setBarChangeRate是用于設(shè)置條形進(jìn)度條所占的圖片比例，對(duì)于扇形是無效的。

    也就是說拿出圖片多少的比例作為進(jìn)度條。還是看圖吧，語言表達(dá)有限。

    下列三組圖解中，黃顏色區(qū)域表示一開始就已經(jīng)顯示的圖片區(qū)域。而ccp(x,y)：表示寬度還有 x 比例的圖片還未顯示，高度還有 y 比例的圖片還未顯示，用作顯示進(jìn)度條。

    有下圖可知，“進(jìn)度百分值”是相對(duì)剩余ccp(x,y)用作顯示進(jìn)度條的那一部分，已經(jīng)顯示的百分率，而不是整張圖片的百分率。

    常用方式如下：

//
	setBarChangeRate( ccp(1,0) )    :  //只有X軸變化。 （起始X軸不顯示）
	setBarChangeRate( ccp(0,1) )    :  //只有Y軸變化。 （起始Y軸不顯示）
	setBarChangeRate( ccp(1,1) )    :  //X，Y軸都變化。（起始X，y軸都不顯示）
	setBarChangeRate( ccp(0.5,0.5) ):  //X，Y軸都變化。（起始X，y軸都已顯示一半）
//

    三組圖片對(duì)比圖：

4、常用的進(jìn)度條方式

    由上面的講解可以得出，進(jìn)度條的顯示方式主要受三個(gè)設(shè)置的影響：

    （1）setType         ：扇形、條形進(jìn)度條。

    （2）setMidpoint     ：中心位置。

    （3）setBarChangeRate：用作條形進(jìn)度條顯示的圖片所占比例。

    其中（1）的設(shè)置決定了進(jìn)度條的類型。而（2）（3）的配合使用可以有多種不同的顯示方式。

    常用的（2）（3）配合使用方式如下：

//
	//當(dāng)條形進(jìn)度條樣式為：setBarChangeRate( ccp(1,0) )
		ccp(1,0):        "從右到左顯示"
		ccp(0.5,0):      "從中間到兩邊顯示"
		ccp(0,0):        "從左到右顯示"
	//當(dāng)條形進(jìn)度條樣式為：setBarChangeRate( ccp(0,1) )
		ccp(0,1):        "從上到下顯示。"
		ccp(0,0.5):      "從中間到兩邊顯示。
		ccp(0,0):        "從下到上顯示。"
	//當(dāng)條形進(jìn)度條樣式為：setBarChangeRate( ccp(1,1) )
		ccp(0,1):        "X從左到右顯示，    Y從上到下顯示"
		ccp(0,0.5):      "X從左到右顯示，    Y從中間到兩邊顯示"
		ccp(1,0):        "X從右到左顯示，    Y從下到上顯示"
		ccp(0.5,0):      "X從中間到兩邊顯示，Y從下到上顯示"
		ccp(0,0):        "X從左到右顯示，    Y從下到上顯示"
		ccp(0.5,0.5):    "X從中間到兩邊顯示，Y從中間到兩邊顯示"
		ccp(1,1):        "X從右到左顯示，    Y從上到下顯示"
//

【代碼實(shí)戰(zhàn)】

1、資源圖片

2、創(chuàng)建兩類進(jìn)度條：條形、扇形

    并定義進(jìn)度條顯示方式。

//
	//條形進(jìn)度條pro1
		CCSprite* bg1 = CCSprite::create("Icon.png");
		CCProgressTimer* pro1 = CCProgressTimer::create(bg1);
		pro1->setPosition( ccp(130, 100) );
		this->addChild(pro1);

		//條形，定義進(jìn)度條方式：從右到左顯示
		pro1->setType(kCCProgressTimerTypeBar);
		pro1->setBarChangeRate( ccp(1, 0) );
		pro1->setMidpoint( ccp(1, 0) );
		//pro1->setReverseProgress(true); //反進(jìn)度顯示


	//扇形進(jìn)度條pro2
		CCSprite* bg2 = CCSprite::create("Icon.png");
		CCProgressTimer* pro2 = CCProgressTimer::create(bg2);
		pro2->setPosition( ccp(350, 100) );
		this->addChild(pro2);

		//扇形，圓心ccp(0.3 , 0.7)
		pro2->setType(kCCProgressTimerTypeRadial);
		pro2->setMidpoint( ccp(0.3, 0.7) );
		//pro2->setReverseProgress(true); //逆時(shí)針
//

3、創(chuàng)建進(jìn)度動(dòng)作CCProgressTo、CCProgressFromTo

    并讓pro1、pro2分別執(zhí)行兩個(gè)進(jìn)度動(dòng)作。

//
	//進(jìn)度動(dòng)作
	CCProgressTo* ac1 = CCProgressTo::create(2.0f, 100);
	CCProgressFromTo* ac2 = CCProgressFromTo::create(2.0f, 30, 100);

	pro1->runAction( CCRepeatForever::create(ac1) ); //2秒內(nèi)，從0到100
	pro2->runAction( CCRepeatForever::create(ac2) ); //2秒內(nèi)，從30到100
//

4、運(yùn)行結(jié)果

    若添加反進(jìn)度顯示setReverseProgress()

//
	pro1->setReverseProgress(true); //反進(jìn)度顯示
	pro2->setReverseProgress(true); //逆時(shí)針
//

    結(jié)果如下：

5、分析與總結(jié)

    更多進(jìn)度條的顯示方式，請(qǐng)自行參悟。