一、制作背景

如今非常多游戏或者应用须要评分,就是一般来说满分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. Numpy库应用实例——GPS定位

    背景介绍 定位系统 GPS全球定位系统(Global Positioning System)以GPS系统为例介绍卫星定位的计算方法 GPS定位的基本原理 GPS定位的基本原理是根据高速运动卫星的 ...

  2. eclipse 中使用中文JAVA api文档

    http://hi.baidu.com/danghj/item/7625a1be20946e43ba0e1202在eclipse中使用中文JAVA api文档Sun 官方的中文版 Java API 文 ...

  3. 解决idea中Activiti的bpmn编辑器的中文乱码问题

    我使用的是idea2017+activiti6.0版本. 该文章主要是为了解决安装activiti插件后创建的流程模板中文乱码的问题. 1.安装Activiti流程编辑器插件. 1.1网上资料很多,这 ...

  4. Java 异常模型综述

    一. 异常的引入及基础 发现错误的理想时机是在编译阶段.也就是在你试图运行程序之前. 然而,编译期间编译器并不能找出全部的错误,余下的错误仅仅有在运行期才干发现和解决,这类错误就是 Throwable ...

  5. ubuntu16.4搭建tensorflow环境

    1 说明: 本机配置:显卡gtx970,ubuntu16.4.1+cuda8.0+cudnn v5+tensorflow0.11 1. 下载 1.1 系统镜像 由于我尝试了ubuntu14.04,安装 ...

  6. 统计学习方法:支撑向量机(SVM)

    作者:桂. 时间:2017-05-13  21:52:14 链接:http://www.cnblogs.com/xingshansi/p/6850684.html 前言 主要记录SVM的相关知识,参考 ...

  7. iOS __weak学习碰到的疑问

      __weak弱引用并不持有对象,所以赋值给__weak修饰符的变量也不会改变计数器的值.    main.m id __strong obj3 = nil;     id __weak obj1= ...

  8. [Jobdu] 题目1463:招聘会

    题目描述: 又到毕业季,很多大公司来学校招聘,招聘会分散在不同时间段,小明想知道自己最多能完整的参加多少个招聘会(参加一个招聘会的时候不能中断或离开). 输入: 第一行n,有n个招聘会,接下来n行每行 ...

  9. C#用正则表达式一键Unicode转UTF8(解决LitJson中文问题)

    txt = Regex.Unescape(txt);

  10. svn导出历史版本

    svn导出历史某一个版本,有时候想拷贝出项目某个版本的代码,又不希望覆盖现在的代码,需要用到导出历史版本 1.浏览历史版本    鼠标移到项目上右击显示: 2.选择显示日志,出现版本历史记录: 3.选 ...