Pattern: Environment Setup – Foreground Objects

This tutorial will explain how to set up your game’s environment in Unity if you have a background image and several individual foreground objects.

If you have tiles, please use the tilemap tutorial instead, as it will make setting up your environment much easier than placing each tile by hand!

Required Tasks or Knowledge

Video Tutorial

Step 0 – If using Unity Playground, temporarily turn it off

Unity Playground simplifies a lot of things, Unfortunately it also hides some useful features, such as the collider editor button. Turn it off while working on this setup, but don’t forget to turn it back on when you are done!

You can turn Playground on and off using the “Playground” menu in the main menus at the top of the screen.

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 your background image into the scene

Drag your background image into the scene to create a GameObject for the background. Rename it “Background” or something similar. Resize it and position it as you want – remember to use the game camera to help guide you.

Step 3 – Attach Background GameObject to Camera for scrolling style background

If you want your background to scroll along with your camera, attach it to the camera object by dragging it onto the camera. This will allow you to make a much larger level than what is originally visible in the game camera area.

Step 4 – Drag one of your foreground images into the scene

Create an empty GameObject using GameObject > Create Empty. Rename it to something like “Background Collision 1”. This will be used to represent part of the collision for the background.

Step 5 – Position the foreground GameObject where you want it

Step 6 – If the foreground object should have collision, add a collider to the foreground GameObject

Not all foreground objects need collision – some are just there to make the game look more interesting! Only add collision to the object if it needs it.

This can be whatever type of collider you need based on this image. Most likely types include the Box and Circle colliders, but you can also use Polygon colliders for complex images. Click on your object and click “Add Component”, then search for the type of collider you would like to add.

Step 7 – Edit the collider to match the image

The resulting collider will already be somewhat fit to your image, but you may need to edit it to fine-tune it.

You can manually adjust the collider values on the component you created, or you can edit the collider using the “Edit Collider” button on the component. It looks a bit like the Steam logo.

This image has an empty alt attribute; its file name is hint.png

Remember that you can’t edit colliders using the button while Unity Playground is on – turn it off using the Playground menu at the top of the screen. Just remember to turn it back on when you are done!

Step 8 – Repeat steps 4-7 until your level is complete

Step 9 – Add a collider to the player, if not already present

Choose whichever type of collider best suits the player’s shape. I recommend not using Box colliders as the player tends to get stuck on things with them.

Step 10 – Test collision by moving the player around the environment

Ensure that the player can fit where they need to, and collides with everything they should.

Troubleshooting common issues:

  • My player won’t fit through an area they need to fit through!

    Try reducing the size of the player’s collider, and make sure your environment colliders are also the right size. It’s okay if the player’s collider is a little smaller than them – this is actually better than it being a little bigger!
  • My player isn’t colliding with the environment!

    Make sure both the player and the area you are trying to collide with have colliders – click on their GameObject’s and make sure the collider component is expanded. The collider is represented as a green line.

    If it looks right, check that both colliders are 2D colliders (2D and 3D don’t work together).

    Finally, check if both colliders have “Is Trigger” UNticked.
  • My player is not moving at all, or is teleporting way out of the environment!

    Check that you don’t have a really large collider somewhere, perhaps on the background image itself. This will cause you player to be colliding the moment the game starts, which can cause the above issues.
  • My player starts spinning when they touch the environment!

    This is due to physics controlling your player’s rotation. Fix this by selecting your player, looking at the Rigidbody2D component, and choosing Constraints > Freeze Rotation.
  • My player is sometimes hidden behind the background!

    Your player needs to have a higher Sorting Layer or Order in Layer than your environment. Click on the background image GameObject, go to the Sprite Renderer’s Additional Settings, and change Sorting Layer to “Background”. Click on the player GameObject, go to the Sprite Renderer’s Additional Settings, and change Sorting Layer to “Gameplay”.
  • My player can’t jump when they are touching the ground (Unity Playground)!

    Your ground needs to be tagged as Ground so the player knows it’s allowed to jump after touching it. Click on each of the foreground GameObjects and change their tag (at the top of the inspector) to Ground.

Step 11 – If you are using Unity Playground, turn it back on

Make sure to turn Unity Playground back on if you turned it off to edit colliders. You can turn Playground on and off using the “Playground” menu in the main menus at the top of the screen.

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: Logo

You are commenting using your 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