Scrolling Sprite Background
Objective:
Adding a simple infinite scrolling 2D background to the Space Shooter Project as a background template for usage in different levels.
Solution:
In this case the logic for the scrolling background will be driven by a script,
we add simple movement behaviour for the sprite transforms in a downward motion and wrap them up once they reach a certain vertical height.
There are various ways to achieve the desired result, another common and likely more effective approach would be to use a custom shader.
Necessities:
- Empty Unity C# Script “ScrollingBackground”.
- A tileable background texture.
Logic:
First we store a reference to the two sprite transforms that we will use and add a float variable so we can manually adjust the movement speed in the inspector. If your image is perfectly tileable you can flip it on the Z axis to extend your seamless pattern.
Create a void Movement() method that will be responsible for the transforms movement behaviour. Don’t forget to initialise it in the Update() method. Here we assign a new Vector3 variable to the transform position and update its Y position for ‘_scrollspeed’ seconds per frame.
Create two new float type variables in which we can store a vertical difference and a minimum height to reach. The input depends your sprite size.
You can measure your sprite by positioning the 1st Image at 0,0,0 and snapping the 2nd Image on top of it. In my case that’s 20.48
Then create a void Wrap() method that will be responsible for repositioning the Transforms once they reach a certain height. If the transforms current position on the Y axis is lower than the ‘_minimumHeight’, we assign the position Y of the first transform to the current position Y of the second plus the vertical difference multiplied by two and visa versa for when the second transform reaches the minimum height.
Note to self:
The references to the transform positions we store are calculated from the center point of their Transform, so in order to wrap it up above the second Transform we grab the second current position.y and add the Transforms total length multiplied by two.
Editor set-up:
In the Unity Editor we then attach the script to a new GameObject. The Sprites that you are using should be a child of this. Assign the First and Second Background in the Script component.
By using a Sprite Renderer you can specify additional settings to sorting layers. Create a new sorting layer “Background” and assign both Transforms to this layer. That way we can keep the visual space organised when more elements will be added later.
Adding a second layer
To apply more variance I made a different tileable background which can be displayed on top of the first scrolling background while having a different scrollspeed value.
In the script we have to adjust something because we don’t want the backgrounds to be (re)positioned in the same position.z. Instead we create a new variable that will return position.z per default and in case there is an offset assigned; position.z + the offset.
