Question

I really tried everything:
stackoverflow, google, github, cocos2d, everything.
Didn’t find anything helpful to create a custom slider that looks nice in a GAME, I successfully added a normal UISlider and changed it properties a bit, like maximumValueImage an so on… but it is awful.
PLEASE HELP

Answer 1

If your referring to the “speed” bar in TrainYard, that could be easily achieved by using “state” images for “Press” and “Normal” (like you would a regular button) and then setting a simple “background” image. It’s all in the graphics, more or less.

Generally speaking, the code would simply check to see if a touch was on the “button” and then would “lock” the Y axis and have the X axis follow the movement. Once the touch is “off the button” by a “factor” in either X or Y you would simply “release” (don’t release when the touch leaves the button at first, give them a window to touch the button that fits it, but give them a much larger window for “releasing” so the “slide” can feel more natural and not require absolute accuracy along the X axis).

If your “slider button” at “0” is positioned at ccp(25, 15) in relation to the background, and is positioned at ccp(100, 15) at “100” then you you would use the following to determine the “current value” based on the “slider buttons” current position:

// constants
#define SLIDER_MIN   0.0f;
#define SLIDER_MIN_X 25.0f;
#define SLIDER_MAX   100.0f;
#define SLIDER_MAX_X 100.0f;
#define SLIDER_TICKS (SLIDER_MAX_X - SLIDER_MIN_X);
#define SLIDER_RATIO (SLIDER_TICKS / SLIDER_MAX)

// sliderButton should be a child of a node containing the background
// it's X/Y should be relative to that parent, and the "slider bar" should
// either be the parent or be attached to the parent in the same way

// assume: sliderButton.position.x = 63
float sliderCurrent = sliderButton.position.x - SLIDER_MIN_X;
// sliderCurrent = 38
float currentValue = sliderCurrent / SLIDER_RATIO;

This results in the following:

SLIDER_TICKS = 100 - 25;
// SLIDER_TICKS = 75
SLIDER_RATIO = 75 / 100;
// SLIDER_RATION = .75
sliderCurrent = 63 - 25;
// sliderCurrent = 38
currentValue = 38 / .75
// currentValue = 50.66666666667

You can then choice to ceil() or floor() this value to get a whole number, or you could just use the value returned (depends on your logic really).

My suggestion would be to design your artwork so that your “50%” mark is “dead on”. In other words, when you player puts the slider at the 50% section you are able to get a value of “50.0” back from the above code without using ceil() or floor().

But this is entirely graphic driven … the “press” and “normal” states of the slider button, and the artwork that the “slider button” slides on (the ‘background’) are entirely up to you.

NOTE: lock the X axis to go no further left or right than is appropriate for your artwork, and lock the Y axis completely, as mention already.