Scrolling Sprite

Hey guys!

I am currently working on a little proof of concept. It is a 2d sprite based mobile game.

I am currently implementing a scrolling background, which is just two walls, they are sprites.

I have it working as intended, and I thought I had addressed random gaps, but it seems like randomly for a split second I am seeing a bit of camera color (behind the walls) at the right edge of the screen.

Here is my scroller:

Code (csharp):

1.  
2. public class Scroller : MonoBehaviour{
3.         [SerializeField] private float scrollSpeed;
4.         [SerializeField] private GameObject wall_1_GO;
5.         [SerializeField] private GameObject wall_2_GO;
6.             public bool scrolling { get; set; }
7.      
8.         private void Update(){
9.             // this is being set from the player input!
10.             if (scrolling){
11.  
12.                 // Handle the Reset checks / Resetting before the movement, otherwise it will create gaps!
13.                 if (wall_1_GO.transform.position.x == -Globals.SCREEN_WIDTH){
14.                     ResetGameObject(wall_1_GO, wall_2_GO);
15.                 }
16.  
17.                 if (wall_2_GO.transform.position.x == -Globals.SCREEN_WIDTH){
18.                     ResetGameObject(wall_2_GO, wall_1_GO);
19.                 }
20.  
21.                 // Scroll the walls!
22.                 ScrollGameObject(wall_1_GO);
23.                 ScrollGameObject(wall_2_GO);
24.             }
25.         }
26.  
27.         private void ScrollGameObject(GameObject target){
28.             target.transform.position = Vector3.MoveTowards(
29.                 target.transform.position,
30.                 new Vector3(
31.                     -Globals.SCREEN_WIDTH,
32.                     target.transform.position.y,
33.                     target.transform.position.z
34.                     ),
35.                 scrollSpeed * Time.deltaTime);
36.         }
37.  
38.         private void ResetGameObject(GameObject target, GameObject destination){
39.             target.transform.position = destination.transform.position - target.transform.position;
40.         }
41.     }
42.  

The SCREEN_WIDTH constant is calculated on app start, but it is based on the width of the wall sprite and adjusting the orthographic size of the camera. So the wall is 1920 wide, and it returns 19.2 which is correct as it snaps the orthographic size of the camera to the edge of my walls!

I tried variations where I check >= instead of == but it didn't seem to make a difference. The biggest difference was moving the scrolling to after the reset checks. It no longer creates gaps, it just will randomly for a very brief amount of time, reveal the camera color on right edge of screen.

From the move button, I set scrolling to true on pointer down then on pointer up it gets set to false. Not sure if that might be related to it.

Thanks guys!

 

I always overlap my sprites by a smidge, such as by multiplying them by scale 1.001f or so.

It's hard to reason about why you are seeing the crack, but floating point always has errors, and yet a pixel is either set or not onscreen, so stuff like this can happen. Same goes for floor tiles; I usually just make them 0.1% oversize.

 

I took .2 off of the calculated SCREEN_WIDTH which tells the camera where to wrap around the first background basically, so now there is a sliver out of view of the camera, effectively the same as scaling up the walls. Anyways, this looks to have solved it! I think it was because I was snapping the image back to exactly the edge of the camera and since it was moving there would randomly be .00001 of a second where it wasn't totally back there but it was scrolling still. Whatever the case may be, dialing back the width value to the ortho size calculation seems to have fixed this! Thanks so much!