Cocos2d-x的学习之旅(八)进度条
发布时间:2020-12-14 21:34:45 所属栏目:百科 来源:网络整理
导读:声明 本教程仅用于初学cocos2dx同学使用,内容由本人(Code-Man)编写,此教程使用cocos2dx版本为3.4。本教程内容可以自由转载,但必须同时附带本声明,或注明出处。QQ群: Cocos2d-CodeMonkey,461679592 。 今天来讲一下进度条。进度条在游戏中通常以两种方
|
声明 本教程仅用于初学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;
}
本文Demo资源:http://pan.baidu.com/s/1dD2dRmL
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
