一、制作背景

如今非常多游戏或者应用须要评分,就是一般来说满分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. 如何判断Android手机当前是否联网?

    如果拟开发一个网络应用的程序,首先考虑是否接入网络,在Android手机中判断是否联网可以通过 ConnectivityManager 类的isAvailable()方法判断, 首先获取网络通讯类的实 ...

  2. Redis的Docker镜像

    原文地址:https://hub.docker.com/_/redis/ Pull Command docker pull redis Short Description Redis is an op ...

  3. AR_标准应收过账至总账基本操作(流程)

    2014-06-04 Created By BaoXinjian

  4. Workflow_工作流的基本元素(概念)

    2014-05-31 Created By BaoXinjian

  5. jdbc与odbc的差别,感悟,学习。。。

    什么是JDBC? JDBC, 全称为Java DataBase Connectivity standard, 它是一个面向对象的应用程序接口(API), 通过它可訪问各类关系数据库.JDBC也是jav ...

  6. POJ 3254 简单状压DP

    没什么可说的,入门级状压DP.直接撸掉 #include <iostream> #include <cstring> #include <cstdlib> #inc ...

  7. [转]HSpice仿真

    一.HSPICE基础知识Avant! Start-Hspice(现在属于Synopsys公司)是IC设计中最常使用的电路仿真工具,是目前业界使用最为广泛的IC设计工具,甚至可以说是事实上的标准.目前, ...

  8. mysql数据库以加索引方式提高性能

    数据库查询速率慢的情况下可以给对应的表加上对应的索引,能够有效的提高查询效率,mysql数据库添加索引的SQL入下: ALTER TABLE `table_name` ADD INDEX index_ ...

  9. Effective JavaScript Item 33 让构造函数不再依赖newkeyword

    本系列作为EffectiveJavaScript的读书笔记. 在将function当做构造函数使用时,须要确保该函数是通过newkeyword进行调用的. function User(name, pa ...

  10. mproxy: c 语言实现的一个最小的http代理,支持FQ

    https://github.com/examplecode/mproxy mproxy 使用说明 这是一个微型的http代理服务器实现,使用c语言实现,核心代码量不足500行,不依赖任何第三方的库( ...