ios7 - SpriteKit 中的缩放和滚动

Question

我是 SpriteKit 的新手。我需要通过 UIImageView 或 SpriteNode 显示图像（它是游戏的背景图像）。但是，我需要用户能够放大背景并平移。我在不使用 SpriteKit 的情况下轻松完成了这项工作，但无法弄清楚如何让节点接受缩放和平移。如果我在情节提要中使用 UIScrollView，则添加到我的场景中的所有精灵都不会成为孩子，也不会缩放或平移。

有可能吗，你能指出我正确的方向吗？

---

编辑：

我对你的回答有点困惑，但这是我所做的：

在我的根视图控制器 .m 中：

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

在我的场景中 .m：（您的步骤已被评论）

-(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;
}

这就是我迷路的地方： 第 5 步：现在，在您的根视图中添加您的 SKView，并在 SKView 之上添加 UIScrollView。

如果我理解正确，我需要转到 myRootViewController.m 并在 viewDidLoad 方法中，将 SKView 和 UIScrollView（在 myScene.m 中初始化）作为子视图添加到在 viewDidLoad 方法中初始化的 SKView 中？我不知道如何做那部分。

Answer 1

这是我对滚动问题的解决方案。它围绕“窃取” UIScrollView 的行为展开。我从 2012 年关于将 UIKit 与 OpenGL 混合的 WWDC 视频中了解到这一点。

1. 将 UIScrollViewDelegate 方法添加到您的 ViewController 并将滚动视图委托设置为 ViewController
2. 将 PanGestureRecognizer 从 UIScrollView 添加/移动到 SKView
3. 使用 scrollViewDidScroll 回调方法来控制用户滚动时想要的任何节点

示例项目： https ://github.com/bobmoff/ScrollKit

就像我在上面的评论中提到的那样，在我运行应用程序的 30% 的时间里，我遇到了一些微小的延迟。FPS 仍然是 60，但似乎有一些轻微的冲突或调用委托方法的频率，因为它有时感觉有点滞后。如果有人设法解决这个问题，我很想听听。似乎只有当我按住手指时，减速发生时它才不会滞后。

Answer 2

贾斯汀，

你可以使用一个小技巧，我正在使用它，它对我很有用。这是设置：

• 创建 SKView
• 创建与 SpriteKit 视图具有相同尺寸的 UIScrollView
• 创建一个与背景节点具有相同尺寸的 UIView（让它命名为 scrollContentView）
• 将您的 UIScrollView contentSize 设置为与您的 scrollContentView 相同的尺寸，并将 scrollContentView 添加为您的 UIScrollView 子视图

现在，在您的根视图 (UIView) 中添加您的 SKView，并在 SKView 之上添加 UIScrollView。它是这样的（视图控制器）：

self.scrollView              = [[UIScrollView alloc] initWithFrame:[UIScreen mainScreen].bounds.size];
self.scrollContentView       = [[UIView alloc] init];
self.scrollView.delegate     = self;

self.spriteKitView           = [[SKView alloc] initWithFrame:[UIScreen mainScreen].bounds.size];
self.scrollContentView.frame = self.scene.bacgroundNode.frame;
self.scrollView.contentSize  = self.scrollContentView.frame.size;

[self.scrollView addSubview:self.scrollContentView];

[self.view addSubview:self.spriteKitView];
[self.view addSubview:self.scrollView];

[self.spriteKitView presentScene:self.scene];

技巧的最后一部分是实现 UIScrollViewDelegate：

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

  //here you set your background node position based on scrollView contentoffset
}

- (void)scrollViewDidZoom:(UIScrollView *)scrollView {

  //here you set background node scale based on scrollView zoomScale
}

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {

  //just return scrollContentView
}

这样你就可以在 UISCrollView 中模拟 SKView。希望这可以帮助。

编辑 2014-04-20

我已经开源了我在 SpriteKit 中平移和滚动场景的组件，请查看：https ://github.com/pzbyszynski/PIOSpriteKit

Answer 3

我创建了自己的方法来缩放特定节点而不必缩放整个场景，这是它的基础，但它并不完美（实际上我在这里创建了自己的帮助请求：缩放 SKNode 不一致）

这个 if 语句进入场景的 touchesMoved 方法：

   if (touches.count == 2) {
        // this means there are two fingers on the screen
        NSArray *fingers = [touches allObjects];
        CGPoint fingOneCurr = [fingers[0] locationInNode:self];
        CGPoint fingOnePrev = [fingers[0] previousLocationInNode:self];
        CGPoint fingTwoCurr = [fingers[1] locationInNode:self];
        CGPoint fingTwoPrev = [fingers[1] previousLocationInNode:self];

        BOOL yPinch = fingOneCurr.y > fingOnePrev.y && fingTwoCurr.y < fingTwoPrev.y;
        BOOL yUnpinch = fingOneCurr.y < fingOnePrev.y && fingTwoCurr.y > fingTwoPrev.y;

        BOOL xPinch = fingOneCurr.x > fingOnePrev.x && fingTwoCurr.x < fingTwoPrev.x;
        BOOL xUnpinch = fingOneCurr.x < fingOnePrev.x && fingTwoCurr.x > fingTwoPrev.x;

        if (xUnpinch | yUnpinch) {
            if (YES) NSLog(@"This means an unpinch is happening");
            mapScale = mapScale +.02;
            [map setScale:mapScale];
        }

        if (xPinch | yPinch) {
            if (YES) NSLog(@"This means a pinch is happening");
            mapScale = mapScale - .02;
            [map setScale:mapScale];
        }
    }

我遇到的唯一问题是行为不一致和滚动不流畅。在这个意义上，我非常宽泛地使用“唯一”这个词。

Answer 4

您可以从这个 Ray W 教程SpriteKit 教程开始，其中包括您要求的一些东西，包括手势识别器。

这很好：Apple 手势识别器参考

另一个来自 Ray W：uigesturerecognizer-tutorial-in-ios-5-pinches-pans-and-more

以上是很好的开始。

Answer 5

如果您使用的是，SKCameraNode您可以计算两次触摸之间的差异来一次定义缩放和平移。

• SKCameraNode为您的 SKView定义一个
• 检查是否有两次触摸
• 如果是这样，计算先前触摸和当前触摸之间的差异
• 告诉相机缩放那么多
• 通过相机平移两点的平均值或第一个点（如果只有一个点）

结果应该是这样的。请注意，我使用的是event?.allTouches而不是接收到的集合，如果一个手指在触摸之间没有移动，则它不在touches集合中，这将导致用户期望缩放的平移。

let cameraNode = SKCameraNode()

override func didMove(to view: SKView) {

    cameraNode.position = CGPoint(x: size.width / 2, y: size.height / 2)
    addChild(cameraNode)
    camera = cameraNode
}

override func touchesMoved(_ touch: Set<UITouch>, with event: UIEvent?) {

    guard let touches = event?.allTouches else {
        return
    }

    let arr = Array(touches)
    guard let touch = arr.first else {
        return
    }

    var positionInScene = touch.location(in: self)
    var previousPosition = touch.previousLocation(in: self)

    if touches.count > 1 {

        let touch2 = arr[1]

        let positionInScene2 = touch2.location(in: self)
        let previousPosition2 = touch2.previousLocation(in: self)

        let oldDistance = distance(previousPosition, previousPosition2)
        let newDistance = distance(positionInScene, positionInScene2)

        let diff = (oldDistance / newDistance)

        if diff.isNormal && diff != 1 {

            let scaleAction = SKAction.scale(by: diff, duration: 0)
            cameraNode.run(scaleAction)
        }

        previousPosition = average(previousPosition, previousPosition2)
        positionInScene = average(positionInScene, positionInScene2)
    }

    let translation = CGPoint(x: positionInScene.x - previousPosition.x, y: positionInScene.y - previousPosition.y)

    let panAction = SKAction.moveBy(x: -translation.x, y: -translation.y, duration: 0)
    cameraNode.run(panAction)
}

func average(_ a: CGPoint, _ b: CGPoint) -> CGPoint {

    return CGPoint(x: (a.x + b.x) / 2, y: (a.y + b.y) / 2)
}

func distance(_ a: CGPoint, _ b: CGPoint) -> CGFloat {

    let xDist = a.x - b.x
    let yDist = a.y - b.y
    return CGFloat(sqrt((xDist * xDist) + (yDist * yDist)))
}