[Cocos2d-x] loading加載動畫

相信大家在玩遊戲的過程中都會遇到一個loading的界面，loading界面的作用主要是為了加載遊戲中需要用到的資源。在比較大型的遊戲中，資源通常會占用很大的空間，如果不做一個預加載，在切換界面的過程中很容易造成卡屏的現象。

下面先給出運作效果。

今天要講解的内容便是加載界面中的進度條控件的使用方法，在這裡我們隻學習控件的使用，不講解加載過程的邏輯處理。

所謂的進度條，其實不過是兩張紋理的組合，其中一個紋理全部顯示出來，而另一個紋理會随着加載的過程有一定的變化，我們可以為它設定一個動作，也可以直接設定它顯示的百分比，首先我們來看一下兩張圖檔 ：

這就是未加載時和加載完成後的進度條顯示，加載完成後，第二個紋理完全遮住了第一個紋理，但事實上他們是兩個紋理。

先給出實作代碼。

1. .h檔案中聲明全局變量。

1

2

3

<code>CCSprite * loadBkSpr;</code>

<code>CCProgressTimer * loadBar;</code><code>//進度條</code>

<code>CCSprite *loadSprite;    </code><code>//加載奔跑蘿莉</code>

2. .cpp檔案中實作loading效果。

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

<code>bool GameMain::init()</code>

<code>{</code>

<code>    </code><code>if</code><code>( !CCLayer::init() ) {</code>

<code>        </code> 

<code>        </code><code>return</code><code>false</code><code>;</code>

<code>    </code><code>}</code>

<code>    </code> 

<code>    </code><code>CCSize size = CCDirector::sharedDirector()-&gt;getWinSize();</code>

<code>    </code><code>//傳回</code>

<code>    </code><code>CCMenuItemImage *back = CCMenuItemImage::create(</code><code>"backA.png"</code><code>,</code><code>"backB.png"</code><code>,</code><code>this</code><code>,menu_selector(GameMain::menuBackCallback));</code>

<code>    </code><code>if</code><code>(size.height &gt; 500)</code>

<code>    </code><code>{</code>

<code>        </code><code>back-&gt;setScale(2.0f);</code>

<code>    </code><code>back-&gt;setPosition(ccp(size.width - 60,size.height - 60));</code>

<code>    </code><code>back-&gt;setEnabled(</code><code>false</code><code>);</code>

<code>    </code><code>CCMenu* mainmenu = CCMenu::create(back,NULL);</code>

<code>    </code><code>mainmenu-&gt;setPosition(ccp(0,0));</code>

<code>    </code><code>this</code><code>-&gt;addChild(mainmenu,3,4);</code>

<code>    </code><code>//加載效果  1.進度條   2.奔跑小人</code>

<code>    </code><code>//1.進度條</code>

<code>    </code><code>loadBkSpr=CCSprite::create(</code><code>"loading_1_1.png"</code><code>);</code><code>//加載進度條的邊框精靈</code>

<code>    </code><code>loadBkSpr-&gt;setPosition(ccp(size.width/2,size.height/2+size.height/4));</code>

<code>    </code><code>loadBkSpr-&gt;setScale(3.0f);</code>

<code>    </code><code>this</code><code>-&gt;addChild(loadBkSpr);</code>

<code>    </code><code>loadBar=CCProgressTimer::create(CCSprite::create(</code><code>"loading_1_2.png"</code><code>));</code>

<code>    </code><code>loadBar-&gt;setPercentage(1.0f);</code><code>//設定百分比,初始為0</code>

<code>    </code><code>loadBar-&gt;setPosition(ccp(size.width/2,size.height/2+size.height/4));</code>

<code>    </code><code>loadBar-&gt;setType(kCCProgressTimerTypeBar);</code><code>//設定進度條為水準類型</code>

<code>    </code><code>loadBar-&gt;setBarChangeRate(ccp(1,0));</code><code>//設定進度條的寬高變化，此處為寬度變化</code>

<code>    </code><code>loadBar-&gt;setMidpoint(ccp(0, 0));</code><code>//設定動畫運動方向從左至右</code>

<code>    </code><code>loadBar-&gt;setScale(3.0f);</code>

<code>    </code><code>this</code><code>-&gt;addChild(loadBar);</code>

<code>    </code><code>//設定一個動作，令進度條10秒内讀取到百分之100</code>

<code>    </code><code>CCProgressTo * action= CCProgressTo::create(4, 100);</code>

<code>    </code><code>//加載完畢.移除加載動畫,進入遊戲場景</code>

<code>    </code><code>loadBar-&gt;runAction(CCSequence::create(action,CCCallFunc::create(</code><code>this</code><code>, callfunc_selector(GameMain::loadSuccess)),NULL));</code>

<code>    </code><code>//2.奔跑小人</code>

<code>    </code><code>loadSprite = CCSprite::create(</code><code>"s_1.png"</code><code>);</code>

<code>    </code><code>CCAnimation * animation = CCAnimation::create();</code>

<code>    </code><code>animation-&gt;addSpriteFrameWithFileName(</code><code>"s_1.png"</code><code>);</code>

<code>    </code><code>animation-&gt;addSpriteFrameWithFileName(</code><code>"s_2.png"</code><code>);</code>

<code>    </code><code>animation-&gt;addSpriteFrameWithFileName(</code><code>"s_3.png"</code><code>);</code>

<code>    </code><code>animation-&gt;addSpriteFrameWithFileName(</code><code>"s_4.png"</code><code>);</code>

<code>    </code><code>animation-&gt;addSpriteFrameWithFileName(</code><code>"s_5.png"</code><code>);</code>

<code>    </code><code>animation-&gt;addSpriteFrameWithFileName(</code><code>"s_6.png"</code><code>);</code>

<code>    </code><code>animation-&gt;setDelayPerUnit(0.1f);</code>

<code>    </code><code>animation-&gt;setRestoreOriginalFrame(</code><code>true</code><code>);</code>

<code>    </code><code>loadSprite-&gt;setPosition(ccp(100, size.height/4));</code>

<code>    </code><code>//運作奔跑動畫</code>

<code>    </code><code>loadSprite-&gt;runAction(CCRepeatForever::create(CCAnimate::create(animation)));</code>

<code>    </code><code>CCMoveTo *moveTo = CCMoveTo::create(4, ccp(1000, size.height/4));</code>

<code>    </code><code>loadSprite-&gt;runAction(moveTo);</code>

<code>    </code><code>this</code><code>-&gt;addChild(loadSprite);</code>

<code>    </code><code>return</code><code>true</code><code>;</code>

<code>}</code>

<code>//加載完畢.移除加載動畫,進入遊戲場景,</code>

<code>void GameMain::loadSuccess()</code>

<code>    </code><code>loadBar-&gt;removeFromParent();</code>

<code>    </code><code>loadBkSpr-&gt;removeFromParent();</code>

<code>    </code><code>loadSprite-&gt;removeFromParent();</code>

我們所展示的進度條隻不過是一個假的進度條，因為它并不是随着資源加載的百分比而變化的，事實上我們可以設定一個回調函數，在資源加載的過程中調用，并随着加載進度設定進度條的百分比,例如：

CCTextureCache::sharedTextureCache()-&gt;addImageAsync("HelloWorld.png”,this,callfuncO_selector(newScene::loadCallBack)); 

此處就不過多講解了。

本文轉蓬萊仙羽51CTO部落格，原文連結：http://blog.51cto.com/dingxiaowei/1366125，如需轉載請自行聯系原作者