cocos2dx3.0进度条的简析

cocos2dx3.0进度条的简析,第1张

概述     可以说,进度条是游戏中特别常用的一个控件,大部分游戏都会需要用到资源加载条,技能道具的cd,或者是时间条。最近特别喜欢看底层,自我感觉底层是一个让人熟悉整个框架的特别好的方式,这次就来看下进度条的底层,感受一下。 class CC_DLL ProgressTimer : public Node#ifdef EMSCRIPTEN, public GLBufferedNode#endi

可以说,进度条是游戏中特别常用的一个控件,大部分游戏都会需要用到资源加载条,技能道具的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);
总结

以上是内存溢出为你收集整理的cocos2dx3.0进度条的简析全部内容,希望文章能够帮你解决cocos2dx3.0进度条的简析所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/1041963.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-24
下一篇2022-05-24

发表评论

登录后才能评论

评论列表(0条)

    保存