CCControlExtension: the Steppers

Note: This post belongs to a long series whose summary is here and which aims to present you how to use the CCControl  library.

In this part we will see how to create and work with CCControlStepper which is an implementation of a stepper for Cocos2D. A stepper control provides a user interface for incrementing or decrementing a value. It displays two “buttons”, one with a minus (“–”) symbol and one with a plus (“+”) symbol.


CCControlStepper is composed of two elements as shown below:


These 2 components are:

  • the minus sprite to decrement the value
  • the plus sprite to increment the value

Default Behavior

The simplest way to create a stepper is to give the name of each components when you init it:

// Create a potentiometer
CCControlStepper *stepper = [CCControlStepper stepperWithMinusFile:@"minus.png"

By default when you create a stepper, the value is set to 0 and the step value is set to 1. It means that when you touch the minus or the plus sprite the value is decreased/increased to 1. Now, we are going to see how retrieve the values of the stepper by using methods provides by the CCControl class.

Working with Target-Action pairs

Like with all the CCControl’s components you have the possibility to listening to events with the help of the target-action pairs or with the help of blocks as shown below:

// Listening to changes of values by using the CCControlEventValueChanged event
// First possibility: using a target-action pair
[stepper addTarget:self action:@selector(valueChanged:) forControlEvents:CCControlEventValueChanged];
- (void)valueChanged:(CCControlStepper *)sender
   NSLog(@"Stepper value = %.02f", sender.value);	

// Second possibility: using blocks
[stepper setBlock:^(CCControlStepper *sender, CCControlEvent event)
    NSLog(@"Stepper value = %.02f", sender.value);            
 } forControlEvents:CCControlEventValueChanged];

For the steppers you need to listen to the CCControlEventValueChanged event to track its value. But as you can see, with the help of the CCControl API it is very easy.

Now we’ve seen the main functions of the CCControlStepper we are going to talk about its own properties.


The CCControlStepper is built with a set of properties which are listed below:

  • continuous: defines if the value must be displayed during the user interaction or at the end
  • autorepeatallows the component to update the value repeatedly while it is pressed or not
  • wraps: allows the component to loop the value (i.e incrementing beyond maximumValue sets value to minimumValue; likewise, decrementing below minimumValue sets value to maximumValue) or not
  • minimumValuedefines the minimum value that the stepper can have
  • maximumValuedefines the maximum value that the stepper can have
  • pushedTinitColordefines the color used to tint the appearance of the current component pushed:

Stepper Tint Color

Where To Go From Here?

To conclude the CCControlStepper is very similar to the UISteppers. It can be useful into some option menus for example and the class  is very easy to use.

You can find the code source and the examples on github and the API documentation hosted here.

If you have any comments or questions about this article, don’t hesitate to post a comment!

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5.00 out of 5)
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on RedditPin on Pinterest


Time limit is exhausted. Please reload CAPTCHA.