Implementing an SKNode Slider in Swift 4

First, a brief update. The game hinted at in the last post was intended to be something we could churn out in a couple of months, a simple side-scroller to provide the coding team with more and better experience using Swift and XCode. Then, the design team got involved. We are now projecting a release date of our level-based game sometime in late August or early September. A further hint: It involves chubby Boy Scouts and marshmallows. (At least we kept the graphics department out of it...what a bunch of buttholes.)

On to the code: One of the elements the design group insisted upon was a slider to control the speed and direction of the player. It quickly became apparent that a UISlider object wasn't going to be viable, for reasons that I won't go into here. Our best option was going to be a slider built as an SKNode. Apple, the source of all that is good in the world (some other world, in a galaxy far, far away) has provided the basic code for this, in the form of a slider class. It can be downloaded, as of this writing , at 

https://developer.apple.com/library/content/samplecode/scenekit-2017/Listings/Swift_Shared_UI_Slider_swift.html

It proved to be very simple to implement. Copy the code into a new Swift file (we called ours Slider.swift, same as Apple, though, of course, the name is entirely up to you and the needs of your app). Because we use the slider to vary our player's speed, we added a variable above the init() function:

var playerSpeed = 0

We changed the label position to fit our project (the default centers it in the screen), and cut the size of the circular slider from height to height/3. The slider fill color default is white, which we changed to blue, then moved the slider and background - the background is the thin line the round slider moves along -  to where we wanted them on the screen, based on where the label is located:

//Create background and slider
        background = SKSpriteNode(color: SKColor.white, size: CGSize(width: CGFloat(width),                       height: CGFloat(2)))
        slider = SKShapeNode(circleOfRadius: CGFloat(height/3))
        slider!.fillColor = SKColor.blue
        
        //Position slider and background
        background!.anchorPoint = CGPoint(x: CGFloat(0.0), y: CGFloat(0.5))
        slider!.position = CGPoint(x: CGFloat((label!.position.x + 1) + (background!.size.width / 2)), y:             CGFloat(-100.0))
        background!.position = CGPoint(x: CGFloat(label!.position.x + 1), y: CGFloat(-100.0))

The design people requested that the slider values range from -1000 to 0 to +1000. To get this, we added these lines to the iOS-specific code in the #if-#endif, in the touchesMoved function:

        let maxVal  = Int(1000)
        let userValue = Int(value * CGFloat(1000))
        playerSpeed = (2 * userValue) - maxVal

Prior to that, in the same function, we changed the y-value of the slider position to -100.0, to match the rest of our code for that value.

The last step to implementing the slider was to add a new function after touchesMoved, but still inside the #if-#endif. Our slider , once moved in either direction from the center, needs to snap back to the center and reset the slider value to 0. To do this, we override the touchesEnded function:

 override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        slider!.position = CGPoint(x: background!.position.x + (background!.size.width / 2), y:                          CGFloat(-100.0))
        let curVal = slider!.position.x + 224.0 //This is an offset you will need to experiment with
        playerSpeed = Int(curVal)
        setBackGroundColor(SKColor.white)
    }

Notice that we set the background color to white in this function. The touchesMoved function sets it to gray, so we return it to the default color.

Lastly, in your GameScene class, instantiate your slider class, passing in values for the width, height, and text label. Add the slider to your GameScene, probably attaching it to the camera:

self.camera!.addChild(slider)

And that's it! You'll have to add your own code for the behavior you want, but this creates the basic slider.