[cocos2dx]自定义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/1366113，如需转载请自行联系原作者