CCControlExtension: the Switches

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 CCControlSwitch which is an implementation of a switch for Cocos2D. It is useful to create and manage On/Off buttons, like for example, in the option menus for volume as example. As with CCControlSlider, when the user manipulates the switch control (“flips” it) an UIControlEventValueChanged event is generated.


CCControlSwitch is composed of several elements as shown below:


These components are:

  • A on sprite which represents the On state background
  • A off sprite for the Off state background
  • A on label for the On state title
  • A off label for the Off state title
  • A mask which is the “main” component of the CCControlSwitch. The mask will display only what lies in its non-transparent pixels. E.g when the off sprite and label are out of the mask they are not displayed; we can only see the on sprite and label. It creates the effect of switching
  • thumb sprite which show the state of the switch

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

Default Behavior

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

// Create a switch
CCControlSwitch *ccswitch = [CCControlSwitch switchWithMaskFile:@"switch-mask.png"

By default when you create a switch its internal state is set to ON. Now, we are going to see how retrieve the values of the switch 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
[ccswitch addTarget:self action:@selector(valueChanged:) forControlEvents:CCControlEventValueChanged];
- (void)valueChanged:(CCControlSwitch *)sender
   NSLog(@"Switch value = %d", [sender isOn]);	

// Second possibility: using blocks
[ccswitch setBlock:^(CCControlSwitch *sender, CCControlEvent event)
    NSLog(@"Switch value = %d", [sender isOn]);            
 } forControlEvents:CCControlEventValueChanged];

For the switches you need to listen to the CCControlEventValueChanged event to track its on/off state. But as you can see, with the help of the CCControl API it is pretty simple.

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


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

  • on: contains the current state of the switch (you can animating the change of the state by calling the setOn:animated: method anyway)
  • onThumbTintColor: defines the color used to tint the appearance of the thumb when the switch is pushed:

Tint Thumb Color

Where To Go From Here?

To conclude the CCControlSwitch is very similar to the UISwitch class (from CocoaTouch). It can be useful into option menus to activate/deactivate options for example.

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!

1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 4.33 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.

  1. tcg · March 13, 2013

    Very nice.

    Two things I noticed are that the mask is drawn y-flipped and there is no way to provide a static shade for the on/off sprites. If you look at the Apple version, there is a inner shadow that doesn’t move with the left/right action of the switch.

  2. szx · March 13, 2013

    Nice guide. I used this switch in my own application for my option menu.
    However, I have an issue on the mask,on and off image during app run. Only the thumb image can be seen.
    Image files are already in the resources folder.
    Can it be due to the CocosBuilder scene which I used?
    Anyone encounters such a problem?