This is an excerpt chapter from my Weekend Code Project: Unity’s New 2D Workflow book. I hope you enjoy this free content on how to use Unity’s new 2D features. If you like what you see, please pick up a copy of the book to get access to the artwork, source code and a PDF/ePub version of the book.
At this point, we have an animated sprite on the stage, but not much else. We are going to start creating reusable GameObjects called prefabs in our project. Our first one will be this monster. Before we start, you should give it a more descriptive name in the Hierarchy tab. Let’s call him Player. Then drag the Player instance from the Hierarchy tab to our Prefabs folder.
You will now notice that the instance of the Player’s name is now blue in the Hierarchy view. We now also have a Player prefab in our Prefabs folder.
It is important to note that, while you can continue to edit the instance of the Player in the Scene, none of those changes will be saved to the actual prefab itself. Likewise, as you continue to modify the prefab, some instance-specific properties, such as position, scale, and more, will not be updated on the instance itself. This disconnect is a little frustrating to deal with at first, but it helps to understand that our Player prefab is the base template of all Players in our game. Any instance of the Player in the Scene has its own unique values from the base properties, allowing you to customize each individual prefab derivative on a case-by-case basis. While you may be questioning this for the player, it will make more sense when we create the bad guys.
If you are working with an instance of a prefab in the scene and want to update the actual prefab itself, you can use the inspector’s Apply button.
Let’s make another prefab for our game. Find the knight sprite in the Assets folder, drag it to the Scene, and then rename him Knight. Once you have done that, drag the instance in the Hierarchy tab back into the Prefabs folder.
We now have our basic characters for the game. Let’s look into making the rest of the level.
Laying Out the Scene
For this introduction, I am not going to get into too many details on building a complicated level layout. Our level will consist of four layers: the ground, the clouds in the foreground, the clouds in the middle ground, and the clouds in the background. You can find them in the Artwork folder.
You’ll probably notice that, when you try to drag them all to the Scene Unity wants to make an animation out of them. To avoid this, you will need to drag each sprite over one at a time. When you are done, they will probably look like a mess in the scene and will be covering up the Player or Knight we just created.
In order to fix this, we will need to change the layer order of the GameObjects. Let’s start with the ground by selecting it and going into the Inspector. Under the Sprite Renderer component you should see a setting for Order in Layer, set that to -1.
This will place it behind our Player and Knight, since they will remain at the 0 order of the layer. After that, set the clouds-foreground to layer order -2, so it will sit on top of our ground. The clouds-middle-ground should get a layer order -3, and the sky-background will get a layer order of -4. Make sure you preview the camera to ensure everything is still in view. You should end up with something like this:
Now we can take advantage of one of Unity’s greatest feature, which is its ability to let you build out your game visually. Let’s change the layout of the level to look more like this:
Basically, the way this works is that our foreground clouds cover the top part of the ground. The middle-ground clouds go right up to the lowest dip in the foreground clouds, so you always see dark blue behind them and the sky is in the middle. While you are at it, make the sky a little larger to match the width of the other layers.
As you can see, you are easily able to resize anything in the Scene and move things around, just like in a photo editor. Unfortunately at this point you may notice some strange artifacts showing up in the background images that look something like this:
Going into our Artwork folder and selecting one of our sky images to easily fix this. Once you have the sprite selected, go to the Filter Mode in the Inspector and change it from Bilinear to Point.
Make sure you hit apply and you will notice that the artifact will disappear in the Scene inspector.
Go ahead and do this for all of the level artwork and the other textures as well. Simply select them all in the artwork folder by clicking on the first file and while holding down Shift, click the last one. You will also need to filter out anything that is not a texture. To do this, select the icon to the right of the search box and select Texture, which will highlight all the Textures in the directory.
This will allow us to make a group modification. By setting all of our textures to Filter Mode Point we will have clean looking pixel art in Unity. Now we are ready to set up some physics and collisions to give this game some life.