Playground Pattern: Scrolling Background Elements

This tutorial will show you how to create a scrolling effect by spawning GameObjects, scrolling them down the screen, and destroying them when they get to the end.


WARNING
This tutorial will NOT work well with a single scrolling image for the entire background – it is intended for having multiple small images scroll, such as individual houses, trees, etc.



Required Tasks or Knowledge

Video Tutorial

Step 1 – Create a Scene

Create a scene for your environment to be placed in. You may want to name the scene something like “Level 1” if your game will be organised into multiple levels. If your game will be all one big level, you could name it something like “InGame”.

Create a scene by choose File > New Scene, and save the scene in the Scenes folder inside your project’s Assets folder.

Step 2 – Drag the image that you want to scroll into the scene

Step 3 – Resize the scrolling GameObject to your desired size using the Game view for reference

Step 4 – Add the “Auto Move” component to the scrolling GameObject

Step 5 – Change the Rigidbody and Auto Move settings as desired

  • Set the Gravity in the Rigidbody to 0
  • Set the Friction in the Rigidbody to something higher, like 5
  • Set the Speed in the AutoMove to whatever you like
  • Set the Direction in the AutoMove to the direction where your object is moving

Step 6 – Add a “Timed Self Destruct” component to the scrolling GameObject

Step 7 – Set the Time To Destruction to a few seconds

Choose a number high enough that this object will definitely be off the screen by the time it is destroyed.

Step 8 – Add a collider to the scrolling GameObject, if desired.

Step 9 – Create a prefab from the scrolling GameObject.

Step 10 – Delete the scrolling GameObject from the scene.

Step 11 – Create an empty GameObject and name it “Spawner”.

Step 12 – Add the “Object Creator Area” component to the Spawner GameObject.

Step 13 – Set the collider on the Spawner to the desired size

The objects will be randomly spawned within this collider, so if you don’t want them to appear in a random place, just set the size to 0 in both x and y.

Step 14 – Set the collider on the Spawner to be a Trigger

Step 15 – Drag the Scrolling Object’s prefab into the Prefab To Spawn slot on the Spawner.


WARNING
It is vital to drag the prefab from the Project folder in, NOT use an object in the scene. This is because if you use a scene object and that object is destroyed, the spawner will stop working.


Step 16 – Set the Spawn Interval to the desired time.

Larger interval means slower rate of spawn.

Step 17 – Save the scene


WARNING
It is very important to save the scene before testing any spawners, as they have the potential to crash you Unity if you create an infinite loop!


Step 18 – Test your spawner

Further Reading:

  • Patterns:
    • Environment Setup – One Image
    • Environment Setup – Tilemap
    • Environment Setup – Scrolling Objects
    • Level Transitions

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s