What is the right way to create scrollable table in SKSpriteKit?

Question

I need a way to display a leaderboard - best user scores (local user, local scores).

Do I need to create my "own" node for this kind of thing, or its better to use UITableView above SKView with transparent background?

Answer 1

An approach I use is:

1. In the scene's didMoveToView: method, set up a UIScrollView instance. Set all the properties you need, and make sure to also set its delegate, set hidden=YES and add its panGestureREcognizer to the view gesture recognizer collection.

2. In willMoveFromView: tear it down and clean it up.

3. In the scrollview delegate, implement scrollViewDidScroll:. Here you can use the scroll view's contentOffset point to adjust a node's position.

I have implemented an offsetable node that I use as a root node for things I need to scroll. All it does is implement a contentOffset property - you can see it here: CATOffsetNode Gist.

So in scrollViewDidScroll: all I need to do is:

-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // I don't need to flip scrollView.contentOffset.Y because my scrollview
    // Y coordinate is flipped. See below.
    self->_gameListNode.contentOffset = scrollView.contentOffset;
}    

Then I add all the items I need to scroll as children for _gameListNode.

The result is a scrollable game list, which offers a native scrollview experience, including bounciness and swipe acceleration etc.

Here is an example implementation you can check out: ScrollKit on GitHub.

Edit: note about scrollview contentOffset Y direction:

UIView and SpriteKit Y coordinates go in opposite directions (UIView's origin is top left, and Y increases downwards), and I prefer to stick to one coordinate system. So I've made a custom scrollview class that flips the Y direction in the initializer. E.g.:

-(id)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame])
    {
        CGAffineTransform verticalFlip = CGAffineTransformMakeScale(1,-1);
        self.transform = verticalFlip;
    }
    return self;
}

This is not necessary (and you don't even need to subclass UIScrollView to achieve this) but without this you would have to manually flip contentOffset.Y in the scrollview delegate.