精灵套件侧滚动答案

【问题标题】：Sprite kit side scrolling精灵套件侧滚动
【发布时间】：2013-10-13 19:13:26
【问题描述】：

我开始使用 Sprite 套件，我想知道如何创建无限横向滚动游戏？我阅读了 Sprite 套件文档，并通读了场景的预处理。据说如果内容比场景大，我们可以重新调整场景的位置。我试过了，但是它可以工作，当我滚动整个背景图像时，我开始看到场景的默认背景。如何创建无限的背景？谁能指出我谈论他的问题的正确文档或文章？谢谢。

【问题讨论】：

查看：learn-cocos2d.com/2012/12/ways-scrolling-cocos2d-explained 一个简单的解决方案是创建一个小的（即 4x4）瓷砖地图，每个瓷砖都是屏幕大小背景的一部分或整个背景。然后使用 Kobold Kit，因为它可以无限/无限地滚动和重复瓷砖地图：koboldkit.com
但是我使用的是 Sprite Kit 而不是 Cocos2D，这样行吗？
同样的基本原则也适用于 SK
你的无限横向滚动游戏看起来不像 Flappy Bird，是吗？
@Gavin haha 当然不是我宁愿做一些新的事情。我当时正在尝试 sprite kit，然后我做了这个游戏果冻塔。

标签： ios sprite-kit

【解决方案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 像素。

【讨论】：

那是什么教程？
@PeterK 来自他的精灵套件书，raywenderlich.com/store/ios-games-by-tutorials

【解决方案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];

而在你的场景“更新”方法中，只需调用

[self.clouds update:currentTime]

完成！

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

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

【讨论】：

@Kirualex：我的帧率在 iOS 模拟器（来自 Xcode）中急剧下降。这种行为只在 iOS 模拟器上吗？那么设备的 FPS 是否保持在 60 fps？因为滚动背景非常简单，我的 fps 刚刚从 30fps 下降到 15fps。
@Jean-Paul 是的。 SpriteKit/OpenGL ES 针对设备进行了优化。您几乎总是会在模拟器上看到较低的帧数。在设备上测试真实世界的结果。

【解决方案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)

使用您的图像创建常量 backgroundTexture 作为 SKTexture。
创建常量以将背景移至左侧 (shiftBackground) 并将另一个背景实例添加到当前显示的背景实例的右侧 (replaceBackground)
创建常量 (movingAndReplacingBackground) 作为永远重复的 SKAction，将函数 repeatActionForever 的参数设置为 SKAction.sequence，并引用 shiftBackground 和 replaceBackground 常量。
创建一个定义背景定义的循环。（对于变量 i，如果 i 的数量小于 3，则将 i 加一。
在循环中，保护纹理、位置、大小和 zPosition（如果关闭同级顺序），然后调用您的movingAndReplacingBackground 作为您的操作，然后迭代您的序列。
最后，循环的最后一部分是添加背景。只要迭代次数少于 3 次，它将执行此操作。并且一旦您的第一个背景到达屏幕的最左侧，它就会将节点删除为 2，因此再次在循环中运行该操作。

我将它封装在一个函数中，因为对于视差背景，我能够复制这个函数 4 次，重命名变量，更改 shiftBackground 常量的“持续时间”，并根据它们的距离获得不同的速度。

我希望这会有所帮助！当 Swift 进入 Swift 3 时，这种“C 风格”的 for 循环将被弃用，所以我不确定如何长期解决这个问题。

【讨论】：

【解决方案4】：

我一直在为无限磁贴滚动器开发一个库，希望可以作为横向滚动器的起点：

RPTileScroller

它使用了一个类似于 tableView 的委托，所以我希望向滚动条提供图块或任何类型的节点真的很容易。我还没有实现任何碰撞逻辑，但我也计划添加它。

【讨论】：