Scrollview in Spritekit using Swift Programmatically (no storyboard)

Question

So I'm hoping to learn about making a scrollview of icons (kinda like a menu) in Spritekit, using Swift. I can't find any good resources or tutorials that don't charge.

I have my basic app set up with a ViewController and my scene. I'm hoping to have a scrollview that's say 2 or 3 times longer than the height of the screen, where I can scroll up and down and view different icons.

I hope this would be a good implementation, so I can programmatically set all the icons using x/y coordinates.

My viewdidLoad:

override func didMoveToView(view: SKView) {
    /* Setup your scene here */

    addChild(worldNode)

    //create Scrollview

    //for loop to adding icons from top to bottom of scrollview
    //name sprites

    //use touch location so allow sprites to be clickable
    //will just adjust alpha of icon for testing purposes later
}

This is really all I'm looking at achieving at the moment, if you can imagine, something like this:

Some of the questions that I have seen here seem to go in far more detail than I imagine I need, and are too complex for me at this stage, or they are not in swift...

How can I include a scrollview? Thank you in advance :)

score 3 · Answer 1 · answered Feb 24 '16 at 15:54

If your entire UI is a scene built with SpriteKit, you may want to consider building it as if it were a scrolling scene with a camera. Here's an example in a gameplay context

Basically it could work like this:

var sceneCam: SKCameraNode! //declare your camera variable in your scene class

Then, in your didMoveToView function:

sceneCam = SKCameraNode() //initialize your camera
//scaleAsPoint lets you zoom the camera in and out
sceneCam.scaleAsPoint = CGPoint(x: 0.25, y: 0.25) 

camera = sceneCam  //set the scene's camera
addChild(sceneCam) //add camera to scene

//position the camera on the scene.
sceneCam.position = CGPoint(x: frame.center.x, y: frame.center.y)

Now, in your touchesMoved gesture handler, when you detect the pan, you can adjust the camera position to match the pan gesture translation.

override func touchesMoved(touches: NSSet, withEvent event: UIEvent) {
  let touch = touches.anyObject() as UITouch
  let positionInScene = touch.locationInNode(self)
  let previousPosition = touch.previousLocationInNode(self)
  let translation = CGPoint(x: positionInScene.x - previousPosition.x, y: positionInScene.y - previousPosition.y)

  sceneCam.position = CGPoint(x: sceneCam.position.x - translation.x, y: sceneCam.position.y - translation.y)
}

The other crucial part of the setup is just to make your scene the right size for your menu. This is a similar concept to your content size on a scrollview. You might also have some work to do to implement paging or similar UIScrollView features if you desire those. But if you just need a simple scrolling view, you could do it with a camera.

If you ONLY want UIKit elements on this view, it should probably just be it's own VC without a scene. You could even create this menu view controller and place it in a container on your game scene - that way you'd be using only UIKit components in your menu vc, but you can still use it in a SpriteKit setting.

Scrollview in Spritekit using Swift Programmatically (no storyboard)

1 Answers1