首页 > 代码库 > cocos2dx3.0 超级马里奥开发笔记(一)——loadingbar和pageview的使用
cocos2dx3.0 超级马里奥开发笔记(一)——loadingbar和pageview的使用
学完cocos2dx课程的第一个项目选择了超级玛丽。可以说有自己的想法,简单但是确实不简单。
我花了一天把一份2.1版本的超级玛丽源码升级到了3.0,改改删删,参考那个源码虽然好多不懂,但是马虎升级成功,游戏正常玩耍。
本着不为把游戏做出来而写代码的想法,罗列了一下这个游戏可以使用到的知识点。数据持久化的三种方式、loading页面、tmx地图解析、cocosStudio场景、屏幕适配、关卡如何选择、代码结构的优化(各种类的抽象继承),在基本功能出来后可以自己去设计变态关卡等。
两天实现了loading界面、 主界面所有场景 和选关场景。
效果如下gif:
Loading场景
进度条
超级玛丽这种简单的游戏根本不需要预加载太多东西,或者说根本不需要loading这么笨重的交互。没办法,熟悉一些方法,学习而已,别太较真。
场景的进度条使用ProgressTimer,如果我们使用cocosStudio创建的场景,就使用工具的那个。
设置一个进度条成员变量,然后:
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函数,这个函数会直接执行完,不需等待任何结果。 然后资源会在后台加载。
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)); }
回调函数中这样处理:
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的前进,这里也没有任何技巧性的实现方法。 还望大家有好优化的时候告诉我,一起进步,万分感谢~
游戏主场景
这里就直接略过,看源码就知道了。 只是单纯的背景和两个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,不然会发现无响应:
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文件中声明{}就好。
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的声明一定要使用:
void SelectLevel::pageViewEvent(Ref *pSender, PageViewEventType type) { }千万不要使用:
void SelectLevel::pageViewEvent(Ref *pSender) { }后面这种写法编译不报错,但是运行的时候报错崩溃。
PageList的实现如下:
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上面添加了一个透明层,在这个层中来处理触摸时间,实现开始游戏。
首先添加透明层:
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像素不切换场景。
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; } } }
到这里PageView选择并开始对应关卡的游戏就搞定了。
明天进行TMX地图的解析了,有需要源码的可以加发邮件给我 wct511@126.com或者加QQ179261480。
最后完成代码后会对整个代码进行共享。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。