SpriteKit and UIScrollView and HUD

Question

I am trying to make small iOs game. The user will be presented with a scene that is larger that the screen size of the device. I believe the correct way to handle this is to create the scene and place it inside a scroll view, so the user can scroll to see the entire scene (maybe even scroll in and out to see more detail). However I have been unsuccessful at this.. this is the code:

- (void)viewWillLayoutSubviews
{
    // Configure the view.
    SKView * skView = (SKView *)self.view;
    if (!skView.scene) {
        skView.showsFPS = YES;
        skView.showsNodeCount = YES;

        // Create and configure the scene.
        // the size will eventually come from the levels file
        SKScene * scene = [[PSMainGameScene alloc] initWithSize:skView.bounds.size andLevel:0];
        scene.scaleMode = SKSceneScaleModeAspectFill;

        // TODO Add ambiental music

        // Present the scene.
        [skView presentScene:scene];
    }

}

This seems to add the scene and I am able to scroll but scene has no sprites, even thou the skview should draw them (in the corner, after scrolling I am able to see the frame rate 11fps(why is this so small), and 0 sprites)when added outside of a scrollview the sprites are visible).

I would also like to add a HUD : several buttons that will hover in the same place no matter where the user scrolls/zooms ... I have seen an example without the scroll view where thouchesDidMove was used to scroll the SKView , I don't think this is the way to go... Does anyone know the best way to get this done? Or why is my code not working? Thanks

Take a good look at your code. You are adding your scrollview to what? — El Tomato, Mar 19 '14 at 18:09
The scrollView is added in interface builder to the main view. self.designView (the game scene) is also added in IB inside the scrollView... — user1028028, Mar 19 '14 at 18:55

score 2 · Accepted Answer · edited May 23 '17 at 10:29

2

I answered a similar question here: What is the right way to create scrollable table in SKSpriteKit?

To summarize - I suggest building upon ScrollKit. On top of that I recommend flipping the UIScrollView Y-coordinates to match SpriteKit's coordinate system, as well as using a custom SKNode (example of such a node here) that allows to set its contentOffset.

edited May 23 '17 at 10:29

Community

1
1

answered Mar 26 '14 at 19:35

Janis Kirsteins

2,128
16
17

ZeMoon · Answer 2 · 2014-03-26T19:34:53.773

1

Have a look at this project on GitHub. It shows an example of using a UIScrollView in a SpriteKit project.

https://github.com/bobmoff/ScrollKit

edited Mar 26 '14 at 19:34

answered Mar 26 '14 at 19:29

ZeMoon

20,054
5
57
98

score 0 · Answer 3 · answered Mar 19 '14 at 19:00

0

World => Camera => Hero

Section "Moving Camera" from Adventure game.

answered Mar 19 '14 at 19:00

AndrewShmig

4,843
6
39
68

I'll have a look . Thanks – user1028028 Mar 20 '14 at 07:47

score 0 · Answer 4 · answered Mar 27 '14 at 13:22

I have created one demo for my tutorial to move background on finger drag. here is code for it, not sure but might help you.

I have not taken care for bounds of background node so it might move out of screen as you drag your finger on screen, you can take care of it.

My MyScene.m file looks like following

#import "MyScene.h"

@interface MyScene(){
    SKSpriteNode *bgSprite;
    CGPoint translation;
}
@end

@implementation MyScene

-(id)initWithSize:(CGSize)size {    
    if (self = [super initWithSize:size]) {
        /* Setup your scene here */

        self.backgroundColor = [SKColor colorWithRed:0.15 green:0.15 blue:0.3 alpha:1.0];

        bgSprite = [SKSpriteNode spriteNodeWithImageNamed:@"bg"];
        bgSprite.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame));
        [self addChild:bgSprite];

    }
    return self;
}

- (void)didMoveToView:(SKView *)view {
    UIPanGestureRecognizer *gestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePanFrom:)];
    [[self view] addGestureRecognizer:gestureRecognizer];
}

- (void)handlePanFrom:(UIPanGestureRecognizer *)recognizer {

    if (recognizer.state == UIGestureRecognizerStateBegan) {
        translation = CGPointZero;
    } else if (recognizer.state == UIGestureRecognizerStateChanged) {

        CGPoint curTranslation = [recognizer translationInView:recognizer.view];
        CGPoint newPoint;
        if (translation.x==0 && translation.y==0) {
            newPoint = curTranslation;
        }
        else{
            newPoint.x=curTranslation.x-translation.x;
            newPoint.y=curTranslation.y-translation.y;
        }
        CGPoint prevPosition = bgSprite.position;
        CGPoint newPosition  = CGPointMake(prevPosition.x+newPoint.x, prevPosition.y-newPoint.y);
        bgSprite.position = newPosition;
        translation = curTranslation;

    } else if (recognizer.state == UIGestureRecognizerStateEnded) {

    }
}

-(void)update:(CFTimeInterval)currentTime {
    /* Called before each frame is rendered */
//    NSLog(@"Update");

}

@end

score 0 · Answer 5 · answered Mar 27 '14 at 17:55

0

You should add all your SKSpriteNode objects in one big SKNode and then add this node in the SKView. You should move the position of this node in the main scene.

answered Mar 27 '14 at 17:55

Todor Brachkov

219
1
9

SpriteKit and UIScrollView and HUD

5 Answers5