Scrolling Background Issue

Unity Engine
,
1

Hi,

So I got a 3 layered parallax background working thanks to Brady, and the background moves smoothly enough for now (Sprite Manager 1), but there is a small problem… When the image is repositioned to rescroll there is a slight gap between the sprites…I dont know why this happens as i think the calculations in the code seem fine:

The sprites are of size 480 x 320 and im positioning them at 240f and 720f… Totally stumped.

void Update () {

((GameObject)BgQuads[0]).transform.Translate(Vector3.left * 100 * Time.deltaTime);
((GameObject)BgQuads[1]).transform.Translate(Vector3.left * 100 * Time.deltaTime);

if(((GameObject)BgQuads[0]).transform.position.x<-240f){

((GameObject)BgQuads[0]).transform.position = new Vector3(720f,((GameObject)BgQuads[0]).transform.position.y,((GameObject)BgQuads[0]).transform.position.z);

}

if(((GameObject)BgQuads[1]).transform.position.x<-240f){

((GameObject)BgQuads[1]).transform.position = new Vector3(720f,((GameObject)BgQuads[1]).transform.position.y,((GameObject)BgQuads[1]).transform.position.z);

}

}

void GenerateBGQuad (int num) {

BgQuads.Add(Instantiate(BgPrefab,new Vector3(240f,160f,755f),Quaternion.identity));
BgQuads.Add(Instantiate(BgPrefab,new Vector3(720f,160f,755f),Quaternion.identity));
BgQuads.Add(Instantiate(BgPrefab,new Vector3(240f,110f,555f),Quaternion.identity));
BgQuads.Add(Instantiate(BgPrefab,new Vector3(720f,110f,555f),Quaternion.identity));
BgQuads.Add(Instantiate(BgPrefab,new Vector3(240f,60f,355f),Quaternion.identity));
BgQuads.Add(Instantiate(BgPrefab,new Vector3(720f,60f,355f),Quaternion.identity));

}

void GenerateBGSprites(){

Sprite s = bgSpriteManager.AddSprite((GameObject)BgQuads[0],480f,320f,0,512,480,320,false);
BgSprites.Add(s);

Sprite s1 = bgSpriteManager.AddSprite((GameObject)BgQuads[1],480f,320f,480,512,480,320,false);
BgSprites.Add(s1); …
Here is a screenshot for clarity:

1024×640 391 KB

Thanks a lot…

2

I get similar tearing in my scroll routine if it tries to scroll the tile map by anything less than a pixel. Make sure tile maps only move in pixel distances. An alternative would be to overlap the tiles by a pixel instead of flush next to each other.

3

with your code you’ll notice the gap gets bigger if you increase the scroll speed.

The reason for this is that your not accounting for the amount you’ve overshot the x position on that frame so you need to compensate for it when you reposition the object back to the start

something along the lines of…

Vector3 position = transform.position;
if( position.x < -240f )
{
position.x = 720 + (position.x + 240f); // - - 240 = + 240
}
transform.position = position;

4

There is also the issue of if you are using point filtering, these texels are rounded to the nearest whole screen pixel, so when it is near the “edge” of a screen pixel, it can round up when you want it to round down. So offset your positions by the equivalent of 0.5 screen pixels. You and I had talked about this a bit via PM, but I think perhaps when you are wrapping around, you still need to make sure that the distance between your two pieces is half a pixel. If you’re offsetting it by half a pixel, that will work initially, but your wrap logic needs to also position it so that it overlaps the other piece by half a pixel just to be safe when using point filtering. Though if your background is going to move constantly and never stop, then bilinear filtering probably won’t noticeably change the quality, and it should get rid of the gap.