cocos2dx基礎篇(23)——進度條CCProgressTimer

【嘮叨】

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

    本節主要來講講進度條CCProgressTimer，相信大家也不會陌生的吧。如安裝軟件時顯示的進度、游戲中人物的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 改為強枚舉 ProgressTimer::Type::

//
			RADIAL     //扇形進度計時器
			BAR        //條形進度計時器
//

    （3）其他變化不大。

【CCProgressTimer】

1、進度動作CCProgressTo、CCProgressFromTo

    在講解進度條CCProgressTimer之前，先講講和進度條有半毛線關系的兩個動作類：

    （1）CCProgressTo        （2）CCProgressFromTo

    為什么在之前的基本動作CCAction那章不介紹，而放在這里進行介紹呢？這是因為，這兩個動作只是針對CCProgressTimer而言的，對其他的CCNode子類（如：CCSprite）沒啥用處。

    從這兩個動作的字面上，也可以看出他們的用處了吧？就是進度條的進度從 a% 變化到 b% 。

    使用方法如下：

//
	//幾秒內從0%變化到指定進度
	CCProgressTo::create('時間', '變化到百分之幾');

	//幾秒內從a%進度變化到b%進度
	CCProgressFromTo::create('時間', '從百分之幾', '變化到百分之幾');
//

2、CCProgressTimer

    CCProgressTimer就是拿一張CCSprite精靈圖片來作為進度條，然后根據一個百分比屬性，實現顯示/隱藏圖片的一部分區域，達到圖形化顯示進度的作用。

    進度條有兩種樣式：扇形進度條、條形進度條。默認錨點（0.5,0.5）。

    常用操作如下：

        （1）創建方法

        （2）設置精靈圖片、設置進度值、設置樣式

        （3）設置開始的中心位置，設置用于做進度條的比例（這兩個比較抽象，需要單獨講解）

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

//
class CCProgressTimer : public CCNodeRGBA
{
/**
 *		創建方法 create
 */

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


/**
 *		屬性設置
 *		setSprite , setPercentage , setType
 */

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


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


	//設置進度條樣式
	//		kCCProgressTimerTypeRadial	 扇形進度計時器
	//		kCCProgressTimerTypeBar		 條形進度計時器
	void setType(CCProgressTimerType type);
	CCProgressTimerType getType();


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


/**
 *		進度條設置
 *		setMidpoint , setBarChangeRate
 */

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


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


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

	//設置錨點
	void setAnchorPoint(CCPoint anchorPoint);

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

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

3、setMidpoint

    setMidpoint是用來設置進度條的起始中心位置的。

    （1）對于扇形進度條：相當于“圓心”，從0到100，慢慢展開扇形。

    （2）對于條形進度條：相當于從某點向兩邊擴散。

    還是看圖吧，語言表達有限：

3、setBarChangeRate

    setBarChangeRate是用于設置條形進度條所占的圖片比例，對于扇形是無效的。

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

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

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

    常用方式如下：

//
	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軸都已顯示一半）
//

    三組圖片對比圖：

4、常用的進度條方式

    由上面的講解可以得出，進度條的顯示方式主要受三個設置的影響：

    （1）setType         ：扇形、條形進度條。

    （2）setMidpoint     ：中心位置。

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

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

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

//
	//當條形進度條樣式為：setBarChangeRate( ccp(1,0) )
		ccp(1,0):        "從右到左顯示"
		ccp(0.5,0):      "從中間到兩邊顯示"
		ccp(0,0):        "從左到右顯示"
	//當條形進度條樣式為：setBarChangeRate( ccp(0,1) )
		ccp(0,1):        "從上到下顯示。"
		ccp(0,0.5):      "從中間到兩邊顯示。
		ccp(0,0):        "從下到上顯示。"
	//當條形進度條樣式為：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從上到下顯示"
//

【代碼實戰】

1、資源圖片

2、創建兩類進度條：條形、扇形

    并定義進度條顯示方式。

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

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


	//扇形進度條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); //逆時針
//

3、創建進度動作CCProgressTo、CCProgressFromTo

    并讓pro1、pro2分別執行兩個進度動作。

//
	//進度動作
	CCProgressTo* ac1 = CCProgressTo::create(2.0f, 100);
	CCProgressFromTo* ac2 = CCProgressFromTo::create(2.0f, 30, 100);

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

4、運行結果

    若添加反進度顯示setReverseProgress()

//
	pro1->setReverseProgress(true); //反進度顯示
	pro2->setReverseProgress(true); //逆時針
//

    結果如下：

5、分析與總結

    更多進度條的顯示方式，請自行參悟。