cocos2dx3.0 超级马里奥开发笔记（一）——loadingbar、TableView和pageview的使用

学完cocos2dx课程的第一个项目选择了超级玛丽。可以说有自己的想法，简单但是确实不简单。

我花了一天把一份2.1版本的超级玛丽源码升级到了3.0，改改删删，参考那个源码虽然好多不懂，但是马虎升级成功，游戏正常玩耍。

本着不为把游戏做出来而写代码的想法，罗列了一下这个游戏可以使用到的知识点。数据持久化的三种方式、loading页面、tmx地图解析、cocosStudio场景、屏幕适配、关卡如何选择、代码结构的优化（各种类的抽象继承），在基本功能出来后可以自己去设计变态关卡等。

两天实现了loading界面、 主界面所有场景 和选关场景。

 效果如下gif：

Loading场景

进度条

超级玛丽这种简单的游戏根本不需要预加载太多东西，或者说根本不需要loading这么笨重的交互。没办法，熟悉一些方法，学习而已，别太较真。
场景的进度条使用ProgressTimer，如果我们使用cocosStudio创建的场景，就使用工具的那个。
设置一个进度条成员变量，然后：

[cpp] view
plain copy

 print?





loadProgress = ProgressTimer::create(Sprite::create("image/loadingbar.png"));  

loadProgress->setBarChangeRate(Point(1, 0));//设置进程条的变化速率  

loadProgress->setType(ProgressTimer::Type::BAR);//设置进程条的类型  

loadProgress->setMidpoint(Point(0, 1));//设置进度的运动方向  

  

loadProgress->setPosition(visibleSize.width / 2, visibleSize.height / 2 );  

loadProgress->setPercentage(progressPercent);  

this->addChild(loadProgress);  

要调整进度条，只需要在异步加载资源的回调函数中实现就可以了。
像loading场景也可以实现loading的动画等其他效果，异步加载并不会对界面造成太多的卡顿效果，除非手机实在是太烂了。。

异步加载资源

一般缓存有三种，TextureCache、SpriteFrameCache、AnimationCache。
我们loading 的时候要根据需求预加载不同的资源。 然后在回调函数中处理进度条的进度。
超级玛丽登陆loading我使用最简单的TextureCache来操作。
在init里面添加preloadResource函数，这个函数会直接执行完，不需等待任何结果。 然后资源会在后台加载。

[cpp] view
plain copy

 print?





void LoadingScene::preloadResource()  

{  

    //这里分开写测试， 后期如果确定是一个场景中的直接使用plist加载  

    std::string resouceMain = "image/mainscene/";  

    float count = 20;//一共加载十七张  

    everyAdd = 100 / count;  

    Director::getInstance()->getTextureCache()->addImageAsync(resouceMain+"about_normal.png", CC_CALLBACK_1(LoadingScene::loadingCallback, this));  

    Director::getInstance()->getTextureCache()->addImageAsync(resouceMain+"about_select.png", CC_CALLBACK_1(LoadingScene::loadingCallback, this));  

    Director::getInstance()->getTextureCache()->addImageAsync(resouceMain+"backA.png", CC_CALLBACK_1(LoadingScene::loadingCallback, this));  

    Director::getInstance()->getTextureCache()->addImageAsync(resouceMain+"backB.png", CC_CALLBACK_1(LoadingScene::loadingCallback, this));  

    Director::getInstance()->getTextureCache()->addImageAsync(resouceMain+"background.png", CC_CALLBACK_1(LoadingScene::loadingCallback, this));  

    Director::getInstance()->getTextureCache()->addImageAsync(resouceMain+"bg.png", CC_CALLBACK_1(LoadingScene::loadingCallback, this));  

    Director::getInstance()->getTextureCache()->addImageAsync(resouceMain+"music_off.png", CC_CALLBACK_1(LoadingScene::loadingCallback, this));  

    Director::getInstance()->getTextureCache()->addImageAsync(resouceMain+"music_on.png", CC_CALLBACK_1(LoadingScene::loadingCallback, this));  

    Director::getInstance()->getTextureCache()->addImageAsync(resouceMain+"quitgame_normal.png", CC_CALLBACK_1(LoadingScene::loadingCallback, this));  

    Director::getInstance()->getTextureCache()->addImageAsync(resouceMain+"quitgame_select.png", CC_CALLBACK_1(LoadingScene::loadingCallback, this));  

    Director::getInstance()->getTextureCache()->addImageAsync(resouceMain+"Set_Music.png", CC_CALLBACK_1(LoadingScene::loadingCallback, this));  

    Director::getInstance()->getTextureCache()->addImageAsync(resouceMain+"Setting_n.png", CC_CALLBACK_1(LoadingScene::loadingCallback, this));  

    Director::getInstance()->getTextureCache()->addImageAsync(resouceMain+"setting_s.png", CC_CALLBACK_1(LoadingScene::loadingCallback, this));  

    Director::getInstance()->getTextureCache()->addImageAsync(resouceMain+"startgame_normal.png", CC_CALLBACK_1(LoadingScene::loadingCallback, this));  

    Director::getInstance()->getTextureCache()->addImageAsync(resouceMain+"startgame_select.png", CC_CALLBACK_1(LoadingScene::loadingCallback, this));  

    Director::getInstance()->getTextureCache()->addImageAsync(resouceMain+"wxb.jpg", CC_CALLBACK_1(LoadingScene::loadingCallback, this));  

    Director::getInstance()->getTextureCache()->addImageAsync(resouceMain+"zhy.jpg", CC_CALLBACK_1(LoadingScene::loadingCallback, this));  

    Director::getInstance()->getTextureCache()->addImageAsync(resouceMain + "sound_effect_off.png", CC_CALLBACK_1(LoadingScene::loadingCallback, this));  

    Director::getInstance()->getTextureCache()->addImageAsync(resouceMain + "sound_effect_on.png", CC_CALLBACK_1(LoadingScene::loadingCallback, this));  

    Director::getInstance()->getTextureCache()->addImageAsync(resouceMain + "switchBg.png", CC_CALLBACK_1(LoadingScene::loadingCallback, this));  

  

}  

回调函数中这样处理：

[cpp] view
plain copy

 print?





void LoadingScene::loadingCallback(Texture2D*)  

{  

    progessAdd();  

}  

  

void LoadingScene::progessAdd()  

{  

    progressPercent += everyAdd;  

  

    if (100-progressPercent <everyAdd)  

    {  

        progressPercent = 100;  

        auto scene = MainScene::createScene();  

        Director::getInstance()->replaceScene(TransitionFade::create(1, scene));  

    }  

    percentLabel->setString(StringUtils::format("%d", int(progressPercent)));//更新percentLabel的值  

    loadProgress->setPercentage(progressPercent);  

}  

在loading到100%的时候切换场景。
资源不是很多进度条没有+1的前进，这里也没有任何技巧性的实现方法。 还望大家有好优化的时候告诉我，一起进步，万分感谢~

补：好吧，我承认上面的loading逻辑其实是错误的！
正确的应该是每异步加载完一个资源才可以加载后一个，同时最好一次加载一个，不然有可能造成内存陡升，导致应用直接被干掉！
如下写：
头文件如下：

[cpp] view
plain copy

 print?





private:  

    void update(float f);  

    std::vector<std::string> reloadResources;  

    int reloadNums = 0;  

    int curReloadNum = 0;  

    bool loading = true;  

  

    void imageAsyncCallback( cocos2d::Texture2D*);  

cpp如下：

[cpp] view
plain copy

 print?





bool Welcome::init()  

{  

    //////////////////////////////  

    // 1. super init first  

    if ( !Layer::init() )  

    {  

        return false;  

    }  

      

    Size visibleSize = Director::getInstance()->getVisibleSize();  

  

    /////////////////////////////  

    // 3. add your codes below...  

    auto sprite = Sprite::create("welcome.png");  

  

    // position the sprite on the center of the screen  

    sprite->setPosition(Point(visibleSize.width/2, visibleSize.height/2));  

  

    // add the sprite as a child to this layer  

    this->addChild(sprite, 0);  

      

    reloadResources = {"Themes/scene/mainscene.png","Themes/scene/mainscene_title.png"};  

    reloadNums = reloadResources.size();  

    this->scheduleUpdate();  

  

    return true;  

}  

  

void Welcome::update(float f)  

{  

    if (loading)  

    {  

        loading = false;  

        if (curReloadNum >= reloadNums)  

        {  

            this->unscheduleUpdate();  

            auto scene = MainScene::createScene();  

            Director::getInstance()->replaceScene(TransitionCrossFade::create(0.6, scene));  

            return;  

        }  

        else  

        {  

            Director::getInstance()->getTextureCache()->addImageAsync(reloadResources[curReloadNum],  

                CC_CALLBACK_1(Welcome::imageAsyncCallback, this));  

        }  

    }  

      

}  

  

void Welcome::imageAsyncCallback(Texture2D*)  

{  

    curReloadNum++;  

    loading = true;  

}  

这样就做到了每次只加载一个资源，每一帧来操作一次，可以实时的进行垃圾回收。

游戏主场景

这里就直接略过，看源码就知道了。 只是单纯的背景和两个Menu。

选择关卡

本文的重点在于关卡的选择。超级玛丽一共八关，可以选择对应的关卡进行游戏。
这里我们实现类似于保卫萝卜关卡切换的功能，左右拖动进行选关，点击进行游戏。
这里有三个方法可以实现：
第一种：
新建一个Layer，横向添加8个精灵。实现触摸事件，左右触摸拖动实现Layer的移动。触摸结束后，根据拖动的位置自己调整层的position（使用MoveTo动画）。
这种方法的机制简单，但是写起来复杂。
第二种：
我使用了TableView。刚开始没有理解TableView的用法，尝试了一下失败了。
TableView可以创建水平的或者垂直的一系列小单元，可以设置这些单元的间隔。  想了一下，特别适合做排行榜，不知道scroll做排行榜效果怎么样。

TableView的弊端在于拖动结束的时候会根据触摸惯性来决定停止在哪个单元，不符合我们的预期。

使用TabelView报错解析：

引入库libExtensions
在类中添加头文件 #include "cocos-ext.h"
cocos2dx 无法打开包括文件:
“extensions/ExtensionMacros.h”: No such file or directory (..\Classes\SelectLevel
是以为附加包含目录没有引入$(EngineRoot)（添加方法参考我的博客：点击打开链接）

使用方法：
在init添加，千万不要丢掉代理方法setDelegate，不然会发现无响应：

[cpp] view
plain copy

 print?





tableView = TableView::create(this, Size(spWidth, spHeight));  

tableView->setDirection(ScrollView::Direction::HORIZONTAL);  

tableView->setPosition(Point((winSize.width - spWidth)/2, (winSize.height-spHeight)/2));  

tableView->setDelegate(this);  

this->addChild(tableView);  

tableView->reloadData();  

必须要实现的六个回调函数，其中两个是scroll的在.h文件中声明{}就好。

[cpp] view
plain copy

 print?





void SelectLevel::tableCellTouched(TableView* table, TableViewCell* cell)  

{  

    CCLOG("cell touched at index: %ld", cell->getIdx());  

}  

  

Size SelectLevel::tableCellSizeForIndex(TableView *table, ssize_t idx)  

{  

    return Director::getInstance()->getVisibleSize();  

}  

  

TableViewCell* SelectLevel::tableCellAtIndex(TableView *table, ssize_t idx)  

{  

    auto string = String::createWithFormat("%ld", idx+1);  

    TableViewCell *cell = table->dequeueCell();  

    if (!cell) {  

        cell = new TableViewCell();  

        cell->autorelease();  

        auto sprite = Sprite::create(StringUtils::format("image/level/select%d.jpg", idx));  

        sprite->setAnchorPoint(Point::ZERO);  

        sprite->setPosition(Point(0, 0));  

        cell->addChild(sprite);  

  

        auto label = Label::createWithSystemFont(string->getCString(), "Helvetica", 20.0);  

        label->setPosition(Point::ZERO);  

        label->setAnchorPoint(Point::ZERO);  

        label->setTag(123);  

        cell->addChild(label);  

    }  

    else  

    {  

        auto label = (Label*)cell->getChildByTag(123);  

        label->setString(string->getCString());  

    }  

  

  

    return cell;  

}  

  

ssize_t SelectLevel::numberOfCellsInTableView(TableView *table)  

{  

    return Global::getInstance()->getTotalLevels();  

}  

第三种：
PageView。
在官方的Demo都有例子，在extensions->最下面->GUI Edito里面，我看到的第一眼就知道这个效果就是我想要的（至少差不多，我们可以改）。
根据Demo实现起来也很简单。但是有一个要注意的地方：
pageView->addEventListenerPageView(this, pagevieweventselector(SelectLevel::pageViewEvent));

回调函数pageViewEvent的声明一定要使用：

[cpp] view
plain copy

 print?





void SelectLevel::pageViewEvent(Ref *pSender, PageViewEventType type)  

{  

  

}  

千万不要使用：

[cpp] view
plain copy

 print?





void SelectLevel::pageViewEvent(Ref *pSender)  

{  

  

}  

后面这种写法编译不报错，但是运行的时候报错崩溃。

PageList的实现如下：

[cpp] view
plain copy

 print?





   pageView = PageView::create();  

pageView->setSize(Size(winSize.width, winSize.height));  

pageView->setPosition(Point(0,0));  

  

for (int i = 1; i < Global::getInstance()->getTotalLevels(); i++)  

{  

    Layout* layout = Layout::create();  

    layout->setSize(Size(winSize.width, winSize.height));  

  

    ImageView* imageView = ImageView::create(StringUtils::format("image/level/select%d.jpg", i));  

    imageView->setScale9Enabled(true);  

    imageView->setSize(Size(spWidth, spHeight));  

    imageView->setPosition(Point(layout->getSize().width / 2.0f, layout->getSize().height / 2.0f));  

    layout->addChild(imageView);  

  

    Text* label = Text::create(StringUtils::format("page %d", i), "fonts/Marker Felt.ttf", 30);  

    label->setColor(Color3B(192, 192, 192));  

    label->setPosition(Point(layout->getSize().width / 2.0f, layout->getSize().height / 2.0f));  

    layout->addChild(label);  

  

    pageView->addPage(layout);  

}  

pageView->addEventListenerPageView(this, pagevieweventselector(SelectLevel::pageViewEvent));  

  

this->addChild(pageView);  

这样我们就实现了拖动选关了，下面就该实现单击开始游戏了。
这里又出现了问题，PageView的回调函数在每次触摸end的时候都会回调，所以我们不能根据它的回调函数来做场景切换。
我考虑在当前层添加Touch事件来判断开始游戏，结果发现PageView把触摸回调事件拦截了。
没办法，我就在PageView上面添加了一个透明层，在这个层中来处理触摸时间，实现开始游戏。
(PS:朋友把PageView里面的Menu改成button是可以的，可以拖动和点击)
首先添加透明层：

[cpp] view
plain copy

 print?





auto layerr = Layer::create();  

  

layerr->setContentSize(Size(spWidth, spHeight));  

layerr->setPosition(size.width/2, size.height/2);  

  

layerr->setZOrder(111);  

this->addChild(layerr);  

auto listenTouch = EventListenerTouchOneByOne::create();  

listenTouch->onTouchBegan = CC_CALLBACK_2(SelectLevel::onTouchBegan, this);  

//listenTouch->onTouchMoved = CC_CALLBACK_2(SelectLevel::onTouchMoved, this);  

listenTouch->onTouchEnded = CC_CALLBACK_2(SelectLevel::onTouchEnded, this);  

//listenTouch->onTouchCancelled = CC_CALLBACK_2(SelectLevel::onTouchCancelled, this);  

Director::getInstance()->getEventDispatcher()->addEventListenerWithSceneGraphPriority(listenTouch, layerr);  

其实是做好触摸回调：
要判断好什么时候才切换场景。触摸PageView外面区域不切换，移动PageView超过5像素不切换场景。

[cpp] view
plain copy

 print?





bool SelectLevel::onTouchBegan(Touch* touch, Event* event)  

{  

    clickBeginPoint = touch->getLocation();  

    return true;  

}  

  

void SelectLevel::onTouchEnded(Touch* touch, Event* event)  

{  

    int dragDistance = abs(touch->getLocation().x - clickBeginPoint.x);  

    //如果单击超过5像素 切换场景  

    if (dragDistance < 5 )  

    {  

        Rect layerRect = Rect((winSize.width - spWidth) / 2, (winSize.height - spHeight) / 2, spWidth, spHeight);  

        if (layerRect.containsPoint(touch->getLocation()))  

        {  

            //要切换的关  

            int level = pageView->getCurPageIndex()+1;  

          

        }  

    }  

}