声明
本教程仅用于初学cocos2dx同学使用,内容由本人(Code-Man)编写,此教程使用cocos2dx版本为3.4。本教程内容可以自由转载,但必须同时附带本声明,或注明出处。QQ群:Cocos2d-CodeMonkey,461679592。
今天来讲一下进度条。进度条在游戏中通常以两种方式存在,我会分别介绍这两种的实现方式。
第一种:条形进度条。
第二种:扇形进度条。
资源:
条形进度条:
效果:
扇形进度条:
效果:
bool LessonEightScene::init(){ if (!Layer::init()) { return false; } WinSize=Director::getInstance()->getVisibleSize(); //背景 auto bg=Sprite::create("LessonOne_Bg.png"); bg->setPosition(WinSize/2); this->addChild(bg); //第一种更新函数(也叫调度器),每一帧执行一次 this->scheduleUpdate(); //进度条底部图片 auto progress_bg=Sprite::create("petLvUp_proBarFrame.png"); progress_bg->setPosition(progress_bg->getContentSize().width/2+100,WinSize.height/2+WinSize.height/2/2); this->addChild(progress_bg); //创建一个条形进度条 auto proBar=ProgressTimer::create(Sprite::create("petLvUp_proBar.png")); //这种进度条锚点(0,0)与底部图片重叠 proBar->setAnchorPoint(Vec2(0,0)); //添加到底部图片上 progress_bg->addChild(proBar); //进度条的类型为条形,另一个是扇形。 proBar->setType(ProgressTimer::Type::BAR); //设置条形进度条是X轴(从左到右,从右到左)为进度的,还是Y(从上到下,从下到上)轴为进度. proBar->setBarChangeRate(Vec2(1,0)); //设置进度条的起始位置 proBar->setMidpoint(Vec2(0,0)); //进度的初始值,数值0~100之间。 proBar->setPercentage(0); //增加经验按钮 auto AddExButton=MenuItemFont::create("经验加+5",[&,proBar](Ref*){ if (proBar->getPercentage()<100) { //进度值小于100,则0.1秒的时间向当前的进度值前进5. proBar->runAction(ProgressTo::create(0.1,proBar->getPercentage()+5)); }else{ //进度值大于等于100则设置进度值为0 proBar->setPercentage(0); } }); AddExButton->setPosition(progress_bg->getPosition()+Vec2(200,0)); //扇形进度条底部图片 auto progress_bg_2=Sprite::create("sectorProgress.png"); progress_bg_2->setPosition(progress_bg_2->getContentSize().width/2+100,WinSize.height/2-WinSize.height/2/2); this->addChild(progress_bg_2); //创建一个扇形进度条 auto proSector=ProgressTimer::create(Sprite::create("sectorProgress_frame.png")); //这种进度条锚点(0,0)与底部图片重叠 proSector->setAnchorPoint(Vec2(0,0)); //添加到底部图片上 progress_bg_2->addChild(proSector); //进度条的类型为条形,另一个是扇形。 proSector->setType(ProgressTimer::Type::RADIAL); //是否反向旋转,默认为false proSector->setReverseProgress(true); //进度的初始值,数值0~100之间。 proSector->setPercentage(100); //扣血按钮 auto stopUpData1Button=MenuItemFont::create("血量-5",proSector](Ref*obj){ if (proSector->getPercentage()<=0) { proSector->setPercentage(100); }else{ proSector->runAction(ProgressTo::create(0.1,proSector->getPercentage()-5)); } }); stopUpData1Button->setPosition(progress_bg_2->getPosition()+Vec2(200,0)); //按钮菜单 auto men=Menu::create(AddExButton,stopUpData1Button,NULL); men->setPosition(Vec2::ZERO); this->addChild(men); return true; }