A lot of game development is occupied by time spent in the Unity Editor. There are even whole jobs specifically for Level Design. This is both for function and visual appeal. In this lesson we will spend some time preparing our scene to look more like the finished game.

If you followed along with the first lesson, open your existing “Breakout” project. Otherwise, you can start from this sample project here. We will be continuing to work in the “SampleScene”.

Camera

At the moment, our scene has three GameObjects. The first, “Main Camera”, was included automatically.

In the Scene window, you will see an icon that looks like a camera in the center. This represents the location of the object in the 3D world. You will also see a rectangular border with a thicker white line than the grid lines. That border represents the region of space that the camera can see. Since both the Ball and Wall are inside the rectangle, they are visible by the camera.

There are a few things that determine the size and shape of the camera’s visible region. Click the Game tab found above the Scene window. You will now see through the Camera, exactly as you would if the game were being played. This can be helpful for positioning, though you can not directly interact with objects in this window like you can in the Scene window.

Just under the tabs are buttons related to the Game window. One of them controls the “aspect ratio” of the camera. In other words, it determines how wide vs how tall the screen should appear. When a game is “published”, the number of pixels rendered, and the aspect ratio used, are determined by the device that the game is running on, such as a television screen, web page, or even mobile device. Mobile devices can even be presented in both portrait and landscape orientations. Use this pull-down to simulate your intended build target. You can pick from a variety of presets, or even create your own if needed.

As you change aspect ratios, change back to the Scene window, and take note of how many grid units are contained within the Camera’s frame. You should notice that while the number of horizontal units will change, the number of vertical units remains a constant. There will always be exactly 5 grid units above and below the location of the camera.

Look in the Inspector window at the settings of the “Camera” Component. You will find a “Size” property of 5. This is what controls the amount of vertical space that remains visible.

For this project, I will create a game that occupies a portrait style layout (something taller than it is wide) regardless of the screen it is displayed on. Any remaining space that appears as a result of mis-matched aspect ratios, will just be left rendering black pixels.

Use the Inspector window, to set the “Camera” Component “Background” color to Black.

Background

I liked having some color in the background, and I want something to visually separate the game board from the empty space, so we can fix that by adding another Sprite. In the Hierarchy window, right-click, and choose “2D Object -> Sprites -> Square”.

Note that this GameObject does not have any collider or rigid body Components and therefore it will not interfere with the movement of our Ball.

In the Inspector window, rename the object to “Background”.

For the Transform, set the “Scale” to X: 4, Y: 10, Z: 1.

For the Sprite Renderer, set the “Color” to R: 30, G: 100, B: 100 (Tip: Use the RGB 0-255 mode in the picker.

Under “Additional Settings”, set the “Order in Layer” to -1. This makes sure the Background will render behind other objects.

Walls

The ball needs to be able to bounce off the sides and top of the board. If it hits the bottom, it will eventually lead to a failure. Therefore I need some sort of walls to completely border the play space. We also don’t need to see the Walls.

Select the “Wall” in the Hierarchy window. Next, look in the Inspector window and uncheck the box by the name of the “Sprite Renderer” Component. This will cause the Wall to disappear from the view of the Camera, but the Collision area will remain, which you can test by playing the scene if desired.

Using the Transform, move the Wall “Position” to X: 0, Y: -5.5, Z: 0, and “Scale” the Wall to X: 6, Y: 1, Z: 1.

Right-click the Wall in the Hierarchy window, and choose “Duplicate”. This will create a copy of the GameObject and all its Components. The new Wall will be called “Wall (1)”. Create two more duplicates for a total of four walls.

Set the Transform “Position” of “Wall (1)” to Y: 5.5 (positive), so it appears at the top of the board.

Set the Transform “Position” of “Wall (2)” to X: -2.5, Y: 0. Set the Transform “Scale” to X: 1, Y: 10.

Set the Transform “Position” of “Wall (3)” to X: 2.5, Y: 0. Set the Transform “Scale” to X: 1, Y: 10.

Organization

The more complex a project grows, the more important it is to have developed good organizational habits. In the first lesson, we showed how to organize the project itself by creating separate folders for different types of assets. There are also ways to organize the Scene.

Take a look at the Hierarchy window and note how our list of GameObjects has grown somewhat large. It is also a bit messy, since there seems to be no order to it, rather it be by function, or alphabetized, etc.

You can drag and drop the GameObjects into a a different order, but it is also possible to group them. Right-click in the Hierarchy window and choose “Create Empty”. Rename the object to “Walls”. Then drag and drop the original Wall objects on top of the new “Walls” object. This will create a Parent / Child relationship between the objects, such that the children “inherit” traits from the parent. For example, if you disable the parent, all of the children will become disabled. If you move the parent, all of the children will move with it. In this use case, it is only being used to make things look more organized.

Thanks to our new grouping structure, the names of our Walls feel a bit redundant, and are too generic. You could rename them based on their positions such as “Top”, “Bottom”, “Left” and “Right” to make things easier to find and work with.

When you are satisfied, make sure to Save the scene.

Summary

In this lesson, we learned some basics about the camera, and how a finished game may appear with different aspect ratios on different devices. We added some non-physics objects for display, such as the background, and then learned how to duplicate objects to create wall boundaries around our play space. Finally we made use of Empty objects to help organize the scene’s hierarchy.

If you’d like you can also download the completed project for this lesson here.

If you find value in my blog, you can support its continued development by becoming my patron. Visit my Patreon page here. Thanks!