cocos2dx-3.10 C++實(shí)現(xiàn)滾動(dòng)數(shù)字

更新時(shí)間：2020年09月18日 11:57:05 作者：琦琦安卓進(jìn)階

這篇文章主要為大家詳細(xì)介紹了cocos2dx-3.10 C++實(shí)現(xiàn)滾動(dòng)數(shù)字效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了cocos2dx-3.10 C++實(shí)現(xiàn)滾動(dòng)數(shù)字的具體代碼，供大家參考，具體內(nèi)容如下

NumberScroller.h

#ifndef _NUMBERSCROLLER_H_
#define _NUMBERSCROLLER_H_

#include "cocos2d.h"
USING_NS_CC;

/*
 這是一個(gè)數(shù)字滾動(dòng)切換控件
 更新方向:
 1.在規(guī)定時(shí)間運(yùn)動(dòng)完,速度在變化
 2.能指定字體表
 3.增加新的更新算法,確保運(yùn)動(dòng)到指定數(shù)時(shí)候可以及時(shí)完成
 4.添加能夠指定寬和高以及數(shù)字之間的間隔
*/
class NumberColumn : public Node{
private:
 NumberColumn();
public:
 static NumberColumn* create(int fontHight);
 void setNumber(int number,bool direction=true);
 void setTime(float time);
private:
 bool init(int fontHight);
 void update(float delta);
private:
 Node* m_numbers;  //當(dāng)前顯示節(jié)點(diǎn)
 int m_cur_num;   //當(dāng)前顯示數(shù)字
 int m_target_num;  //目標(biāo)顯示數(shù)組
 int m_fontHight;  //當(dāng)個(gè)字體高度

 float m_time;   //切換總時(shí)間

 float update_moveSum; //幾率在兩個(gè)數(shù)字更新期間移動(dòng)的距離
 float update_speed; //刷新一次的時(shí)間
};



class NumberScroller : public Node{
private:
 NumberScroller();
public:
 static NumberScroller* create(int length,int fontWidth,int fontHeight,int fontSpacing);
 void setTime(float time);
 void setNumber(int number);
 int getNumber();
private:
 bool init(int length, int fontWidth, int fontHeight, int fontSpacing);
private:
 Vector<NumberColumn*> m_columns; //存儲一共的列數(shù)
 int m_cur_num;      //當(dāng)前顯示數(shù)字
 int m_length;      //列數(shù)
 int m_time;       //切換總時(shí)間
 int m_fontWidth;     //字體寬度
 int m_fontHeight;     //字體高度
 int m_fontSpacing;     //字體間隔
 Node* m_visibleNode;    //當(dāng)前可視節(jié)點(diǎn)
};
#endif

NumberScroller.cpp

#include "NumberScroller.h"

NumberColumn::NumberColumn():
 m_cur_num(0),
 m_target_num(0),
 m_time(1.0f),
 update_moveSum(0),
 update_speed(0)
{

}

NumberColumn* NumberColumn::create(int fontHight){
 NumberColumn* ret = new NumberColumn();
 if (ret && ret->init(fontHight)){
  ret->autorelease();
  return ret;
 }
 CC_SAFE_DELETE(ret);
 return nullptr;
}

bool NumberColumn::init(int fontHight){
 if(!Node::init()) return false;
 m_numbers = Node::create();
 this->addChild(m_numbers);
 m_fontHight = fontHight;

 this->scheduleUpdate();

 //初始化一列0-9 共十個(gè)數(shù)字
 for(int i=0;i<10;i++){
  char str[2];
  str[0] = i + '0';
  str[1] = '\0';

  auto temp = Label::createWithBMFont("fonts/test.fnt", str);
  temp->setAnchorPoint(Point(0,0));
  temp->setPosition(Point(0, i * fontHight));
  m_numbers->addChild(temp);
 }
 //為了兼容不同方向的偏轉(zhuǎn)
 char str[2];
 str[0]='0';
 str[1]='\0'; //添加字符串結(jié)束符
 Label* temp = Label::createWithBMFont("fonts/test.fnt", str);
 temp->setAnchorPoint(Point(0,0));
 temp->setPosition(Point(0, 10 * fontHight));
 m_numbers->addChild(temp);

 return true;
}
void NumberColumn::setNumber(int number,bool direction){
 m_target_num = number;
 int delta = m_target_num - m_cur_num;   //計(jì)算數(shù)字間隔
 update_speed = (delta * m_fontHight / m_time); //v = s / t
}

void NumberColumn::setTime(float time){
 m_time = time;
}

void NumberColumn::update(float d){
 if(m_cur_num != m_target_num){ //如果當(dāng)前顯示的數(shù)字不等于目標(biāo)數(shù)字，即要開始滾動(dòng)
  float dis = update_speed * d; //每次調(diào)用update函數(shù)需要滾動(dòng)的距離等于update_speed 乘以 d （update_speed在setNumber函數(shù)中已經(jīng)算出） 
  m_numbers->setPositionY(m_numbers->getPositionY() - dis);//每次使整條向下移動(dòng)dis距離
  update_moveSum += dis;//update_moveSum 用于保存現(xiàn)在到底移動(dòng)了多少距離
  if (update_moveSum >= m_fontHight){ //如果現(xiàn)在已經(jīng)移動(dòng)了一個(gè)字大小的距離
   //每移動(dòng)一次累加1
   m_cur_num++;
   //對10求余是為了在每次達(dá)到10后從新開始新循環(huán)
   m_numbers->setPositionY(- (m_cur_num % 10) * m_fontHight); //負(fù)數(shù)表示向下移,標(biāo)準(zhǔn)對齊位置
   update_moveSum = 0; 
  }
 }
}

/*
********************************************************************************************************************************************
********************************************************************************************************************************************
*/

NumberScroller::NumberScroller():
 m_cur_num(0),
 m_length(0),
 m_time(1.0f)
{

}

NumberScroller* NumberScroller::create(int length, int fontWidth, int fontHeight, int fontSpacing){
 NumberScroller* ret = new NumberScroller();
 if (ret && ret->init(length, fontWidth, fontHeight,fontSpacing)){
  ret->autorelease();
  return ret;
 }
 CC_SAFE_DELETE(ret);
 return nullptr;
}

bool NumberScroller::init(int length, int fontWidth, int fontHeight, int fontSpacing){
 if(!Node::init()) return false;
 m_length = length;
 m_fontWidth = fontWidth;
 m_fontHeight = fontHeight;
 m_fontSpacing = fontSpacing;
 m_visibleNode = Node::create();

 //排好length行數(shù)字
 //該demo下為左對齊
 for(int i=0;i<length;i++){
  NumberColumn* column = NumberColumn::create(fontHeight);
  m_columns.pushBack(column);
  column->setAnchorPoint(Point(0,0));  //錨點(diǎn)設(shè)置為0是為了后面設(shè)置遮罩層
  column->setPosition(i * (fontWidth + fontSpacing), 0);
  column->setTime(m_time);  //設(shè)置默認(rèn)運(yùn)動(dòng)時(shí)間1S
  m_visibleNode->addChild(column);
 }
 /*設(shè)置遮罩層*/
 ClippingNode* cliper = ClippingNode::create();
 //創(chuàng)建模板
 DrawNode* drawNode = DrawNode::create();
 Point points[] = {
  Point(getPosition()),
  Point(getPositionX(),getPositionY() + m_fontHeight),
  Point(getPositionX() + m_length * m_fontHeight, getPositionY() + m_fontHeight), 
  Point(getPositionX() + m_length * m_fontHeight, getPositionY()) 
 };
 drawNode->drawPolygon(points,4,Color4F(0,0,0,1),0,Color4F(0,0,0,1));
 //設(shè)置模板
 cliper->setStencil(drawNode);
 cliper->addChild(m_visibleNode);
 this->addChild(cliper);
 //不添加遮罩層的方法
 //this->addChild(m_visibleNode);
}

void NumberScroller::setNumber(int number){
 if(number > m_cur_num){
  m_cur_num = number;

  for(int i=0;i<m_length;i++){
   m_columns.at(m_length - i -1)->setNumber(number);
   number /= 10;
  }  
 }
}

int NumberScroller::getNumber(){
 return m_cur_num;
}

//對外開放設(shè)置時(shí)間的接口
void NumberScroller::setTime(float time){
 m_time = time;
 for(int i=0;i<m_length;i++){
  m_columns.at(i)->setTime(time);
 } 
}

使用方法

auto numberScroller = NumberScroller::create(1,15,33,10);//這個(gè)字體寬度根據(jù)fnt 文件表的相關(guān)參數(shù)計(jì)算
 numberScroller->setPosition(Director::getInstance()->getVisibleSize().width / 2, Director::getInstance()->getVisibleSize().height / 2);

 this->addChild(numberScroller);
 scheduleUpdate();
 Director::getInstance()->getScheduler()->schedule([=](float){
   CountNum = CountNum + 1;
   numberScroller->setNumber(CountNum);
 }, this, 1.0f, false, "countDown");

實(shí)現(xiàn)效果：