[IOS-Cocos2d game development 15] Detailed ccprogresstimer progress bar and modify the cocos2d source code to achieve "ideal" game progress bar!

Source: Internet
Author: User

Li huaming himiOriginal, reprinted must be explicitly noted:
Reprinted from[Heimi gamedev block]Link: http://www.himigame.com/iphone-cocos2d/491.html

Progress bars will inevitably be used in game development. For example, the CD time of some game skills will be used. cocos2d also encapsulates the progress bar, but it is not ideal, if you have used them, you should know about them. Today we will introduce two knowledge points: first, we will introduce how to use the progress bar ccprogresstimer in cocos2d; second, we will modify the ccprogresstimer source code in cocos2d, implement an ideal progress bar;

OK. First, let's learn how to use the ccprogresstimer progress bar in cocos2d:

It is very easy to use the progress bar in cocos2d. The code for creating the progress bar and adding it to the current layer is as follows. You can understand it at first glance:

 CCProgressTimer *ct=[CCProgressTimer progressWithFile:@"icon.png"];        ct.position=ccp( size.width /2 , size.height/2);         [self addChild:ct z:0 tag:90];

It's easy to create. If the impatient kids shoes just run your project right away, they will certainly not see the progress bar. Don't worry, it's right to see it;

The progress bar is encapsulated in cocos2d and has a maximum progress value of 100 and a minimum of 0 by default. Therefore, when you create a progress bar, the current progress is 0 by default, which is invisible;

The following two attributes are important to the two progress bars:

Ct. Percentage = 0; // current progress CT. type = kccprogresstimertypehorizontalbarlr; // display style of the progress bar

Percentage refers to the progress value of the current progress bar. to display a progress bar normally, percentage is required! If it is set to 0, the progress bar of a function that is constantly refreshed is always ++, And the progress bar function is implemented;

Here I will simply write down the Code:

1. First add [self scheduleupdate] In the init function;

2. Then add the following function: (this function is used to make the current progress continuously ++. If the value is greater than 100, the current progress value is restored to 0, so that the current progress value can be recycled)

-(void)update:(ccTime)himi{    CCProgressTimer*ct=(CCProgressTimer*)[self getChildByTag:90];     ct.percentage++;    if(ct.percentage>=100){        ct.percentage=0;    }}

The Type attribute is easy to understand, that is, the progress bar type. The following six display modes are encapsulated in cocos2d:

Lag, slice-clockwise form of kccprogresstimertyperadialcw, slice-clockwise form of lag, from left to right in the form of increment, from right to left in the form of kccprogresstimertypeverticalbarbt, from bottom to ascending form of lag, add from top down

In order to make the children's shoes more aware of the second point of knowledge to be discussed today, I will introduce these forms here. Let's take a look at them first:

Kccprogresstimertyperadialccw and kccprogresstimertyperadialcw styles such:

Kccprogresstimertypehorizontalbarlr and kccprogresstimertypehorizontalbarrl styles such:



Kccprogresstimertypeverticalbarbt and kccprogresstimertypeverticalbartb styles such:

 

OK. After briefly introducing the usage and style of the progress bar, Please carefully observe the three styles in 10 seconds !!!

The children's shoes may have seen some clues. Here we assume that we have a skill that requires CD time. If we adopt a progress bar, we need an image for this progress bar, we usually use the shadow as the progress to indicate the CD time and display it. For example, I use a translucent gray image as the progress bar and the following cocos2d icon is used as a skill! The style of the progress bar is selected from the bottom up)

You can observe carefully that the progress bar (gray block) increases counterclockwise. When the maximum progress value is 100, the Black Block will block the skill (icon chart ...... tragedy, Which is skill CD? Come back !!!!

Generally, after the skill CD time, all skill icons should be displayed. That is to say, the correct one is that the progress bar blocks all skill icons at 0, when the current progress is up to 100, the gray block that is blocked should not exist. This is correct. This is the opposite .....

The simplest solution is to initialize the current progress value of the progress bar by setting 100, and then reduce it continuously;

Of course, himi simply went to cocos2d to modify the ccprogresstimer source code:

First enter the ccprogresstimer. m source code of cocos2d, and then search for the following code:

float alpha = percentage_ / 100.f;

Then add the following code below:

    if(alpha != 0.f && alpha !=1.f)    {        alpha = 1.f-alpha;    }

Run the project directly as follows:

This is correct. When the current progress of the progress bar is 0, it overwrites the skill icon. When the current progress value of the progress bar is up to 100, all the skill icons are displayed; this is the correct skill CD!

Note: When playing games using the engine, kids shoes will certainly encounter some methods that cannot be provided by the engine at all, so we can directly modify the source code to solve the problem, rather than blindly following the engine, this can reflect the advantages of open-source engines. Hey;

 

Well, this article will introduce you here and continue to be busy ......

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.