Horizontal scrolling in SpriteKit (vs. a viewcontroller)

Question

I'm a little confused about the right way to approach this:

In my game, I allow the player to choose from 5 areas to play. An area is nothing more than a rectangle on a screen with the % of your completion in that area. The entire list is centered and looks good.

..Eventually there will be more areas but I don't want them to be on multiple rows (I'd like the player to swipe to scroll through them).

To date, all of the features of my game have been cone using SpriteKit (I only have one view controller, and I don't use it other than to present all my SKScenes in).

To achieve the desired functionality above, do I need to now introduce a view controller with a UICollectionView?

I'd rather stay consistent and only use SKView-related code, but would I essentially be recreating a UICollectionView by allowing for swiping/scrolling? Could anyone recommend a way to do this in SpriteKit or would you say this is generally a bad idea?

Thanks so much!

Answer 1

To do this purely in SpriteKit you essentially create a moveableNode and add all your menu stuff to that node and than you move that node in touchesMoved. You would have to keep track of its position and fiddle with the speed etc.

https://codedump.io/share/etvt4SwQI6iR/1/how-to-create-a-vertical-scrolling-menu-in-spritekit

I think this kind of menu is the rare occasion where it is actually better to use UIKit in SpriteKit, such as UIScrollViews or UICollectionViews.

Trying to replicate them in SpriteKit is a bit tricky, requires some extra code and also doesnt give you the nice scrolling/bounce effect.

You can create a UIColletionView in Spritekit if thats what you are looking for, you just need to subclass. I am using one for my game I am working on as the level select screen.

Create a new swift file

class CustomCollectionView: UICollectionView {

// MARK: - Init
init(frame: CGRect) {
    super.init(frame: frame)

    /// set up
    backgroundColor = UIColor.clearColor()
    #if os(iOS)
    pagingEnabled = true
    #endif
    self.frame = frame
    delegate = self
    dataSource = self
    indicatorStyle = .White
    scrollEnabled = true
    canCancelContentTouches = false

    registerClass... // register your cells
 }

// MARK: - Delegates
extension CustomCollectionView: UICollectionViewDataSource {

func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
    return 5
}

func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 8
}

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
 .......
 }

Then in your SKScenes you can add the collection View

  weak var collectionView: CustomCollectionView!

  collectionView = CustomCollectionView(frame: view!.frame)
  view!.addSubview(collectionView)

You will have to read some tutorials so you can get comfortable with UICollectionView, like how to create custom cells and general setUp etc. You will also have to ensure that you remove the collectionView when changing SKScenes

 collectionView.removeFromSuperview()

Is this what you are asking?

Answer 2

If you are looking to do this with SpriteKit code, just create an SKNode, place all your contents inside this SKNode, have it all laid out the way you would expect it to be if you had the visual space to see everything, and just move the node's position based on your intended direction. (In your case, you want to move the SKNodes x position)

Then just use the swipe gesture to capture the swipe, and write a little code to handle how you want the scrolling to happen. I am not too familiar with how UICollectionView's scroll so I can't give you an an answer on how to make it feel the same way.