Sprite Kit 侧向滚动

Question

我开始使用Sprite kit，并想知道如何创建一个无限边滚动的游戏？我阅读了Sprite kit文档并查看了场景的预处理。它说明我们可以在内容大于场景时重新调整场景的位置。我尝试了它，它有效果，但是当我滚动整个背景图像时，我开始看到场景的默认背景。如何创建无限的背景？有人可以指向正确的文档或讨论此问题的文章吗？谢谢。

- HusseinB

---

请查看此链接：http://www.learn-cocos2d.com/2012/12/ways-scrolling-cocos2d-explained/ 一个简单的解决方案是创建一个小型（例如4x4）瓦片地图，其中每个瓦片都是屏幕大小的背景的一部分或整个背景。然后使用Kobold Kit，因为它可以无限滚动和重复瓦片地图：http://koboldkit.com - CodeSmile

但我正在使用Sprite Kit而不是Cocos2D，这样可以吗？ - HusseinB

相同的基本原则适用于SK。 - CodeSmile

你的无限横向滚动游戏看起来不像Flappy Bird，是吗？ - Gavin

@Gavin 哈哈当然不了，我宁愿尝试做些新的东西。我曾经尝试过Sprite Kit, 做了这个游戏Jelly Tower。 - HusseinB

Answer 1

类似这样的东西应该可以帮助你开始:

添加背景图片...

for (int i = 0; i < 2; i++) {
    SKSpriteNode * bg = [SKSpriteNode spriteNodeWithImageNamed:@"background"];
    bg.anchorPoint = CGPointZero;
    bg.position = CGPointMake(i * bg.size.width, 0);
    bg.name = @"background";
    [self addChild:bg];
}

在你的更新方法中。

[self enumerateChildNodesWithName:@"background" usingBlock: ^(SKNode *node, BOOL *stop) {
    SKSpriteNode *bg = (SKSpriteNode *) node;
    bg.position = CGPointMake(bg.position.x - 5, bg.position.y);

    if (bg.position.x <= -bg.size.width) {
        bg.position = CGPointMake(bg.position.x + bg.size.width * 2, bg.position.y);
    }
}];

这是从RW的示例中得出的，他的示例使用了1136像素的背景图片尺寸。

- DogCoffee

---

那是什么教程？ - PeterK

@PeterK来自他的Sprite Kit书籍，http://www.raywenderlich.com/store/ios-games-by-tutorials。 - DogCoffee

Answer 2

我为此目的创建了一个通用组件，名为SKScrollingNode，因为我通常添加多个滚动背景来实现视差效果。使用它非常简单：

在您的场景类中声明它。

@property(strong,nonatomic) SKScrollingNode * clouds;

创建它并将其添加到场景实例中。

self.clouds = [SKScrollingNode spriteNodeWithImageNamed:@"clouds"];
self.clouds.scrollingSpeed = .5; // Speed at which the clouds will scroll
[self addChild:clouds];

在您的场景“update”方法中，只需调用：

[self.clouds update:currentTime]

完成！

您可以在此处找到“SKScrollinNode”组件的完整代码：

https://github.com/kirualex/SprityBird/blob/master/spritybird/Classes/Scenes/

- Alexis C.

---

@Kirualex：我的iOS模拟器（来自Xcode）帧率急剧下降。这种行为只在iOS模拟器上吗？因此，设备的FPS保持在60fps左右吗？因为我的FPS由于一个非常简单的滚动背景从30fps降至15fps。 - Jean-Paul

@Jean-Paul 是的。SpriteKit/OpenGL ES 已针对设备进行了优化。你几乎总是会在模拟器上看到更低的帧数。请在设备上进行测试以获得真实世界的结果。 - bstahlhood

Answer 3

我的代码示例完全参考了使用SpriteKit和Swift，如下所示。

func background1() {
        let backgroundTexture = SKTexture(imageNamed: "bg")

        //move background right to left; replace
        let shiftBackground = SKAction.moveByX(-backgroundTexture.size().width, y: 0, duration: 15)
        let replaceBackground = SKAction.moveByX(backgroundTexture.size().width, y:0, duration: 0)
        let movingAndReplacingBackground = SKAction.repeatActionForever(SKAction.sequence([shiftBackground,replaceBackground]))

        for var i:CGFloat = 0; i<3; i++ {
            //defining background; giving it height and moving width
            let background = SKSpriteNode(texture:backgroundTexture)
            background.position = CGPoint(x: backgroundTexture.size().width/2 + (backgroundTexture.size().width * i), y: CGRectGetMidY(self.frame))
            background.size.height = self.frame.height
            background.zPosition = -20
            background.runAction(movingAndReplacingBackground)

            self.addChild(background)

1. 创建常量backgroundTexture，将其作为SKTexture与您的图像一起创建。
2. 创建用于将背景向左移动（shiftBackground）以及在当前显示的背景右侧添加另一个实例（replaceBackground）的常量。
3. 创建常量movingAndReplacingBackground，将其作为SKAction重复执行，将repeatActionForever函数的参数设置为引用您的shiftBackground和replaceBackground常量的SKAction.sequence。
4. 创建循环以定义背景的定义。（对于变量i，如果i的数量小于3，则将i增加1。
5. 在循环中，保护纹理、位置、大小和zPosition（如果关闭兄弟顺序），然后调用您的movingAndReplacingBackground作为操作，这样可以迭代您的序列。
6. 最后，循环的最后一部分是添加背景。每次迭代少于3次时，它都会执行此操作。并且一旦您的第一个背景到达屏幕最左边，它将将节点删除到2，因此再次运行循环中的操作。

我将此封装成一个函数，因为对于视差背景，我能够将此函数复制4次，重命名变量，更改"duration"以进行shiftBackground常量，并根据它们的距离获得不同的速度。

我希望这有所帮助！当Swift升级到Swift 3时，这种"C-Style"循环将被弃用，因此我还不确定如何在长期内解决这个问题。

- Alexander Bourlotos

Answer 4

我一直在开发一个无限瓦片滚动库，希望能成为横向滚动游戏的起点：

RPTileScroller

它使用类似tableView的代理，所以我希望很容易提供瓦片或任何类型的节点给滚动器。目前还没有实现碰撞逻辑，但我计划也会添加进去。

- JP Illanes