Sprite Kit Side Scrolling

How to make a horizontal scrolling character chooser in SpriteKit

You should do well to avoid using UIKit classes in SpriteKit, just because it's just a different beast. Additionally, SpriteKit uses its own game time, so you wouldn't want to rely on some other time if for example your game is paused for whatever reason.

I typically build my own components, which would be how I would approach this challenge as well. You should make a custom SKNode subclass, let's say Picker, the instance of which you embed onto the SKScene. Within that component, you'll handle touches independently from the SKScene and program in tapping, dragging and dropping behavior, natively. SKAction animations will help in snapping the correct "page" selection into place after a drop.

So then, whenever the component detects a tap or a swiped selection (the end of a drag: drop), it sends a signal either to your data or the SKScene parent, telling that the selection should be updated.

I'm sure there might be third-party components around, but I would invest time into this sort of development, if you plan on sticking with SpriteKit. You will typically need to get into the weeds of things, but that's part of the fun :).

I'm happy to help further, if needed.

Horizontal scrolling in SpriteKit (vs. a viewcontroller)

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?

SpriteKit and Scrollable List

I would avoid using UIKit components if possible. When you have a UIView that is parented to UIKit components, it makes it difficult to interact with your SpriteKit components that live in the SKView. It's pretty easy to subclass SKNode and make a "ScrollingNode" that uses gesture recognizers on the SKView to do the scrolling. Here's an example:

https://github.com/JenDobson/SpriteKitScrollingNode

Another great tutorial to take a look at is http://www.raywenderlich.com/44270/sprite-kit-tutorial-how-to-drag-and-drop-sprites. Go to the part at the end on gesture recognizers.

SpriteKit background image scrolling flickers at seam line

You are encountering floating point rounding errors. This is going to lead to a situation where your first BG rounds down, and your second BG rounds up, giving you a 1 pixel gap.

instead, try the following code

class GameScene: SKScene {

    private var background = SKNode()

    func makeBackground() {
        let texture = SKTexture(imageNamed: "bg-empty")
        let scroll = SKAction.move(by: CGVector(dx: -texture.size().width, dy: 0), duration: 30)
        let reset = SKAction.move(by: CGVector(dx: texture.size().width, dy: 0), duration: 0)
        let animation = SKAction.repeatForever(SKAction.sequence([scroll, reset]))

        for idx in 0...1 {
            let subNode = SKSpriteNode(texture: texture)
            subNode.position = CGPoint(x: CGFloat(idx)*texture.size().width, y: self.frame.midY)

            background.addChild(subNode)
        }
        background.zPosition = -1
        background.run(animation)
        self.addChild(background)
    }

    override func didMove(to view: SKView) {        
        makeBackground()
    }    
}

Now you can avoid the gap because you are not running 2 different actions.

If you want to be able to scroll both ways. then place a texture to the left of your bg.

This will place a background node before and after your main background, and essentially turn it into 1 big node, with only the middle texture showing in its entirety.

If you have multiple background images, then just place the last frame of your background also to the left

---

Related Topics