2

How to create an infinite background in cocos2d without block Gap.I am building an app with a ball moving from left to right, and I want it to move infinitely. Well in that case I would have an endless background so the ball could keep moving.I got gab between the image .I've continuously searched on this matter and have found nothing that actually works.

Actual screen shot with gab between the images

I have added code below

-(void)scroll:(ccTime )time
{
tree1.position  =   ccp(tree1.position.x-1, tree1.position.y);
tree2.position  =   ccp(tree2.position.x-1, tree2.position.y);

if (tree1.position.x<-tree1.boundingBox.size.width) {
    tree1.position  =   ccp(tree2.position.x +tree2.boundingBox.size.width,  tree1.position.y);
}

if (tree2.position.x<-tree2.boundingBox.size.width) {
    tree2.position  =   ccp(tree1.position.x + tree2.boundingBox.size.width, tree1.position.y);
}

}
Vinodh
  • 5,262
  • 4
  • 38
  • 68
Stalin Pusparaj
  • 741
  • 9
  • 11

1 Answers1

1

If the gap occurs between the sprites you are sliding to create the endless scrolling, the simplest common solution is overlapping your background stripes by 1 pixel.

In your image it appears that the gap appears when you are moving an sprite from the left to the right. Have you moved the anchor point of your sprites? so now they are left aligned?

gabuh
  • 1,166
  • 8
  • 15
  • How should i overlapping my background stripes by 1 pixel. How should i moved anchor point of the sprite? By Default sprite created left aligned. `tree1 = [CCSprite spriteWithFile:@"platform-left.png"]; tree1.anchorPoint = CGPointZero;` – Stalin Pusparaj Jun 02 '14 at 07:35
  • The anchor point is the point you get when you ask for 'tree1.position.x' If you have it set to the center of your sprite, asking if 'tree1.position.x < tree1.boundingBox.size.width' will be truth with half a sprite width offset... For your code to work, you should set it to a point in the left border of your sprite. Do 'tree1.anchorPoint = CGPointMake(0, 0.5f);' when creating the sprites. – gabuh Jun 02 '14 at 08:04
  • Your gap seems bigger than 1 pixel.... can you post here the widths of your sprites and screen? – gabuh Jun 02 '14 at 08:29
  • Yeah gab width is around 40 px.I have attached short video to see a actual result.Video link is below here. [link](https://onedrive.live.com/redir.aspx?cid=eb7f2f7c40e359ee&resid=EB7F2F7C40E359EE!526&parId=EB7F2F7C40E359EE!137&authkey=!) – Stalin Pusparaj Jun 02 '14 at 09:37
  • 1
    instead if overlapping the actual fix is to ensure position of the images (and positions of their parents) are on full pixel boundaries, ie casting/rounding position to int or on retina round to the nearest half-point (0.5) – CodeSmile Jun 02 '14 at 10:26
  • If your scrolling window is 40px and your two scrolling images are 40 px, then i think you should do: `tree1.position = ccp(tree2.position.x +tree2.boundingBox.size.width *2, tree1.position.y`) when moving right the images (move to the beginning). By the way, if after that you still have a 1px flickering effect, the correct fix is overlapping or do what @LearnCocos2D says. I recommend you reading his book "Learn Cocos2d 2 Game Development for iOS". I learned with it. ^_^ – gabuh Jun 02 '14 at 11:17
  • My Scrolling Window is 320px and left Image is 300 px Is my condition Correct? `if (tree1.position.x<-tree1.boundingBox.size.width) { tree1.position = ccp(tree2.position.x +tree2.boundingBox.size.width *2, tree1.position.y); }` – Stalin Pusparaj Jun 02 '14 at 14:26
  • You have to the maths... if you scrolling window is 320 px and you have two images of 300 px, sometimes you will have gaps of 40 or 20 px... depending on how you move your sprites. At least, if you have two images they have to equal the width of your device (or the view's width in wich you are scrolling). – gabuh Jun 02 '14 at 15:20
  • Please See this clip to see the exact problem https://www.youtube.com/watch?v=aQiVUsmx2A4&feature=youtu.be&hd=1 Actual problem is: gap comes between the images(gap appeares only a second after it will disappear) then images scroll smoothly without the gap. @LearnCocos2D I am thankfull if you Could share some code or logic. – Stalin Pusparaj Jun 03 '14 at 02:59
  • I said you before, you need images at least of the same width of your scrolling window. Resize your images to 320 px and test it. Think about it, when the left image is about to dissapear, if your right image is only 300px you have 20 empty pixels on the right. – gabuh Jun 03 '14 at 07:19