Cocos2dx BASICS (23) -- progress bar ccprogresstimer

[Nagging]

Hey, everyone around me is working on cocos2dx 3. X, and I am still using 2.2.3. No way. After all, there are very few online 3. x tutorials. I will switch to 3. X for my classmates, so I won't ask where I am. 650) This. width = 650; "src =" http://img.baidu.com/hi/face/ I _f07.gif "alt =" I _f07.gif "/>

This section describes the progress bar.CcprogresstimerI believe everyone will be familiar with it. For example, the Progress displayed during software installation, the percentage of HP and MP characters displayed in the game.

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M00/47/D6/wKiom1QAaMigHvIAAAA8Bk7ou30380.jpg "Title =" 1.jpg" alt = "wkiom1qaamighviaa8bk7ou302.16.jpg"/>

[Thank you]

Http://gl.paea.cn/contents/2260d48c5e2bc83d.html

(That's right. It's the big guy again ...)

[Ccprogresstimer]

1. Progress action ccprogressto and ccprogressfromto

Before explaining the progress bar ccprogresstimer, let's talk about two classification classes that have a semi-wool relationship with the progress bar:

(1)Ccprogressto(2)Ccprogressfromto

Why is it not described in the previous basic action ccaction chapter, but here? This is because these two actions are only for ccprogresstimer and are useless to other ccnode subclasses (such as ccsprite.

From the two actions, we can also see their usefulness? The progress of the progress bar changes from a % to B %.

The usage is as follows:

/// Changes from 0% to the specified progress in a few seconds. ccprogressto: Create ('time', 'changed to a few percent '); // changes from a % progress to B % progress within several seconds ccprogressfromto: Create ('time', '%', 'change to % ');//

2. ccprogresstimer

Ccprogresstimer is to take a ccsprite sprite image as the progress bar, and then display/hide some areas of the image based on a percentage attribute to display the progress graphically.

There are two types of progress bars: Slice progress bars and bar progress bars.Default anchor (0.5, 0.5 ).

Common Operations are as follows:

(1) Creation Method

(2) set the sprite image, set the progress value, and set the style

(3) set the center position at the beginning and set the ratio for progress bars (the two are abstract and need to be explained separately)

Two functions are comparatively abstract:Setmidpoint,Setbarchangerate. Because the language organization capability is too weak, I will illustrate it later with an image. 650) This. width = 650; "src =" http://img.baidu.com/hi/jx2/j_0008.gif "alt =" j_0008.gif "/>

// Class ccprogresstimer: Public ccnodergba {/*** create Method * // use the sprite image as the progress bar ccprogresstimer: Create (ccsprite * SP ); /*** property settings * setsprite, setpercentage, settype * // set the sprite image void setsprite (ccsprite * psprite) used by the progress bar; ccsprite * getsprite (); // set the progress score to [0,100] void setpercentage (float fpercentage); float getpercentage (); // set the progress bar style // kccprogresstimertyperadial slice progress timer // kccprogresstimertypebar bar progress timer void settype (CC Progresstimertype type); ccprogresstimertype GetType (); // reverse progress display // bar: 100 to 0. // Sector: false clockwise, true void setreverseprogress (bool reverse);/*** progress bar setting * setmidpoint, setbarchangerate * // set the center position at the start of the progress bar, value Range: [0, 1] (default image center point CCP (0.5, 0.5) void setmidpoint (ccpoint); ccpoint getmidpoint (); // void setbarchangerate (ccpoint); ccpoint getbarchangerate ();/*** parent class inherits * setanchorpoint, setcolor, setopacity * // set the anchor void setanchorpoint (ccpoint anchorpoint); // set the color virtual void setcolor (const cccolor3b & color); Virtual const cccolor3b & getcolor () const; // sets the transparency virtual void setopacity (glubyte opacity); Virtual glubyte getopacity () const ;};//

3. setmidpoint

SetmidpointIs used to set the start center position of the progress bar.

(1) For the sector progress bar: equivalent to the center of the circle, from 0 to 100, slowly expand the sector.

(2) For bar progress bars: It is equivalent to spreading from a point to both sides.

Let's take a look at the figure. The language expression is limited: 650) This. width = 650; "src =" http://img.baidu.com/hi/face/ I _f34.gif "style =" white-space: normal; "alt =" I _f34.gif "/>

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M01/47/D7/wKiom1QAj2XwyZM8AADTdPtSR14736.jpg "Title =" qq 40829222622.jpg "alt =" wkiom1qaj2xwyzm8aadtdptsr14736.jpg "/>

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M01/47/D9/wKioL1QAkeCjtSrDAADixBgLJx0617.jpg "Title =" qq 40829223436.jpg "alt =" wkiol1qakecjtsrdaadixbgljx0617.jpg "/>

3. setbarchangerate

SetbarchangerateIt is used to set the proportion of the picture occupied by the bar progress bar, which is invalid for the slice.

That is to say, take out the proportion of the image as the progress bar. Let's take a look at the image. The language expression is limited. 650) This. width = 650; "src =" http://img.baidu.com/hi/face/ I _f34.gif "alt =" I _f34.gif "/>

In the three groups below,Yellow AreaIndicates the image area that has been displayed from the beginning. WhileCCP (x, y): Indicates that the width and X ratio of the image are not displayed, and the height and Y ratio of the image are not displayed. It is used as the display progress bar.

Yes,"Progress score per hundred"It is the portion of the progress bar that is used to display the remaining CCP (x, y). The displayed percentage is not the percentage of the entire picture.

The common method is as follows:

// Setbarchangerate (CCP (): // only the X axis changes. (The start X axis is not displayed) setbarchangerate (CCP (): // only the Y axis changes. (The start y axis is not displayed) setbarchangerate (CCP (): // X, the Y axis changes. (Start X, Y axis are not displayed) setbarchangerate (CCP (0.5, 0.5): // X, Y axis are changed. (Both start X and Y axes show half )//

Comparison charts of three groups of images:

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M01/47/D8/wKiom1QAu42QcOMWAADgH_Vk2wQ083.jpg "style =" float: none; "Title =" 1.jpg" alt = "wkiom1qau42qcomwaadgh_vk2wq083.jpg"/>

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M01/47/D8/wKiom1QAu42x3TgUAADrCmZIRIo553.jpg "style =" float: none; "Title =" 2.jpg" alt = "wkiom1qau42x3tguaadrcmzirio553.jpg"/>

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M00/47/DA/wKioL1QAvKXS0UhOAADd5L9f4UY770.jpg "style =" float: none; "Title =" 3.jpg" alt = "wkiol1qavkxs0uhoaadd5l9f4uy770.jpg"/>

4. common progress bars

From the above explanation, we can see that the display method of the progress bar is mainly affected by three settings:

(1)Settype: Slice and bar progress bar.

(2)Setmidpoint: Center location.

(3)Setbarchangerate: Used as the percentage of images displayed on the bar progress bar.

The setting of (1) determines the type of the progress bar. The combination of (2) (3) can be displayed in different ways.

Commonly used methods: (2) (3:

/// When the bar progress bar style is: setbarchangerate (CCP (0.5) CCP (): "display from right to left" CCP (, 0 ): "display from center to both sides" CCP (): "display from left to right" // when the bar progress bar style is: setbarchangerate (CCP ): "from top to bottom. "CCP (0, 0.5):" displayed from the center to both sides. CCP (0, 0): "display from bottom to top. "// When the bar progress bar style is setbarchangerate (CCP (0.5) CCP ():" X is displayed from left to right, and Y is displayed from top to bottom "CCP (0): "X is displayed from left to right, Y is displayed from middle to both sides" CCP (0.5): "X is displayed from right to left, and Y is displayed from bottom to top" CCP (, 0): "X is displayed from the center to both sides, Y is displayed from bottom to top" CCP (0.5): "X is displayed from left to right, and Y is displayed from bottom to top" CCP (0.5 ): "X is displayed from the middle to both sides, and Y is displayed from the middle to both sides" CCP (): "X is displayed from right to left, and Y is displayed from top to bottom "//

[Code practice]

(1) Resource image:

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M01/47/DA/wKioL1QAyayyXDWFAAAhgQ_6fQQ900.jpg "Title =" icon.png "alt =" wkiol1qayyxdwfaaahgq_6fqq900.jpg "/>

(2) create two types of progress bars: bars and slices.

And define the display mode of the progress bar.

/// Bar progress bar pro1ccsprite * Bg1 = ccsprite: Create ("icon.png"); ccprogresstimer * pro1 = ccprogresstimer: Create (Bg1 ); pro1-> setposition (CCP (130,100); this-> addchild (pro1); // bar, defining the progress bar mode: displays pro1-> settype (kccprogresstimertypebar) from right to left ); pro1-> setbarchangerate (CCP (1, 0); pro1-> setmidpoint (CCP (1, 0); // pro1-> setreverseprogress (true ); // reverse progress display // sector progress bar pro2ccsprite * bg2 = ccsprite: Create ("icon.png"); ccprogresstimer * pro2 = ccprogresstimer: Create (bg2 ); pro2-> setposition (CCP (350,100); this-> addchild (pro2); // sector, center CCP (0.3, 0.7) pro2-> settype (kccprogresstimertyperadial ); pro2-> setmidpoint (CCP (0.3, 0.7); // pro2-> setreverseprogress (true); // counterclockwise //

(3) create PROGRESS actions ccprogressto and ccprogressfromto.

And let pro1 and pro2 execute two Progress actions respectively.

/// Progress action ccprogressto * AC1 = ccprogressto: Create (2.0f, 100); ccprogressfromto * ac2 = ccprogressfromto: Create (2.0f, 30,100 ); pro1-> runaction (ccrepeatforever: Create (AC1); // within 2 seconds, from 0 to 100pro2-> runaction (ccrepeatforever: Create (ac2 )); // within 2 seconds, from 30 to 100 //

Running result:

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M02/47/D8/wKiom1QAxpOxJXdEAADyGBL49Dg110.gif "Title =" 1.gif" alt = "wkiom1qaxpoxjxdeaadygbl49dg110.gif"/>

Setreverseprogress ()

// Pro1-> setreverseprogress (true); // reverse progress display pro2-> setreverseprogress (true); // counterclockwise //

The result is as follows:

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M00/47/DA/wKioL1QAzcbiAzRCAA5jt8Ec5mQ825.gif "Title =" 2.gif" alt = "wkiol1qazcbiazrcaa5jt8ec5mq825.gif"/>

Summary:

For more information about how to display progress bars, see. 650) This. width = 650; "src =" http://img.baidu.com/hi/face/ I _f07.gif "alt =" I _f07.gif "/>

[Demo download]

Http://down.51cto.com/data/1868757

This article is from the "summer wind" blog, please be sure to keep this source http://shahdza.blog.51cto.com/2410787/1546707

Cocos2dx BASICS (23) -- progress bar ccprogresstimer