[Cocos2d-x] loading加载动画

简介:

相信大家在玩游戏的过程中都会遇到一个loading的界面,loading界面的作用主要是为了加载游戏中需要用到的资源。在比较大型的游戏中,资源通常会占用很大的空间,如果不做一个预加载,在切换界面的过程中很容易造成卡屏的现象。

下面先给出运行效果。

今天要讲解的内容便是加载界面中的进度条控件的使用方法,在这里我们只学习控件的使用,不讲解加载过程的逻辑处理。

所谓的进度条,其实不过是两张纹理的组合,其中一个纹理全部显示出来,而另一个纹理会随着加载的过程有一定的变化,我们可以为它设置一个动作,也可以直接设置它显示的百分比,首先我们来看一下两张图片 :

 

这就是未加载时和加载完成后的进度条显示,加载完成后,第二个纹理完全遮住了第一个纹理,但事实上他们是两个纹理。

先给出实现代码。

1. .h文件中声明全局变量。

1
2
3
CCSprite * loadBkSpr;
CCProgressTimer * loadBar;//进度条
CCSprite *loadSprite;     //加载奔跑萝莉
2. .cpp文件中实现loading效果。
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
bool GameMain::init()
{
    if( !CCLayer::init() ) {
         
        returnfalse;
    }
     
    CCSize size = CCDirector::sharedDirector()->getWinSize();
    //返回
    CCMenuItemImage *back = CCMenuItemImage::create("backA.png","backB.png",this,menu_selector(GameMain::menuBackCallback));
    if(size.height > 500)
    {
        back->setScale(2.0f);
    }
    back->setPosition(ccp(size.width - 60,size.height - 60));
    back->setEnabled(false);
    CCMenu* mainmenu = CCMenu::create(back,NULL);
    mainmenu->setPosition(ccp(0,0));
    this->addChild(mainmenu,3,4);
     
     
    //加载效果  1.进度条   2.奔跑小人
    //1.进度条
    loadBkSpr=CCSprite::create("loading_1_1.png");//加载进度条的边框精灵
    loadBkSpr->setPosition(ccp(size.width/2,size.height/2+size.height/4));
    loadBkSpr->setScale(3.0f);
    this->addChild(loadBkSpr);
    loadBar=CCProgressTimer::create(CCSprite::create("loading_1_2.png"));
    loadBar->setPercentage(1.0f);//设置百分比,初始为0
    loadBar->setPosition(ccp(size.width/2,size.height/2+size.height/4));
    loadBar->setType(kCCProgressTimerTypeBar);//设置进度条为水平类型
    loadBar->setBarChangeRate(ccp(1,0));//设置进度条的宽高变化,此处为宽度变化
    loadBar->setMidpoint(ccp(0, 0));//设置动画运动方向从左至右
    loadBar->setScale(3.0f);
    this->addChild(loadBar);
    //设置一个动作,令进度条10秒内读取到百分之100
    CCProgressTo * action= CCProgressTo::create(4, 100);
    //加载完毕.移除加载动画,进入游戏场景
    loadBar->runAction(CCSequence::create(action,CCCallFunc::create(this, callfunc_selector(GameMain::loadSuccess)),NULL));
    //2.奔跑小人
    loadSprite = CCSprite::create("s_1.png");
    CCAnimation * animation = CCAnimation::create();
    animation->addSpriteFrameWithFileName("s_1.png");
    animation->addSpriteFrameWithFileName("s_2.png");
    animation->addSpriteFrameWithFileName("s_3.png");
    animation->addSpriteFrameWithFileName("s_4.png");
    animation->addSpriteFrameWithFileName("s_5.png");
    animation->addSpriteFrameWithFileName("s_6.png");
    animation->setDelayPerUnit(0.1f);
    animation->setRestoreOriginalFrame(true);
    loadSprite->setPosition(ccp(100, size.height/4));
    //运行奔跑动画
    loadSprite->runAction(CCRepeatForever::create(CCAnimate::create(animation)));
    CCMoveTo *moveTo = CCMoveTo::create(4, ccp(1000, size.height/4));
    loadSprite->runAction(moveTo);
    this->addChild(loadSprite);
     
    returntrue;
     
}
 
 
//加载完毕.移除加载动画,进入游戏场景,
void GameMain::loadSuccess()
{
    loadBar->removeFromParent();
    loadBkSpr->removeFromParent();
    loadSprite->removeFromParent();
}

我们所展示的进度条只不过是一个假的进度条,因为它并不是随着资源加载的百分比而变化的,事实上我们可以设置一个回调函数,在资源加载的过程中调用,并随着加载进度设置进度条的百分比,例如:

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

此处就不过多讲解了。














本文转蓬莱仙羽51CTO博客,原文链接:http://blog.51cto.com/dingxiaowei/1366125,如需转载请自行联系原作者

相关文章
|
Web App开发 移动开发 前端开发
多种方法实现Loading(加载)动画效果
当我们ajax提交一个按钮的时候,给那个按钮来个Loading效果会高端很多,体验也会上升个层次。 既能让用户知道正在提交中,也能防止二次提交,好处多多呢。
多种方法实现Loading(加载)动画效果
egret微信小游戏自定义加载(loading)界面
egret微信小游戏自定义加载(loading)界面
egret微信小游戏自定义加载(loading)界面
Qt-QML-给我的导航条写一个动画-State-Transition
上篇中,我已经写出一个导航条的,虽然太丑了,不过功能是有了,这次我将要给我的导航条加一个动画,先看下演示效果
178 0
Qt-QML-给我的导航条写一个动画-State-Transition
超酷Loading进度条
在线演示 本地下载
988 0
|
C#
WPF loading加载动画库
原文:WPF loading加载动画库 1. 下载Dll        https://pan.baidu.com/s/1wKgv5_Q8phWo5CrXWlB9dA 2.
2341 0
|
C# Windows
【WPF】BusyIndicator做Loading遮罩层
原文:【WPF】BusyIndicator做Loading遮罩层 百度了一下,粗略看了几个国内野人的做法,花了时间看下去感觉不太好用(比如有Loading居然只是作为窗体的一个局部控件的,没法全屏遮罩,那要你有何用?),于是谷歌找轮子去。
2529 0
|
前端开发 Android开发 iOS开发
react native android 实现图片预览 图片保存 react-native-image-zoom-viewer
上一篇 介绍了ios 的图片预览 和图片保存 ,Android 实现起来就稍微复杂点, image.png android 的 CameraRoll 只支持 本地文件,解决方式就是把图片下载到本地 ,然后调用这个保存到相册的方法。
2320 0