2D Sprite Background Image

This week, I intend to continue the tutorial on how to add the 2D sprite background image into the game scene and build the world using the Unity game engine 6. The project comes from last week, which I created in the second tutorial. Earlier, I mentioned that most game objects you create in the Hierarchy view appear in the Scene view. These game objects spawn at a world position, or at a local position when you make them children of a parent object. Below, you can see the same square I created in the Scene view, with the Camera projecting onto the game object in the Game view. Currently, you still do not see any background in the Scene view.

Recap Last Week: Camera Component

Hello, last week I wrote about explaining the game scene in a Unity project. It shows the Inspector with different kinds of component scripts on the GameObject in the Hierarchy. This includes the camera system that projects its view into the game scene. The camera is actually the Main Camera, which functions in the game scene and can manipulate its rendering. Such as hiding or disabling certain GameObjects from the camera’s view. Translating their movement from outside the camera view. I also wrote about and mentioned specific components of the camera system and the GameObjects with Sprite components. Additionally, I also created a new 2D sprite GameObject in the Hierarchy tab.

How To Add 2D Sprite Background Image

To create the background game object for the sprite is similar to creating a square by right-clicking on the hierarchy to select that game object. Also, the user has the option to press Alt+G to bring the game object menu up in the top panel, where they can 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.

Changing the 2D Sprite Color

Now, to make the difference between the usual square and background is you can adjust the value of scale, rotation, and transformation for the background. Changing the colour of the background game object makes the game scene more visually attractive. 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, 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 that can be seen below.

What Is Material On 2d Sprite?

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 will need a material object, also known as a shader. Those are 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. 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.

Align Position and Rescaling of Background 2D Sprite

Now, with the background game object selected, go to the transformation component for editing the transform scale. In the scale variable in the inspector, set the value that is suitable. For mine, I chose the value for X as 14, and Y as 9. This makes the game object scale accordingly with the size of your own game scene tab. For example, 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.

Fixing Viewable GameObject on Unity Game Scene

Use Z Axis on Position

Also, the previous square no longer appears in the game scene because the current background blocks the 2D square game object. To fix this issue, the user can choose between two methods, where one method directly adjusts how the square game object appears. In the first method, the user sets a transform position on the Z axis to move the background behind the other game object, like the square. The user can set the Z value to 1, which slightly moves the game object on the Z axis in the positive direction. In a 3D perspective, this adjustment places the game object farther from the camera. The other game object, like the square, stays at its current position.

Set Up Sprite Renderer Sorting Layer

Other is sorting the order of the sprite; you can see this in the Sprite Renderer component of the game object. In the additional settings, you choose a sorting layer and sorting order and then input the value for the game object. For the background game object, you must first set the sorting layer of that game object, similar to how you set it for the square game object. Otherwise, the square and background sorting layers will differ from the current one you created because Unity sets the default automatically. Once you see that the square and background share the same sorting layer, you should input the order in layer for the background game object as -1. That setting moves the background behind the square game object.

Results from Fixing Viewable GameObject

Now the game screen shows the square in front of the background image. Before that, it was behind the background or at a similar position to the square. Additionally, the user can choose the sprite from any image that is available in the project. They can be obtained from either the package manager, importing, or dragging those assets into the Unity game project. This will add an asset to the game. How to add assets to the game? I will include that in the next tutorial section, Insyallah.

Conclusion on Adding Background

In conclusion, now the user can create a background sprite game object using only the keyboard or mouse. The user also has the option to choose a solution. This is to fix certain game views of the background game object so it does not appear in the game scene. This includes certain uses of game object components’ transform and SpriteRenderer to do the object. The use of C # scripting is not covered in this section. Thank you for reading this tutorial article.