Tutorial: Basic Techniques for Unity Background Setup

Hello, last week I wrote about explaining the game scene in a Unity game project that shows the inspector with different kinds of component scripts on the game object in the hierarchy. This includes the Camera system that projectile their scope in the game scene, containing different kinds of game objects in the hierarchy. This camera actually is the main camera, where it is functioning in the game scene and can manipulate its rendering system, such as hiding or disabling certain game objects from the viewing camera or translating their movement from outside the camera view. I also wrote and mentioned the specific component in the camera system, the game object with the Sprite component, and creating a new 2d game object in the Hierarchy tab.

This week, I intend to continue the tutorial on how to add the 2d background image into the game scene or world using Unity game engine 6. The project is use from the last week that is being created before the first tutorial. Before that, should I mention that most of the game object is created in the Hierarchy view can be seen in the scene, where those game objects are being spawned at the world position and local position when it is the child of a parent. Below, you can see the previous square being created in the scene with the camera being projected onto the game object in the game view. Currently, there is no background to be seen in the scene; that is why the game view shows the colour of the camera background as a solid colour instead of the other background game object.

White square centered on a dark gray grid background — 2d square game object in the scene

To create the background game object for the sprite is similar to creating a square by right-clicking on the hierarchy to choose different kinds of options using the mouse. Also, the user can press Alt+G to bring the game object menu up in the top panel, where the user has the option to choose 2d object using the keyboard. To add the background to the scene, choose 2d object, sprites, and square selected. Now the game object is automatically created with the same colour and shape in the scene. Once it is created, it should have a similar view to the square create in the last week. Now rename the square created just now with the name background in the Hierarchy tab panel section like in the image below.

Unity editor showing Hierarchy panel with SampleScene containing Main Camera, Global Light 2D, Square, and Background — Renaming the square sprite to Background

Now, to make the difference between the usual square and background is you can just change the value of scale, rotation, and transformation for the background game object. Changing the colour of the background game object also makes your game object more visually attractive, so the player can seen in the game scene. To change the colour of the game object, select the background of the game object in the hierarchy and look in the inspector for the Sprite component. There is a Colour variable in the component that you can select on the right to choose a colour from the available sphere of the grid colour. The default colour for the square sprite is #FFFFFF in the hexadecimal input list in the colour tab that can be seen below.

Color picker tool showing a red color selected with RGB values 255, 0, 0 and hexadecimal code FF0000 — Selecting the red colour using a hexadecimal number

Now change the hexadecimal colour to whatever colour of your choice. The most options is the colour red, which has the hexadecimal number #FF0000. This will change the appearance of the background to red using this method. Also, usually the colour showing the game view will need a material object, also known as a shader, which is automatically created for them when the game object is created. Usually, un assign of material will make the game object unrendered in the game scene or knows as no texture. Its colour is also different, depicted in purple. Below is the colour of the game object of the background unrendered without the material and shader.

Bright pink square centered on a dark blue background — No material selected for the game object in the inspector tab

Now, with the background game object selected, go to the transformation component for editing the transform scale of the background game object. At the scale variable in the inspector, set the value that is suitable for the size of the game view. For mine, I chose the value for X as 14, and Y as 9. This makes the game object scale accordingly with the size that you can see in the image below, where I rescale those game objects with my game screen. I also had to reset the position value for both X and Y to zero so that the game objects align a little to the middle or at the centre.

Large red rectangle centered on a dark blue background — Scale of the game object background in the game view

Also, actually, the previous square is no longer visible or viewable in the game scene because the current background is blocking the 2d square game object. To fix this issues is, the user will have two choices to select from, where one method involves fixing the square game object from being viewed. One method is to choose a transform position on the Z axis to put it behind the other game object, like the square. Those values can be set to 1, where it slightly moves the game object on the Z axis into the positive direction, where it is far away from the camera in 3d perspective, while the other game object stays on the current position, like the square.

Background settings panel in a design tool showing position at X 0 Y 0 Z 1, rotation at 0 0 0, scale at X 14 Y 9 Z 1, with tag untagged and layer default — The position of the Z axis on the background has been set to 1

Another method is sorting the order of the sprite; this can be seen in the Sprite Renderer component of the game object. In the additional settings, there is a sorting layer and sorting order for the value of the game object to be input. For the background of the game object, you must first set the sorting layer of the game object similar to the square game object. Otherwise, the square and background sorting layers are different from the current one you created or the default that is made automatically. Once you see that the square and background are similar with the sorting layer, now you can input the order in layer for the background game object to be -1, which means behind the square game object sprite like in the image below.

Unity Sprite Renderer component panel showing settings for a red square sprite with simple draw mode, default-line material, and rendering layer mask set to Default — The default sorting layer for the background and the order in layer is -1.

Now the game screen shows the square in front of the background image instead of behind the background or at a similar position to the square like on the screen below. Additionally, the user can choose the sprite from any image that is available in the project, which is obtained from either the package manager, importing, or dragging those assets into the Unity game project. This will add an asset for the game. For that, I will include that in the next tutorial section, Insyallah.

Red background with a small white square centered — Game scene view of the Unity game project for square and background.

In conclusion, now the user can create a background sprite of a game object using the Unity game engine step by step using only the keyboard or mouse. The user also has the option to choose a solution to fix certain game views of the background game object so it does not appear in the game scene. These include certain uses of the game object component of transform and SpriteRenderer to do the object instead of using C # scripting, which is not covered yet. Thank you for reading this tutorial section.