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

A 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"
                                                          plusFile:@"plus.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.

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
autorepeat: allows 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
minimumValue: defines the minimum value that the stepper can have
maximumValue: defines the maximum value that the stepper can have
pushedTinitColor: defines the color used to tint the appearance of the current component pushed:

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!