Question

I have been trying to create a Class for my OpenGL ES 2.0 + GLKit game on iOS. When I increase the speed of the scrolling, the gap between the sprites gets larger. I have done a lot of searching on Google but have not found an answer that has worked for me.

My Scrolling sprite class inherits from a ‘Node’ with position, scale, children etc. (a bit like Cocos2D). The class has an array of sprites (nodes), that move with the set velocity on the x axis and when reaching the end of the screen move to the right position of the last sprite.

Here is the main part of my code:

    -(id)initWithTexture:(GLKTextureInfo *)texture effect:(GLKBaseEffect *)effect xScrollRange:(float)range yPosition:(float)y xScrollVelocity:(float)velocity{
if (self = [super init]) {
        //set globals
    self.velocity = velocity;
    xRange = range;

        //create a first sprite, set position, add to children
    JGSprite *firstSprite = [[JGSprite alloc] initWithTexture:texture effect:effect];
    firstSprite.position = GLKVector2Make(range, y);
    [self.children addObject:firstSprite];

        //calc how many sprites are needed to cover range+1
    float spritesNum = range/firstSprite.contentSize.width;
    int spritesNumRound = roundf(spritesNum)+1;

        //add enough sprites to cover the screen
    for (int i = 1; i < spritesNumRound; i++) {
            //create, set position, add to children
        JGSprite *sprite = [[JGSprite alloc] initWithTexture:texture effect:effect];
        sprite.position = GLKVector2Make(range - (i*sprite.contentSize.width), y);
        [self.children addObject:sprite];

    }

        //if moving left, set last sprite as right most
    if (velocity < 0)
        lastReorderedSprite = 0;
    else    //set left most
        lastReorderedSprite = self.children.count-1;



   }

    return self;
}

-(void)update:(float)dt
{
        //loop through sprites
    for (JGNode *node in self.children)
    {
            //update sprites position
        node.position = GLKVector2Make(node.position.x + self.velocity*dt, node.position.y);

        //if moving left
    if (self.velocity < 0)
    {
            //if reached gone off screen
        if (node.position.x <= -node.contentSize.width/2) 
        {
                //get last node
            JGNode *lastSprite = [self.children objectAtIndex:lastReorderedSprite];

                //set the position to the right of the last node
            node.position = GLKVector2Make(lastSprite.position.x+lastSprite.contentSize.width, node.position.y);

                //set re-positioned node as lastreordered
            lastReorderedSprite = [self.children indexOfObject:node];
        }            
    }
    else //moving right
    {
            //gone off screen   
        if (node.position.x >= xRange+node.contentSize.width/2) 
        {
                //get last node
            JGNode *lastSprite = [self.children objectAtIndex:lastReorderedSprite];

                //set the position to the left of the last node
            node.position = GLKVector2Make(lastSprite.position.x-node.contentSize.width, node.position.y);

                //set re-positioned node as lastreordered
            lastReorderedSprite = [self.children indexOfObject:node];

        }

    }
    }
}

If anyone could help by telling me how I would go about stopping a gap forming, it would be much appreciated 🙂 Thanks in advance!

Answer 1

The problem is most likely this line:

node.position = GLKVector2Make(node.position.x + self.velocity*dt, node.position.y);

When you increase velocity, the amount added to x increases. My guess is that one of your objects is having its speed updated later than the others. To fix it, just have each object check that it’s the distance that you want it to be from the others and if it isn’t, move it there.