This is a short tutorial that show how to make a slider. I have used the same slider in some of my games for "unlocking" the screen and as an alternative to a "Play Again" button. But it is really only your imagination setting the limits to what the slider should do after the user has slid it into position.
This is what the slider will look like. There are two background images, one that says "slide to play again" and one that says "slide to unlock":
There are two sprites a slider and a background. The slider has two instance variables on it:
The background doesn't have any instance variables but it does have two extra imagepoints:
- imagepoint1 = start position of the slider
- imagepoint2 = end position of the slider
With this setup we can scale the slider and even accidentally miss-align the slider with the background and everything will still work like it should.
There are two functions:
InitSlider is called "On start of layout" and sets up the initial parameters.
First it sets the position of the slider to imagepoint1 of the background and then it sets the sliderMin and sliderMax to the x position of the backgrounds imagepoint 1 and 2.
OnSliderComplete is called once when the slider is slid to it's correct position. In this example I've set it up so that it plays a "lock" sound and sets the slider to the correct position. In this function you could for example add a reset global variables and Layout restart.
There are a few things that we want from the slider:
1. it should only be able to move it between imagepoint1 and imagepoint2 on the background.
2. it should only move horizontally
3. if we release it before we complete the slide it should move back to the start smoothly.
4. it should be scale-able
5. we only want it to work if it is visible
This code handles all the above cases and is documented in the code it self.
If you like the slider you can use it in any project you want, commercial or not. All the images and the sound is free to use. It is of course always fun with credit but it's not needed.