滚动背景 - Sprite Kit答案

【问题标题】：Scrolling background - Sprite Kit滚动背景 - Sprite Kit
【发布时间】：2013-11-29 22:26:10
【问题描述】：

所以我尝试使用这篇文章的解决方案 (Sprite kit side scrolling) 创建无限滚动背景。但是，我想让图像可重复。正如您在下面的视频中看到的，图像完成水平方向后，有一些空白。我想让图像填补那个空白，所以无休止地重复。

http://www.youtube.com/watch?v=kyLTGz7Irrc 要么 https://vimeo.com/79555900（密码：spritekit）

我做了什么：

for (int i = 0; i < 2; i++) {
        SKSpriteNode * bg = [SKSpriteNode spriteNodeWithImageNamed:@"bgimage"];
        bg.anchorPoint = CGPointZero;
        bg.position = CGPointMake(CGRectGetMidX(self.frame), self.frame.origin.y);
        bg.name = @"snow1";
        [self addChild:bg];
 }

在更新方法中：

[self enumerateChildNodesWithName:@"snow1" 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);
    }];

【问题讨论】：

顺便说一句，你的视频不工作。
我看到它正在工作。不管怎样，我现在也把它发布到了 Vimeo。

标签： ios iphone ios7 xcode5 sprite-kit

【解决方案1】：

不管怎样，我修好了。以防万一其他人需要它，我就是这样做的：

    // Create 2 background sprites
    bg1 = [SKSpriteNode spriteNodeWithImageNamed:@"bg1"];
    bg1.anchorPoint = CGPointZero;
    bg1.position = CGPointMake(0, 0);
    [self addChild:bg1];

    bg2 = [SKSpriteNode spriteNodeWithImageNamed:@"bg2"];
    bg2.anchorPoint = CGPointZero;
    bg2.position = CGPointMake(bg1.size.width-1, 0);
    [self addChild:bg2];

然后在更新方法中：

    bg1.position = CGPointMake(bg1.position.x-4, bg1.position.y);
    bg2.position = CGPointMake(bg2.position.x-4, bg2.position.y);

    if (bg1.position.x < -bg1.size.width)
        bg1.position = CGPointMake(bg2.position.x + bg2.size.width, bg1.position.y);

    if (bg2.position.x < -bg2.size.width) 
        bg2.position = CGPointMake(bg1.position.x + bg1.size.width, bg2.position.y);

【讨论】：

很好的答案，我已经添加了一个答案，使用这个答案来滚动一堆背景图像

【解决方案2】：

具有 for 循环的原始逻辑只需稍作改动即可正常工作：

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

而在更新方法中：

[self enumerateChildNodesWithName:@"snow1" 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);
}
}];

【讨论】：

是的，这是另一种方式。
我非常喜欢这个。但是，我会使用变量而不是 5，这样如果需要，可以更改移动速度。除此之外，我会使用完全相同的。

【解决方案3】：

使用 Sebyddd 的回答，我稍微修改了代码以显示多个背景图像的堆栈。（确切地说是 7 个背景图像）。并为那些苦苦挣扎的人添加了更多代码。

在 MyScene.h 中：

@interface MyScene : SKScene
{
SKSpriteNode *bg1;
SKSpriteNode *bg2;
SKSpriteNode *bg3;
SKSpriteNode *bg4;
SKSpriteNode *bg5;
SKSpriteNode *bg6;
SKSpriteNode *bg7;
}

在 MyScene.m 中：

-(id)initWithSize:(CGSize)size {
if (self = [super initWithSize:size]) {
// create 7 background sprites
    bg1 = [SKSpriteNode spriteNodeWithImageNamed:@"background1"];
    bg1.anchorPoint = CGPointZero;
    bg1.position = CGPointMake(0, 0);
    [self addChild:bg1];

    bg2 = [SKSpriteNode spriteNodeWithImageNamed:@"background2"];
    bg2.anchorPoint = CGPointZero;
    bg2.position = CGPointMake(bg1.size.width-1, 0);
    [self addChild:bg2];

    bg3 = [SKSpriteNode spriteNodeWithImageNamed:@"background3"];
    bg3.anchorPoint = CGPointZero;
    bg3.position = CGPointMake(bg2.size.width-1, 0);
    [self addChild:bg3];

    bg4 = [SKSpriteNode spriteNodeWithImageNamed:@"background4"];
    bg4.anchorPoint = CGPointZero;
    bg4.position = CGPointMake(bg3.size.width-1, 0);
    [self addChild:bg4];

    bg5 = [SKSpriteNode spriteNodeWithImageNamed:@"background5"];
    bg5.anchorPoint = CGPointZero;
    bg5.position = CGPointMake(bg4.size.width-1, 0);
    [self addChild:bg5];

    bg6 = [SKSpriteNode spriteNodeWithImageNamed:@"background6"];
    bg6.anchorPoint = CGPointZero;
    bg6.position = CGPointMake(bg5.size.width-1, 0);
    [self addChild:bg6];

    bg7 = [SKSpriteNode spriteNodeWithImageNamed:@"background7"];
    bg7.anchorPoint = CGPointZero;
    bg7.position = CGPointMake(bg6.size.width-1, 0);
    [self addChild:bg7];
}
}

- (void)update:(NSTimeInterval)currentTime {
[self moveBackground];
}

-(void)moveBackground
{   
bg1.position = CGPointMake(bg1.position.x-4, bg1.position.y);
bg2.position = CGPointMake(bg2.position.x-4, bg2.position.y);
bg3.position = CGPointMake(bg3.position.x-4, bg3.position.y);
bg4.position = CGPointMake(bg4.position.x-4, bg4.position.y);
bg5.position = CGPointMake(bg5.position.x-4, bg5.position.y);
bg6.position = CGPointMake(bg6.position.x-4, bg6.position.y);
bg7.position = CGPointMake(bg7.position.x-4, bg7.position.y);

if (bg1.position.x < -bg1.size.width){
    bg1.position = CGPointMake(bg7.position.x + bg7.size.width, bg1.position.y);
}

if (bg2.position.x < -bg2.size.width) {
    bg2.position = CGPointMake(bg1.position.x + bg1.size.width, bg2.position.y);
}

if (bg3.position.x < -bg3.size.width) {
    bg3.position = CGPointMake(bg2.position.x + bg2.size.width, bg3.position.y);
}

if (bg4.position.x < -bg4.size.width) {
    bg4.position = CGPointMake(bg3.position.x + bg3.size.width, bg4.position.y);
}

if (bg5.position.x < -bg5.size.width) {
    bg5.position = CGPointMake(bg4.position.x + bg4.size.width, bg5.position.y);
}

if (bg6.position.x < -bg6.size.width) {
    bg6.position = CGPointMake(bg5.position.x + bg5.size.width, bg6.position.y);
}

if (bg7.position.x < -bg7.size.width) {
    bg7.position = CGPointMake(bg6.position.x + bg6.size.width, bg7.position.y);
}
}

【讨论】：