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 a CCControlColourPicker which is an implementation of a colour picker for Cocos2D. It’s a very useful control tool to preview, select and test color values.

CCControlColourPicker

A CCControlColourPicker is composed of several elements as shown below:

These components are:

A hue background sprite which represents the color wheel
A couple tint background/tint overlay sprites for the tint/shade representation
an arrow sprite to allow you to represent a direction (optional)
2 pickers sprite; one to select the hue and the other to select the tint/shade

The hue picker allow you to choose the “degree” of the color while the tint picker let you to choose the lightness/saturation.

In the next section we are going to talk about the code and more specifically how to create a CCControlColourPicker, how it works and its possible configurations.

Default Behavior

To create a colour picker you have to defines its main components as following:

// Create a colour picker
CCControlColourPicker *colourPicker = [CCControlColourPicker colourPickerWithHueFile:@"hueBackground.png"
                                                                          tintBackgroundFile:@"tintBackground.png"
                                                                             tintOverlayFile:@"tintOverlay.png"
                                                                                  pickerFile:@"picker.png"];

By default the chosen color is set to the black. You can find the assets into the examples on the github repository.

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
[colourPicker addTarget:self action:@selector(valueChanged:) forControlEvents:CCControlEventValueChanged];
- (void)valueChanged:(CCControlColourPicker *)sender
{
   NSLog(@"Color value = #%02X%02X%02X", sender.color.r, sender.color.g, sender.color.b);	
}

// Second possibility: using blocks
[colourPicker setBlock:^(CCControlColourPicker *sender, CCControlEvent event)
 {
    NSLog(@"Color value = #%02X%02X%02X", sender.color.r, sender.color.g, sender.color.b);          
 } forControlEvents:CCControlEventValueChanged];

For the colour pickers 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 have seen the main functions of the CCControlCOlourPicker we are going to talk about its own properties.

Properties

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

arrow: a CCSprite to “create” a visual attachment to another user interface
arrowDirection: defines the position/orientation/direction of the arrow; you can choose between the top/bottom/left/right directions

Where To Go From Here?

To conclude, you can see that the CCControlColourPicker is pretty easy to work with. It can be very useful into drawing application like Sketchshare which uses this component.

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 or the component, don’t hesitate to post a comment!