This chapter is from the book
This chapter is from the book
This chapter is from the book
Our First Level
Taking what we have learned from this chapter and our level design concept, let’s start building our first level! Find the Chapter 4 project files for the book, and open up the First_Level Scene file. The Project has all of the sprites we will need set up as Prefab objects.
Positioning GameObjects Manually
From the Project window, go to Assets > _prefabs and select the grassMid Prefab. Left-click and drag, then drop this into the Scene View or Hierarchy to add our first piece. Let’s adjust the placement by setting the Prefab’s Transforms. With the Prefab selected, go to its Transform Component in the Inspector and reset its Position values (the X-, Y-, and Z-values) to 0, 0, and 0 respectively. We have placed our fist sprite! Figure 4.11 shows the Prefab with the correct placement.
)
Figure 4.11 Inspector window with grassMid Prefab Component
Using the Snap Settings to Position GameObjects
We can also use the Snap Settings tool described previously in this chapter. This will snap the GameObject with precise values. From the Project Browser, pull in another Prefab asset to make our current ground a little more solid:
- Find the grassCenter Prefab and drag it into the Scene View, trying to roughly place it below the grassMid Prefab.
- Open the Snap Settings window by going to Edit > Snap Settings.
- With the values for Move X, Move Y, and Move Z all set to 1, click the Snap All Axes button.
- The grassCenter Prefab should now be snapped below the grassMid Prefab and sitting in world space at 0, –1, 0 in X, Y, and Z respectively.
Using Grid Snapping to Position GameObjects
Last, we can precisely position a GameObject by using the grid snap option. This takes the pivot point of the sprite as the position from which it snaps to place it exactly where you intend. You can do this with multiple selected tile sprites as well.
- Select both the grassMid and grassCenter GameObjects.
- Duplicate the GameObjects by tapping Ctrl + D. Notice that you now have two of each object in the Hierarchy window.
- Select one of the grassMid and one of the grassCenter Prefabs from the Hierarchy window.
- Hold Ctrl and left-click and drag the tiles one snapped unit to the right in the Scene View. You will now have four sprites to make up the first part of our ground-floor tiles.
- Continue duplicating and positioning these from left to right, until you have a complete ground surface.
You should have something that resembles Figure 4.12.
Figure 4.12 Scene View with our initial GameObjects laid out
)
Efficient Level Design
Now that we have the initial ground for our first screen, we will want to duplicate it for the next screen. While it did not take a lot of time to create the first ten, having a quicker solution would make things easier on our level designer! We could simply select all 20 grassMid and grassCenter GameObjects, duplicate them, and position them; let’s see if we can find a more efficient way:
- Create an empty GameObject by going to GameObject > Create Empty.
- Double-click on the name or right-click and select Rename. Let’s rename our GameObject “Screen1.”
- Reset the Screen1 GameObject by resetting its Transform values. Remember the gear icon to the right of the Transform text? Click the drop-down and select Reset.
- Select all of the grass Prefabs up to this point in the Hierarchy.
- In the Hierarchy window, left-click and drag them to the Screen1 GameObject and release. They will now be parented under Screen1.
- With the Screen1 GameObject selected, go to Edit > Duplicate to create another instance of the tiles we have already placed. Rename this new one “Screen2.”
- Using our grid snapping technique, move the Screen2 group to the right 10 units. The Transform values for Screen2 should be 10, 0, 0 in X, Y, and Z.
Adding Sorting Elements
We covered Sorting Layers earlier in the chapter. Now let’s set up a couple of instances of them and see how we can add some simple depth and details to our level. Learning how to do this early will help when you have finished the level design and want to add details, and it may give you ideas for adding your own variations.
We will first add a fence GameObject to the foreground so that our Player GameObject will walk behind it. Then we will add water and a ledge. With the ledge sorted to be in front of the water, it will appear as though there is some depth in our Scene. These details will go a long way toward giving the game life.
- Select the fence Prefab from the _prefabs folder. Place this roughly at the end of the first screen, just above the ground.
- Duplicate this and move it to the right, into the second screen. Make two more copies of this, placing them to the right.
Use the Snap All Axes tip from earlier to make sure these are lined up correctly. Your Scene should resemble Figure 4.13.
Figure 4.13 Scene View with the newly placed fence GameObjects
- Make sure to place the first fence Prefab we added to our Scene under the Screen1 parent GameObject. Place the last three under the Screen2 version. This keeps our Hierarchy clean, and we will be able to find elements later on much more easily.
)
Last, we need to make sure we set the sorting for these, so our Player GameObject will walk behind them. We could do this on a per-object level, but that would take more time as well as make things less consistent. Doing this to the master Prefab in the _prefabs folder will instantly update any of these we have added to our Scene.
Select the fence Prefab in the _prefabs folder and look at its properties in the Inspector. Select the drop-down for the Sorting Layer and change it from Default to Foreground. Now our fence tiles will sort in front of our Player GameObject.
Now let’s add the ledge and water. For this we will sort our sprites going back into the Scene. To make our Scene look slightly more realistic, we will change the end of our ground pieces to a ledge and add water:
- Remove the last grassMid and grassCenter GameObjects from Screen2 by selecting them in the Scene View or Hierarchy and hitting the Delete key.
- From the _prefabs folder again, select the grassCliffRight Prefab and drag it into the Scene View. Place this roughly at the end of the tiles for Screen2.
- Select the liquidWater Prefab and place it directly below the ledge sprite.
- Last, select the liquidWaterTop_mid Prefab and place it directly over the grassCliffRight GameObject.
- Let’s set the Sorting Layer for the water so it draws behind the ledge sprite. Again, let’s do this in the Prefab so that any instance of the water will automatically sort correctly. Select the water Prefabs and in the Inspector, set the sorting to be Background.
- Finally, we need to make sure the GameObjects are positioned precisely. Select the grassCliffRight and the two water GameObjects and hit the Snap All Axes button again.
Your Scene should resemble Figure 4.14. We have gone ahead and added a few additional sprites for Screen3, including an island and a bridge, as well as finished out the water. Remember to use your Sorting Layer and Order in Layer attributes to set the priority of the sprites. See the First_Level_Final Scene file if you get stuck.
Figure 4.14 Our ledge and water GameObjects placed
)