Nonoku - Scrolling Level Select

Combining an SKNode with a UIScrollView. These are two things which don’t go together natively. However, I wanted a scrolling view. I didn’t want to re-implement the UIScrollView in SpriteKit. I also didn’t want to have to handle rendering the puzzle to a UIImage and create UIImageViews when I already had a perfectly good method for building an SKNode from the tiles. A little modifying to let me add it to an SKEffectNode and I had my image. Create a new SKScene and present it in my view and I have part of the solution.

Adding it to the UIScrollView isn’t possible, but getting the offset of the scrollview is so if I tell it the content is larger than the screen. Say, large enough to fit the grid of puzzle images, I could attach those images to a SKNode and move it by the offset.

extension ViewController: UIScrollViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        gridNode.position.x = -scrollView.contentOffset.x
          gridNode.postion.y = scrollView.contentOffset.x
    }
}

I only care about horizontal movement. The gridNode is positioned at 0,0 in the scene. Horizontal movement is inverted, relative to the offset. Vertical movement is not because the SpriteKit coordinate system is inverted vertically compared to the UIView coordinates. In SpriteKit, 0,0 is in the bottom-left of the screen and increasing the y-coord moves it towards the top, UIView would put it in the top-left and increasing the y-coord moves it towards the bottom.

Since the scene is sitting behind the components I still get the UIScrollView scroll bars, and any other controls I might add and now I don’t have to re-implement the UIScrollView.

Next up, passing a touch event through to the scene.