Zooming and scrolling in SpriteKit

Question

I am new to SpriteKit. I need to display an image via UIImageView OR SpriteNode (it is a background image for a game). However, I need the user to be able to zoom in to the background and pan around. I accomplished this easily without using SpriteKit but cannot figure out how to make a node accept zoom and pan. If I use UIScrollView in the storyboard, all the sprites added in my scene don't become children and will not zoom or pan.

Is it possible and can you point me in the right direction?

---

EDIT:

I'm a little confused by your answer, but here's what I did:

In my root view controller .m:

- (void)viewDidLoad
{
    [super viewDidLoad];
    SKView * showDesigner = (SKView *)self.view;
    SKScene * scene = [iMarchMyScene sceneWithSize:showDesigner.bounds.size];
    scene.scaleMode = SKSceneScaleModeAspectFill;
    [showDesigner presentScene:scene];
}

In my scene .m: (your steps are commented)

-(id)initWithSize:(CGSize)size {
    if (self = [super initWithSize:size]) {

        //create SKView (step 1)
        SKView *skview_field = [[SKView alloc]initWithFrame:(CGRectMake(0, 0, size.width, size.height))];

        //create UIScrollView with same dimensions as your SpriteKit view (step 2)
        UIScrollView* uiscrollview_field = [[UIScrollView alloc]initWithFrame:skview_field.frame];

        //initialize the field (field is the game's background node)
        SKSpriteNode *field = [SKSpriteNode spriteNodeWithImageNamed:@"Field"];
        field.position = CGPointMake(CGRectGetMidX(self.frame), (CGRectGetMidY(self.frame)));
        field.size = CGSizeMake(self.size.width, self.size.height / 3);

        //create a UIView (called scrollViewContent) with dimensions of background node (step 3)
        UIView* scrollViewContent = [[UIView alloc]initWithFrame:field.frame];

        //set UIScrollView contentSize with same dimensions as your scrollViewContent and add a scrollContentview as your UISCrollView subview (step 4)
        [uiscrollview_field setContentSize:(CGSizeMake(scrollViewContent.frame.size.width, scrollViewContent.frame.size.height))];
        scrollViewContent.frame = field.frame;
        [uiscrollview_field addSubview:scrollViewContent];



        //[self addChild:field]; -- my original code
        //.....does a bunch of other inits

        return self;
}

And here's where I get lost: Step 5: Now, to your root view add your SKView, and UIScrollView on top of SKView.

If I understood you correctly, I need to go to myRootViewController.m and in the viewDidLoad method, add the SKView and UIScrollView (which are initialized in myScene.m) as subviews to SKView initialized here in the viewDidLoad method? I don't see how to do that part.

Answer 1

Here is my solution to the scrolling problem. It revolves around "stealing" the behaviour from the UIScrollView. I learned this from a WWDC Video from 2012 about mixing UIKit with OpenGL.

1. Add the UIScrollViewDelegate methods to your ViewController and set the scroll view delegate to the ViewController
2. Add/Move the PanGestureRecognizer from the UIScrollView to the SKView
3. Use the scrollViewDidScroll callback-method to control whatever node your want when the user scrolls

Example project: https://github.com/bobmoff/ScrollKit

Like I mentioned in a comment above, I am experiencing some tiny lag about 30% of the times I am running the app. The FPS is still 60 but there seem to be some slight conflict or something with how often the delegate method is called, as it sometimes feel a little laggy. If anyone manages to solve this issue, I would love to hear about it. It seems to be only when I am holding my finger down, it never lags when the deceleration is happening.