Beginner 2D UFO Game 2 of 9: Setting Up The Play Field – Unity Official Tutorials


Now that we have our main scene saved let’s create our game board, or play field. To do this we’ll need to add in our first sprite, called Background. We can do this by navigating to the folder Sprites which was imported when we imported our assets. In Sprites we’ll see a sprite named Background. Drag Background from the project view in to the hierarchy. This will create a new game object called Background. This new game object is created with a sprite renderer component attached. Game objects are the entities which scenes are made out of in Unity. Each piece of a game scene, whether it’s the player, a wall in the level, or a coin can be it’s own game object. All game objects are created with a transform component attached. The transform component is used to store and manipulate the position, rotation and scale of the object. To add additional functionality to the game object we can add additional components. Adding a component allows a game object to do something. For example adding an audio source component to a game object allows it to play sound. The sprite renderer component allows a game object to display a 2D image, shown in it’s Sprite Field. Dragging a sprite in to the scene or hierarchy is a shortcut provided by Unity. Since we can’t have a sprite in the scene that’s not attached to a game object Unity creates a game object with the appropriate sprite renderer attached and automatically references the dragged sprite asset to be displayed. Because we drag the sprite in to the hierarchy window it should appear at origin, or the position (0, 0, 0) in our world. To make sure the sprite is at origin reset the transform component using the context sensitive gear menu in the upper-right of the transform component. This will reset the position of the game object to the coordinates (0, 0, 0) in our scene if it’s not already there. The origin point of the world is where all of the coordinates in the scene are calculated from. Currently we can only see part of the background in the scene view. With the game object still selected move the cursor over the scene view and type the F key. This allows us to see the entire game object in the scene view. You can also choose Frame Selected from the Edit menu. Looking at our current scene we can see grid lines which provide a reference for spacing in the scene. For the purposes of this project we’ll turn these off. Select the Gizmos menu in the scene view and deselect Show Grid. Now let’s create our Player object. In this assignment our player will be represented by our UFO sprite. Drag the UFO sprite in to the hierarchy. A game object called UFO will be created with an attached sprite renderer component to display the sprite we dragged in. Let’s rename our newly created game object from UFO to Player. With the UFO highlighted navigate to the inspector and click in the text field at the top. With the text highlighted type Player. Now we have two sprites in our game. Because sprites are not 3D objects we need to manually determine which sprites will be rendered on top or in front of one another. The way we do this is by assigning each of our sprites to a sorting layer. If we click on the Sorting Layer drop down in our sprite renderer component we can see that there are four sorting layers already defined in our project. These are Default, Background, Pickups and Player. These sorting layers are part of the project settings. They were imported when we chose to import our asset package as a complete project in episode one. To add your own sorting layers select Add Sorting Layer and then click the + button. Sorting layers can be reordered by clicking and dragging. We already have all the sorting layers we need so we can delete this one we have just created by highlighting it and clicking the – button. The order of the layers here is important. Layers are rendered in list order from top to bottom. With the bottom layer being rendered last and therefore appearing in front of the previous layers. This means that objects in the Background sorting layer will be rendered on top of objects in Default and that objects in Pickups will be rendered on top of objects in Background, and so on. For this project we will use the layers and their order as defined in the project settings. Highlight the Background object. In it’s sprite renderer component set the sorting layer to Background. Then highlight the Player object to Player. and set it’s sorting layer. Next we want to adjust the scale of our Player. We can do this in a number of ways. One way is to use the Scale tool. With the tool selected simply grab the access handle we want to change and drag the handle rescaling the Player. We can also click and drag on the title of the fields we want to change. Or we can type a number directly in to the fields we want to change. We can tab between fields and hit enter or return to confirm our choice. Let’s use 0.75 for the X and Y fields to scale the Player to 75% of it’s original size. Note that because we’re working in 2D space changing the scale value for the Z axis will have no effect. We can think of each sprite as a pane of glass with an image painted on it. It’s flat without depth or volume. You may have noticed that if we change either the X or Y scale values to negative numbers the image will be reversed along the horizontal or vertical axis respectively. So far we’ve been working in the scene view, which you can think of as our work area. If we click over to the game view we can see what our player will actually see when they’re playing the game. Notice when we switch to the game view our view is much tighter on the player and we can’t see the whole background. In the case of the game that we’re trying to design this is going to make it pretty difficult to play so what we’re going to do is we’re going to adjust the view of the camera so that it can see more of the board. Let’s start by highlighting the main camera. With the main camera highlighted we’ll see that it’s also a game object with a header and transform but it has a camera component attached. When we created this project we set the project type to 2D. With a 2D project all new cameras will use orthographic projection to render the scene. Using orthographic projection means that objects will not appear larger or smaller based on their distance from the camera. To visualise how this works let’s temporarily exit 2D mode. In the scene view we can see our camera and our sprites. We can rotate the view by alt or option + dragging in the scene. If we highlight the camera game object we can see the camera’s frustum. The frustum is the camera’s viewable area. If we briefly change our camera’s projection to perspective we can see that the shape of the frustum changes and so does our view of the scene. If we temporarily move our Player game object towards the camera along the Z axis we will see that it’s size grows larger in the camera preview. If we switch back to orthographic projection however we can see that although the object is closer to the camera it does not appear larger in the frame. Let’s reset the Player’s position to (0, 0, 0) and make sure the camera is using orthographic projection before we return the scene view to 2D mode. Next let’s get a better view of our play field for our camera. Click on the game view. To change how much is visible to an orthographic camera we adjust it’s Size field. Let’s click on the Size property of our camera and drag. By dragging we can find that a value of around 16.5 works nicely. Now we can see that the Player is at the centre of the board, and the board is sitting on a blue background. This blue background is the default for new scenes when working in 2D mode. Let’s change this to something better suited to our game. We can see that the camera has a property called Background. This allows us to select the background colour. Click on the colour swatch to open the colour picker. To choose a colour we can click and drag or enter a value numerically. Let’s use numeric values to set the background colour. For the colours red, green and blue let’s use the values 32, 32, 32. This will give us a nice dark grey background colour. Congratulations, we now have a Player game object and a background play field. In the next lesson we’ll learn how to add a script to our Player to enable them to move around the playing field using 2D physics. Subtitles by the Amara.org community

About the Author: Garret Beatty

Leave a Reply

Your email address will not be published. Required fields are marked *