一、制作背景

如今非常多游戏或者应用须要评分,就是一般来说满分10分,一般用星星来表示。
那么cocos2dx里面怎样制作评分这种控件呢?
我的打算是进度条组合成即可了。

二、材料准备


如上图所看到的,即2颗小星星就可以。

三、终于效果


四、代码实现

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

/***************************ScoreBar Class**************************************/

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

class ScoreBar:public cocos2d::Node
{
public:
CREATE_FUNC(ScoreBar);
static ScoreBar* create(float mPercentage);
CC_CONSTRUCTOR_ACCESS:
ScoreBar();
~ScoreBar();
virtual bool init();
virtual bool initSelf();
virtual bool initBackGround();
virtual bool initProgress();
public:
void setPercent(unsigned char mPercentage);
float getPercent() const;
private:
cocos2d::Vector<cocos2d::ProgressTimer*>* _progressBars;
cocos2d::Node* _backGround;
};
/////////////////////////////////////////////////////////////////////////////////

/***************************ScoreBar Class**************************************/

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

ScoreBar::ScoreBar():_progressBars(nullptr),
_backGround(nullptr)
{ } ScoreBar::~ScoreBar()
{
_progressBars->clear();
CC_SAFE_DELETE(_progressBars);
CC_SAFE_RELEASE(_backGround);
} ScoreBar* ScoreBar::create( float mPercentage )
{
auto bar = new ScoreBar();
if (bar&&bar->init())
{
bar->setPercent(mPercentage);
bar->autorelease();
return bar;
}
CC_SAFE_DELETE(bar);
bar = nullptr;
return nullptr;
} bool ScoreBar::init()
{
bool ret = false;
if (Node::init())
{
IF_RETURN_FALSE(!initSelf());
return true;
}
return ret;
} bool ScoreBar::initSelf()
{
IF_RETURN_FALSE(!initBackGround());
IF_RETURN_FALSE(!initProgress());
return true;
} bool ScoreBar::initBackGround()
{
unsigned char elementCount = 5;
const std::string elementBg = "grid/star_default.png";
_backGround = Node::create();
IF_RETURN_FALSE(!_backGround);
addChild(_backGround);
for (unsigned char i=0;i<elementCount;i++)
{
auto elementSprite = Sprite::create(elementBg);
IF_RETURN_FALSE(!elementSprite);
_backGround->addChild(elementSprite);
elementSprite->setPosition(elementSprite->getContentSize().width*i,0.0f);
}
return true;
} bool ScoreBar::initProgress()
{
unsigned char elementCount = 5;
const std::string elementPre = "grid/star_show.png";
float w = 0.0f;
float h = 0.0f;
if (nullptr==_progressBars)
{
_progressBars = new cocos2d::Vector<cocos2d::ProgressTimer*>();
}
for (unsigned char i=0;i<elementCount;i++)
{
auto elemntSprite = Sprite::create(elementPre);
IF_RETURN_FALSE(!elemntSprite); w = elemntSprite->getContentSize().width;
h = elemntSprite->getContentSize().height;
auto mProgressBar = ProgressTimer::create(elemntSprite);
IF_RETURN_FALSE(!mProgressBar);
addChild(mProgressBar);
_progressBars->pushBack(mProgressBar);
mProgressBar->setPosition(elemntSprite->getContentSize().width*i,0.0f);
mProgressBar->setType(ProgressTimer::Type::BAR);
mProgressBar->setMidpoint(Vec2(0,0));
mProgressBar->setBarChangeRate(Vec2(1, 0));
} this->setContentSize(Size(w*elementCount,h));
//CC_SAFE_RELEASE(baseSprite);
return true;
} void ScoreBar::setPercent( unsigned char mPercentage )
{
unsigned char elementCount = 5; //the total num of progress' star
unsigned char perFull = 100/elementCount; //per star full percent
unsigned int per = mPercentage/perFull; // full star num
unsigned char remain = (mPercentage%perFull)*elementCount; //the remain percent
for(unsigned char i=0;i<_progressBars->size();i++)
{
if(i<per)
_progressBars->at(i)->setPercentage(100);
else
_progressBars->at(i)->setPercentage(0);
}
if (per<_progressBars->size())
{
_progressBars->at(per)->setPercentage(remain);
}
} float ScoreBar::getPercent() const
{
float percent = 0;
unsigned char elementCount = 5;
for(auto e:*_progressBars)
{
percent+=e->getPercentage();
}
return percent/elementCount;
}

cocos2dx3.2利用ProgressTimer组合成评分控件的更多相关文章

  1. 033. asp.netWeb用户控件之二将页面转换成web控件和使用Web控件显示热点新闻

    访问Web用户控件的属性 ASP.NET提供的各种服务器控件都有其自身的属性和方法,程序开发人员可以灵活地使用服务器控件中的属性和方法开发程序.在用户控件中,程序开发人员也可以自行定义各种属性和方法, ...

  2. iOS- 非整星的评分控件(支持小数)

    概述 订单评论里实现星级评分控件: 简单整星评价与非整星的精评价. 详细 代码下载:http://www.demodashi.com/demo/10711.html 现在很多应用都有评分功能. 有了订 ...

  3. Android星星评分控件RatingBar的使用

    在Android的开发中,有一个叫做评分控件RatingBar,我们可以使用该控件做等级划分.评分等作用,星星形状显示,也可以半星级别,我们来看一下评分控件如何使用. 布局文件中定义控件以及属性,这里 ...

  4. Android中如何利用attrs和styles定义控件

    一直有个问题就是,Android中是如何通过布局文件,就能实现控件效果的不同呢?比如在布局文件中,我设置了一个TextView,给它设置了 textColor,它就能够改变这个TextView的文本的 ...

  5. Android自定义评分控件:RatingStarView

    RatingStarView Android自定义的评分控件,类似ProgressBar那样的,使用星星图标(full.half.empty)作为progress标识的评分/打分控件. 效果图 图1: ...

  6. JQuery版评分控件

    Hi All, 分享一个学习JQuery做的一个评分控件. 需求:当鼠标移动到 ‘☆’ 上时,该字符左边的 ‘☆’ 变成 '★',该字符右边仍然是 ‘☆’, 并显示相应星星数的评价结果:当鼠标推出 ‘ ...

  7. Web用户控件开发--星型评分控件

    本文中分享一个实现简单,使用方便的星型评分控件. 一:贴几张测试图片先: 二.星型评分控件的实现: RatingBar.ascx: <%@ Control Language="C#&q ...

  8. UWP开发---DIY星级评分控件

    一,需求来源 在开发韩剧TV UWP过程中,遇到了星级评分的控件问题,在安卓和html中很容易用现有的轮子实现星级评分,搜索了一下目前UWP还未有相关文章,在WPF的一篇文章中使用Photo shop ...

  9. 自定义RatingBar评分控件

    1.介绍 实现类似美团外卖评分供能,系统提供了RatingBar,今天来自定义一波,当做自定义view的一个学习,效果如下,能够滑动或者点击变化星星数量 2.自定义属性 在values目录下的attr ...

随机推荐

  1. Python 绘图库的使用:matplotlib

    Matplotlib 官方API地址:https://matplotlib.org/ 例子: import matplotlib.pyplot as plt num_list=[1.5,0.6,7.8 ...

  2. 修改Subversion用户登录密码

    找到svn建立的repository地址 %repository%/xxxx库/conf/   修改passwd文件即可

  3. 修改apache配置文件去除thinkphp url中的index.php(转)

    例如你的原路径是 http://localhost/test/index.php/index/add那么现在的地址是 http://localhost/test/index/add如何去掉index. ...

  4. 手机web——自适应网页设计(html/css控制)(转)

    一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的?其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="v ...

  5. Google map API V3

    本文主要总结Google map API V3使用中最简单也是最常见的一些操作以及相关概念,如果需要更加详细的信息,请直接阅读Google提供的关于map的文档. google map api v3文 ...

  6. oc引入头文件

    建立.h的头文件(header file)命名为Hi.h,源码如下: #ifndef oc3_Hi_h #define oc3_Hi_h void sayHi(); #endif 建立.c的头文件(c ...

  7. java concurrent之ReentrantLock

    在编码的过程中.有时候我们不得不借助锁同步来保证线程安全.synchronizedkeyword在上一篇博客中已经介绍.自从JDK5開始,加入了还有一种锁机制:ReentrantLock. 二者的差别 ...

  8. GDI+ 怎样将图片绘制成圆形的图片

    大概意思就是不生成新的图片,而是将图片转换为圆形图片. 实现代码例如以下: private Image CutEllipse(Image img, Rectangle rec, Size size) ...

  9. usb端点(endpoint)知识详解

    stsw-stm32121库中: 把数据copy到对应端点的发送缓冲区后,使能发送状态编码STAT_TX=VALID,这时候usb的该端点就可以发送数据了 ----->即先调用usb_sil.c ...

  10. java读取url中json文件中的json数据

    有时候需要远程从其他接口中获取json数据,如果遇到返回的json数据是一个文件而不直接是数据,那么可以通过以下方法进行读取: /** * 从数据接口获取到数据 * @return * @throws ...