一、制作背景

如今非常多游戏或者应用须要评分,就是一般来说满分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. tkinter Canvas画图片大坑总结

    一.ImportError: cannot import name '_imagingtk' 问题描述 使用tkinter画pillow生成的图片时,在tkinter中抛出此异常. 解决方案 pip ...

  2. php Zend虚拟机

    在前⾯的章节中,我们了解到⼀个PHP⽂件在服务器端的执⾏过程包括以下两个⼤的过程:1. 递给php程序需要执⾏的⽂件, php程序完成基本的准备⼯作后启动PHP及Zend引擎, 加载注册的扩展模块.2 ...

  3. 清除Eclipse中的内置浏览器中的历史记录

    eclipse内置浏览器的访问记录是存储在对应的工程目录下的.metadata配置中, 也就是说你新建一个工程的话就没有了. 如果确实要删除那就找到工作空间中的org.eclipse.ui.brows ...

  4. linux创建新用户及权限

    在Linux中添加普通新用户 ,超级用户(也称为“root”)是一个具有修改系统中任何文件权力的特别账号.在日常工作中,最好不要使用超级用户账号进入系统,因为任何错误操作都可能导致巨大的损失.由于超级 ...

  5. 非微信内如何调起wap版微信支付

    微信支付一直没有出wap版,wap版想用微信支付,只有在微信内调用才可以.今天偶然发现,中国电信一个wap站点, 不在微信内也能调起微信支付,而且官方还提供了一个demo. WAP怎么调起客户端? 在 ...

  6. Tomcat配置+JSP页面模板修改UTF-8

    A.修改Tomcat端口号步骤:1.找到Tomcat目录下的conf文件夹2.进入conf文件夹里面找到server.xml文件3.打开server.xml文件4.在server.xml文件里面找到下 ...

  7. python学习笔记——multiprocessing 多进程组件 进程池Pool

    1 进程池Pool基本概述 在使用Python进行系统管理时,特别是同时操作多个文件目录或者远程控制多台主机,并行操作可以节约大量时间,如果操作的对象数目不大时,还可以直接适用Process类动态生成 ...

  8. 转 jmeter使用IP欺骗压力测试

    jmeterIP 欺骗多IP 最近在使用jmeter进行压力测试时需要使用类似于loadrunner的IP欺骗功能,经问津度娘无果后决定再次耐心研究jmeter官方文 档,终于发现在jmeter2.5 ...

  9. 统一日志监控系统 springboot websocket 简单版 王代军-作品

    http://git.oschina.net/redArmy/springboot-websocket-logs 目的: 统一监控 开发测试环境日志 如果需要可以拓展线上环境的日志(自己视情况而定) ...

  10. ISE在win8.1的安装问题

    问题1:.lic无法打开 打开:C:\Xilinx\14.6\ISE_DS\ISE\lib\nt64 思路是这样: 将libPortability.dll重命名(加尾缀.orig,意思是origina ...