cocos2dx3.0進度條的簡析

     可以說，進度條是遊戲中特別常用的一個控件，大部分遊戲都會需要用到資源加載條，技能道具的cd，或者是時間條。最近特別喜歡看底層，自我感覺底層是一個讓人熟悉整個框架的特別好的方式，這次就來看下進度條的底層，感受一下。

class CC_DLL ProgressTimer : public Node
#ifdef EMSCRIPTEN
, public GLBufferedNode
#endif // EMSCRIPTEN
{
public:
    /** Types of progress
     @since v0.99.1
     */
    enum class Type//進度條類型枚舉，顧名思義，radial是圓形增減的進度條，bar是單方向增減的進度條
    {
        /// Radial Counter-Clockwise
        RADIAL,
        /// Bar
        BAR,
    };
    
    /** Creates a progress timer with the sprite as the shape the timer goes through */
    static ProgressTimer* create(Sprite* sp);//通過精靈去創建該對象

    /** Change the percentage to change progress. */
    inline Type getType() const { return _type; }//返回進度條類型

    /** Percentages are from 0 to 100 */
    inline float getPercentage() const {return _percentage; }//返回當前顯示部分的百分值

    /** The image to show the progress percentage, retain */
    inline Sprite* getSprite() const { return _sprite; }
   //設置當前顯示部分的百分值，精靈，類型
   void setPercentage(float percentage); 
   void setSprite(Sprite *sprite); 
   void setType(Type type); 
/** * @js setReverseDirection * @lua setReverseDirection */
    void setReverseProgress(bool reverse);//設置進度條的方向，圓形增減類型有效，設置順時針和逆時針
   inline bool isReverseDirection() { return _reverseDirection; };
   inline void setReverseDirection(bool value) { _reverseDirection = value; };
/** * Midpoint is used to modify the progress start position.
* If you're using radials type then the midpoint changes the center point
 * If you're using bar type the the midpoint changes the bar growth
* it expands from the center but clamps to the sprites edge so: 
* you want a left to right then set the midpoint all the way to Point(0,y)
* you want a right to left then set the midpoint all the way to Point(1,y) 
* you want a bottom to top then set the midpoint all the way to Point(x,0)
* you want a top to bottom then set the midpoint all the way to Point(x,1) */
    /**
     根據註釋可知，setmidPoint是設置進度條的圓心點，即開始位置，默認都是圖片的中心位置，如果是圓形的，那麼改變中心點，如果是bar型的，那麼改變的是它的增長點
    */
        void setMidpoint(const Point& point);
 /** Returns the Midpoint */ Point getMidpoint() const; /** * This allows the bar type to move the component at a specific rate * Set the component to 0 to make sure it stays at 100%. * For example you want a left to right bar but not have the height stay 100% * Set the rate to be Point(0,1); and set the midpoint to = Point(0,.5f); */
      /**根據註釋可知，BarChangeRate是設置進度條方向，如果是圓形的，好像不用設置，如果是bar型的，那麼改變的是它的增減方向，例如Point(0,1)表示從下到上，Point（1,0）表示的是從左到右，（1，1）表示四周往中間，這些都是默認的midpoint，此時都是中心點，如果要從上到下，那麼設置barchangerate爲（0，1），設置midpoint爲（0，0），從右到左亦然。
    */
    inline void setBarChangeRate(const Point& barChangeRate ) { _barChangeRate = barChangeRate; }
 /** Returns the BarChangeRate */ 
      inline Point getBarChangeRate() const { return _barChangeRate; } 
      virtual void draw(Renderer *renderer, const kmMat4 &transform, bool transformUpdated) override;
      virtual void setAnchorPoint(const Point& anchorPoint) override; 
      virtual void setColor(const Color3B &color) override;
      virtual const Color3B& getColor() const override;
      virtual void setOpacity(GLubyte opacity) override;
      virtual GLubyte getOpacity() const override;
 CC_CONSTRUCTOR_ACCESS: /** * @js ctor */ ProgressTimer(); /** * @js NA * @lua NA */
      virtual ~ProgressTimer();
 /** Initializes a progress timer with the sprite as the shape the timer goes through */
       bool initWithSprite(Sprite* sp);
 protected: 
      void onDraw(const kmMat4 &transform, bool transformUpdated); 
      Tex2F textureCoordFromAlphaPoint(Point alpha);
      Vertex2F vertexFromAlphaPoint(Point alpha); 
void updateProgress(void);
 void updateBar(void);
 void updateRadial(void);
 virtual void updateColor(void) override; 
Point boundaryTexCoord(char index);
 Type _type;
 Point _midpoint;
 Point _barChangeRate; 
float _percentage;
 Sprite *_sprite;
 int _vertexDataCount;
 V2F_C4B_T2F *_vertexData;
 CustomCommand _customCommand;
 bool _reverseDirection;
private:
 CC_DISALLOW_COPY_AND_ASSIGN(ProgressTimer);};

大致的參數也已經寫完，然後分別來兩種情況的例子：

從上到下bar類型

 //time's background
    spritetime1=Sprite::create("biao1.png");
    spritetime1->setAnchorPoint(Point(0,1));
    spritetime1->setPosition(Point(WinRect::LeftBottom().x+5+10, WinRect::Top().y-3-10-3));
    this->addChild(spritetime1, 6);
    //time's value
    auto spritetime2=Sprite::create("biao2.png");
    progress=ProgressTimer::create(spritetime2);
    progress->setAnchorPoint(Point(0,1));
    progress->setType(cocos2d::ProgressTimer::Type::BAR);
    progress->setPosition(Point(WinRect::LeftBottom().x+6+10, WinRect::Top().y-3-13-3));
    //set began Point
    progress->setMidpoint(Point(0,0));
    progress->setBarChangeRate(Point(0,1));
    progress->setPercentage(100);//value
    this->addChild(progress,7);
//顯示當前時間的label，可忽略
    Myinterface::getInstance()->setTime(m_itime);
    auto str = __String::createWithFormat("%f",m_itime);
    numsTTF=Label::createWithSystemFont("0", "Thonburi", 24);
    numsTTF->setString(str->getCString());
    numsTTF->setAnchorPoint(Point(0,1));
    numsTTF->setPosition(Point(WinRect::LeftBottom().x+150,WinRect::Top().y-15-10));
    numsTTF->setColor(Color3B::BLACK);
    this->addChild(numsTTF, 8);
    numsTTF->setVisible(true);

順時針radial類型：

Sprite*sprite;
    sprite=Sprite::createWithSpriteFrameName("black.png");
    auto boomprogress=ProgressTimer::create(sprite);
    boomprogress->setTag(type);
    boomprogress->setType(cocos2d::ProgressTimer::Type::RADIAL);
    boomprogress->setAnchorPoint(Point(0.5,0.5));
    boomprogress->setPosition(p);
    this->addChild(boomprogress, 7);
    boomprogress->setReverseProgress(true);
    //action
    auto to = ProgressFromTo::create(10, 100, 0);//十秒內從100走到0
    auto pCall_N = CallFuncN::create(CC_CALLBACK_1(gameScene::maskcallback, this));//走完之後來個回調函數，這裏我是用來當做技能cd
    auto pSequeue = Sequence::create(to,pCall_N,NULL);
    boomprogress->runAction(pSequeue);