4

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!

NullHypothesis
  • 4,286
  • 6
  • 37
  • 79
  • The best approach would be a collection view but that is not in the SpriteKit framework at all its just apart of foundation. – Dan Leonard Feb 21 '16 at 18:10

2 Answers2

3

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?

Crashalot
  • 33,605
  • 61
  • 269
  • 439
crashoverride777
  • 10,581
  • 2
  • 32
  • 56
  • This is *exactly* what I was asking but I had a question - how do I add SKNodes or interact with my nodes? I have a factory class I created that returns the # of items contextually. So my collectionView can just query the factory to get this Array (or count). But how do I render the items inside the collectionView? Thanks! – NullHypothesis Feb 23 '16 at 01:30
  • You will have to create a custom cell and just add your labels, images etc to show in the collection view. This is a good read on how to do that http://randexdev.com/2014/08/uicollectionviewcell/ – crashoverride777 Feb 23 '16 at 13:56
  • This code does not make any sense, you are not applying anything SpriteKit related, you are just adding a CollectionView to the UIView portion of SKView, your scene will still only be added to the SKView itself, and any nodes inside of it stay with the scene. – Knight0fDragon Feb 23 '16 at 16:19
  • Why does this not make sense?. I was simply showing that it is possible to use a collection view on SpriteKit fairly easily. I am using this exact code in my game for the level select screen. I'm missing something ? – crashoverride777 Feb 24 '16 at 12:56
  • 1
    What he meant was that your code doesn't have anything to do with SpriteKit. It works, but there is nothing related to SpriteKit in it. Basically, you could've just told him to use UICollectionView and it wouldn't be different than your code. They're both still using UIKit. – Hedylove Nov 19 '16 at 02:01
  • 1
    Yeah thats true. Its just in those rare instances it is actually easier to use UIKit IMO. He could do those awkward hacks when your create a moveableNode and than move it and also keep track of it in touchesMoved. Its awkward and you also dont get the nice bounce/scrolling effects. I did update my answer with a link to a SpriteKit only solution. – crashoverride777 Nov 19 '16 at 13:43
  • 1
    @crashoverride777 sorry to dig up an old post but could you please provide the link to your collectionview github project because i'm having trouble with using the collectionview class you have provided in the answer it keeps giving me all these errors and was wondering if you could provide an updated version. and do you think it is worth using a UIcollectionview when working in spritekit because i heard it causes the game to run slower. Thanks for your help. – Astrum Dec 05 '16 at 00:19
  • I dont have the collection view project on GitHub. You probably get errors due to swift 3. You use collection view for menus etc and not in the game so no problems for performance. I might add this project to GitHub in the near future. I will try to update the answer later with Swift 3 syntax. – crashoverride777 Dec 05 '16 at 10:31
3

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.

Knight0fDragon
  • 16,609
  • 2
  • 23
  • 44