【嘮叨】
哎,周圍的同學都在搞cocos2dx 3.X了,而我還在用2.2.3。沒辦法,網上3.X的教程畢竟很少,還是等我的同學學得差不多了,我再換成3.X跟着同學搞,哪裏不會問哪裏。
本節主要來講講進度條CCProgressTimer,相信大家也不會陌生的吧。如安裝軟件時顯示的進度、遊戲中人物的HP、MP顯示的百分比橫條。
【致謝】
http://gl.paea.cn/contents/2260d48c5e2bc83d.html
【Demo下載】
【3.x】
(1)去掉 “CC”
(2)CCProgressTimerType 改爲強枚舉 ProgressTimer::Type::
1
2
3
4
|
// RADIAL //扇形進度計時器 BAR //條形進度計時器 // |
(3)其他變化不大。
【CCProgressTimer】
1、進度動作CCProgressTo、CCProgressFromTo
在講解進度條CCProgressTimer之前,先講講和進度條有半毛線關係的兩個動作類:
(1)CCProgressTo (2)CCProgressFromTo
爲什麼在之前的基本動作CCAction那章不介紹,而放在這裏進行介紹呢?這是因爲,這兩個動作只是針對CCProgressTimer而言的,對其他的CCNode子類(如:CCSprite)沒啥用處。
從這兩個動作的字面上,也可以看出他們的用處了吧?就是進度條的進度從 a% 變化到 b% 。
使用方法如下:
1
2
3
4
5
6
7
|
// //幾秒內從0%變化到指定進度 CCProgressTo::create( '時間' , '變化到百分之幾' ); //幾秒內從a%進度變化到b%進度 CCProgressFromTo::create( '時間' , '從百分之幾' , '變化到百分之幾' ); // |
2、CCProgressTimer
CCProgressTimer就是拿一張CCSprite精靈圖片來作爲進度條,然後根據一個百分比屬性,實現顯示/隱藏圖片的一部分區域,達到圖形化顯示進度的作用。
進度條有兩種樣式:扇形進度條、條形進度條。默認錨點(0.5,0.5)。
常用操作如下:
(1)創建方法
(2)設置精靈圖片、設置進度值、設置樣式
(3)設置開始的中心位置,設置用於做進度條的比例(這兩個比較抽象,需要單獨講解)
其中,有兩個函數比較抽象:setMidpoint、setBarChangeRate。由於語言組織能力太弱,所以後面我會用圖片來說明一下。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
// 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)用作顯示進度條的那一部分,已經顯示的百分率,而不是整張圖片的百分率。
常用方式如下:
1
2
3
4
5
6
|
// 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)配合使用方式如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
// //當條形進度條樣式爲: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、創建兩類進度條:條形、扇形
並定義進度條顯示方式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
// //條形進度條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分別執行兩個進度動作。
1
2
3
4
5
6
7
8
|
// //進度動作 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()
1
2
3
4
|
// pro1->setReverseProgress( true ); //反進度顯示 pro2->setReverseProgress( true ); //逆時針 // |
結果如下:
5、分析與總結
更多進度條的顯示方式,請自行參悟。