Simulating UIScrollView in SpriteKit: scrolling SKScene works when SKView is 2000 points tall but fails when height is 2050

Question

The goal is to scroll a SKScene with the same behavior as a UIScrollView.

Other questions are similar, but the answers did not help.

This code illustrates how UIScrollView + SKView will show content when the SKView subview is 2000 points tall, yet shows nothing if the subview is 2050 points tall.

The height matters because if a SKScene contains a map of nodes that is 3000 points tall, for instance, we need the scene rendered in the UIScrollView (by presenting the scene inside a SKView, which itself is a subview of the UIScrollView).

class TestViewController: UIViewController, UIScrollViewDelegate {

    @IBOutlet weak var scrollView: UIScrollView!

    override func viewDidLoad() {
        // Call super
        super.viewDidLoad()

        // Make scene (then someone call the police)
        let scene = TestScene(size: UIScreen.main.bounds.size)

        // Allow other overlays to get presented
        definesPresentationContext = true

        // Set background color
        scrollView.backgroundColor = UIColor.clear

        // Create content view for scrolling since SKViews vanish with height > 2050
        let contentHeight = scene.getScrollHeight()
        let contentFrame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: contentHeight)
        let contentView = UIView(frame: contentFrame)
        contentView.backgroundColor = UIColor.clear

        // Create SKView
        let skFrame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: contentHeight)
        let skView = SKView(frame: skFrame)

        // Configure <scrollView>
        scrollView.insertSubview(skView, at: 0)
        scrollView.addSubview(contentView)
        scrollView.delegate = self
        scrollView.contentSize = contentFrame.size

        // Present scene
        skView.presentScene(scene)
    }

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        scene.scrollBy(offset: scrollView.contentOffset.y)
    }
}

Answer 1

See SpriteKit: why does SKView disappear at one height but appears at another height? What's the maximum height for SKView? in regards to your size problem.

As for what to do about your scroll view, since you are limited to size on openGL rendering, what you need to do is underlay your scene behind your scrollview (do not make it a subview) then pass the scroll coordinate position to the scene, and set the scenes position accordingly. Now this may disable touch on your scene, so you are going to have to set it up to hit the view behind it.

Answer 2

These two classes demonstrate how to scroll SKScene menus or scenes with UIScrollView behavior.

Thanks to @KnightofDragon for catching the key flaw in the code.

It's frustrating Apple doesn't provide this functionality natively, but hopefully no one else has to waste days experimenting with the best way to implement menu scrolling in SpriteKit!

The UIViewController assumes the UIScrollView has been added via Storyboard.

class ScrollViewController: UIViewController, UIScrollViewDelegate {
    // IB Outlets
    @IBOutlet weak var scrollView: UIScrollView!

    // General Vars
    var scene = ScrollScene()

    // =======================================================================================================
    // MARK: Public Functions
    // =======================================================================================================
    override func viewDidLoad() {
        // Call super
        super.viewDidLoad()

        // Create scene
        scene = ScrollScene()

        // Allow other overlays to get presented
        definesPresentationContext = true

        // Create content view for scrolling since SKViews vanish with height > ~2048
        let contentHeight = scene.getScrollHeight()
        let contentFrame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: contentHeight)
        let contentView = UIView(frame: contentFrame)
        contentView.backgroundColor = UIColor.clear

        // Create SKView with same frame as <scrollView>, must manually compute because <scrollView> frame not ready at this point
        let scrollViewPosY = CGFloat(0)
        let scrollViewHeight = UIScreen.main.bounds.size.height - scrollViewPosY
        let scrollViewFrame = CGRect(x: 0, y: scrollViewPosY, width: UIScreen.main.bounds.size.width, height: scrollViewHeight)
        let skView = SKView(frame: scrollViewFrame)
        view.insertSubview(skView, at: 0)

        // Configure <scrollView>
        scrollView.addSubview(contentView)
        scrollView.delegate = self
        scrollView.contentSize = contentFrame.size

        // Present scene
        skView.presentScene(scene)

        // Handle taps on <scrollView>
        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(scrollViewDidTap))
        scrollView.addGestureRecognizer(tapGesture)
    }

    // =======================================================================================================
    // MARK: UIScrollViewDelegate Functions
    // =======================================================================================================
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        scene.scrollBy(contentOffset: scrollView.contentOffset.y)
    }


    // =======================================================================================================
    // MARK: Gesture Functions
    // =======================================================================================================
    @objc func scrollViewDidTap(_ sender: UITapGestureRecognizer) {
        let scrollViewPoint = sender.location(in: sender.view!)
        scene.viewDidTapPoint(viewPoint: scrollViewPoint, contentOffset: scrollView.contentOffset.y)
    }
}



class ScrollScene : SKScene {
    // Layer Vars
    let scrollLayer = SKNode()

    // General Vars
    var originalPosY = CGFloat(0)


    // ================================================================================================
    // MARK: Initializers
    // ================================================================================================
    override init() {
        super.init()
    }


    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }


    // ================================================================================================
    // MARK: Public Functions
    // ================================================================================================
    func scrollBy(contentOffset: CGFloat) {
        scrollLayer.position.y = originalPosY + contentOffset
    }


    func viewDidTapPoint(viewPoint: CGPoint, contentOffset: CGFloat) {
        let nodes = getNodesTouchedFromView(point: viewPoint, contentOffset: contentOffset)
    }


    func getScrollHeight() -> CGFloat {
        return scrollLayer.calculateAccumulatedFrame().height
    }


    fileprivate func getNodesTouchedFromView(point: CGPoint, contentOffset: CGFloat) -> [SKNode] {
        var scenePoint = convertPoint(fromView: point)
        scenePoint.y += contentOffset
        return scrollLayer.nodes(at: scenePoint)
    }
}