Learn how to make your own slider in cocos2d, using the BBSlider class. Here is a sample project which you can download. You can also download the BBSlider class itself.
Notification: Since I’ve made the tutorial I have updated the sample project and also BBSlider (the links above reference the updated versions). Now you can rotate and scale the slider as you please, it continuos to work. That means that you don’t have to specify if your slider is vertical or horizontal. Just make a horizontal slider, and if you want a vertical one, just rotate it 90 degrees.
I’ve also changed the BBSlider. The boolean isRolling is gone. It is always rolling! Instead I have introduced three callback functions called beginCall, moveCall and endCall, which give you maximal control of what the user does. You create the slider using a method that requires 6 parameters: delegate, selector, backgroundImage thumbImage, min and max. Once created you can tweak the slider with 5 different properties: value, leeway, offset, beginCall and endCall. Since BBSlider is a node, you can also change its position, rotate it, scale it and so on. For details look at the comments in BBSlider.h. If you have any idea how this can be made simpler or more user friendly, please comment.
Notification: The technique I’ve used for BBSlider (mainly delegate, selector and TargetedTouchDispatcher) can be used for other user interface elements like checkboxes, radio buttons, etc. For instance to make a check box you could use the BBCheckBox class. There is a checkbox sample project which shows how you can use it.
Thanks
This is great! I implemented it very easily, great work!
I did run into a problem when trying to put 2 sliders on 1 layer though. The second one seems to get all of the touches for both instances.
Any ideas around that?
Okay, I have another question. I am attempting to modify this class so that the value is accessible to external classes. I don’t know that there is a logical reason why I am modifying this class, but I struggle with communicating between objects… so I thought this would be a fun exercise. As I am reading the code, the
valueproperty does not get updated when the slider is moved… it only gets updated when thesetValuemethod is called (I logged thevalueproperty and saw it did not change unless thesetValuemethod was called. If I wanted to always store the most recent value in that property, I would need to make some modifications to make that happen… yes? Don’t tell me what they are… I want to see if I can do it myself. Just need to know if I am pointed in the right direction.Thanks for yet another fine tutorial! I have it working (move the slider, the value changes). I am struggling to get that value passed off to my game object. I am using the slider as a throttle in my controlLayer. When I log the slider value in my controlLayer, I see it changing correctly as I move the thumb knob. When I log it in my object, it is stuck at zero (where it starts) even when I move the thumb knob. I have a pointer to my controlLayer in my object. I am logging the value in my update method for my object, so it is “updating,” but not pulling a new value.
Not sure what I am doing wrong here.
Scratch that. I figured it out. I was trying to pull information from the control layer when I should have been pushing. All is well now!
Thats awesome tutorial bro..!! Really helped a lot.. with checkboxes..!!
Thanks a ton Bob..!
Pingback: List of Open Source Cocos2d Projects, Extensions and Code Snippets | iUridium
Great tutorial again! You make cocos2d learning easy… thanks Bob!
Yet another wonderful tutorial thanks so much! Can’t wait to make an Options menu now with my new and shiny custom sliders!