Implementing Unity game engine and assets for 2D game development [Tutorial]

The rise of mobile platforms has been in part thanks to its popularity with indie developers, who prefer the short development cycles. The most prevalent medium on mobile is 2D and Unity has a host of features that support 2D game development, including Sprite Editing and Packing, as well as physics specifically designed for 2D games. In this tutorial, we will look at creating Unity game engine and assets for 2D games.

This article is an excerpt from the book Unity 2017 Game Development Essentials written by Tommaso Lintrami. 

Setting up the scene and preparing game assets

Create a new scene from the main menu by navigating to Assets | Create | Scene, and name it ParallaxGame. In this new scene, we will set up, step by step, all the elements for our 2D game prototype. First of all, we will switch the camera setting in the Scene view to 2D by clicking on the button as shown by the red arrow in the following screenshot:

As you can see, now the Scene view camera is orthographic. You can't rotate it as you wish, as you can do with the 3D camera. Of course, we will want to change this setting on our Main Camera as well.

Also, we want to change the Orthographic size to 4.5 to have the correct view of the scene. Instead, for the Skybox, we will choose a very dark or black color as clear color in the depth setting. This is how the Inspector should look when these settings are done:

While the Clipping Planes distances are important for setting the size of the frustum cone of a 3D, for the Perspective camera (inside which everything will be rendered by the engine), we should only set the Orthographic Size to 4.5, to have the correct distance of the 2D camera from the scene.

When these settings are done, proceed by importing Chapter2-3-4.unitypackage into the project. You can either double-click on the package file with Unity open, or use the top menu: Assets | Import | Custom Package. If you haven't imported all the materials from the book's code already, be sure to include the Sprites subfolder. After the import, look in the Sprites/Parallax/DarkCave folder in the Project view and you will find some images imported as textures (as per default).

The first thing we want to do now is to change the import settings of these images, in the Inspector, from Texture to Sprite (2D and UI). To do so, select all the images in the Project view in the Sprites/Parallax/DarkCave folder, all except the _reference_main_post file.

Which is just a picture used as a reference of what the game level should look like:

The Max Size setting is hidden (-) because we have a multi-selection of image files. After having made the multiple selections, again, in the Inspector, we will do the following:

1. Set the Texture Type option to Sprites (2D and UI). By default, images are imported as textures; to import them as Sprites, this type must be set.
2. Uncheck the Generate Mip Maps option as we don't need MIP maps for this project as we are not going to look at the Sprites from a distant point of view, for example, games with the zoom-in/zoom-out feature (like the original Grand Theft Auto 2D game) would need this setting checked.
3. Set Max Size to the maximum allowed. To ensure that you import all the images at their maximum resolution, set this to 8192. This is the maximum resolution size for an image on a modern PC, imported as a Sprite or texture. We set it so high because most of the background images we have in the collection are around 6,000 pixels wide.
4. Click on the Apply button to apply these changes to all the images that were selected:

Placing the prefabs in the game

Unity can place the prefabs in the game in many ways, the usual, visual method is to drag a stored prefab or another kind of file/object directly into the scene. Before dragging in the Sprites we imported, we will create an empty GameObject and rename it ParallaxCave.

We will drag the layer images we just imported as Sprites, one by one, from the Project view (pointing at the Assets/Chapters2-3-4/Sprites/Background/DarkCave folder) into the Scene view, or more simply, directly in the Hierarchy view as the children of our ParallaxCave GameObject, resulting in a scene Hierarchy like the one illustrated here:

You can't drag all of them instantly because Unity will prompt you to save an animation filename for the selected collection of Sprites; we will see this later for our character and for the collectable graphics.

Importing and placing background layers

In any game engine, 2D elements, such as Sprites, are rendered following a sort order; this order is also called the z-order because it is a way to express the depth or to cope with the missing z axis in a two-dimensional context. The sort order is assigned an integer number which can be positive or negative; 0 is the middle point of this draw order.

Ideally, a sort order of zero expresses the middle ground, where the player will act, or near its layer. Look at this image:

All positive numbers will render the Sprite element in front of the other elements with a lower number. The graphic set we are going to use was taken from the Open Game Art website at http://opengameart.org.

For simplicity, the provided background image files are named with a number within parentheses, for example, middleground(z1), which means that this image should be rendered with a z sort order of 1.

Change the sort order property of the Sprite component on each child object under ParallaxCave according to the value in the parentheses at the end of their filenames. This will rearrange the graphics into the appropriately sorted order.

After we place and set the correct layer order for all the images, we should arrange and scale the layers in a proper manner to end as something like the reference image furnished in the Assets/Chapters2-3-4/Sprites/Background/DarkCave/ folder.

You can take a look at the final result for this part anytime, by saving the current scene and loading the Chapter3_start.unity scene.

Implementing parallax scrolling

Parallax scrolling is a graphic technique where the background content (that is, an image) is moved at a different speed than the foreground content while scrolling. The technique was derived from the multiplane camera technique used in traditional animation since the 1930s. Parallax scrolling was popular in the 1980s and early 1990s and started to see light with video games such as Moon Patrol and Jungle Hunt, both released in 1982.

On such a display system, a game can produce parallax by simply changing each layer's position by a different amount in the same direction. Layers that move more quickly are perceived to be closer to the virtual camera. Layers can be placed in front of the playfield, the layer containing the objects with which the player interacts, for various reasons, such as to provide increased dimension, obscure some of the action of the game, or distract the player.

Here follows a short list of the first parallax scrolling games which made the history of video games:

• Moon Patrol (Atari, 1982)
  • https://youtu.be/HBOKWCpwGfM
  • https://en.wikipedia.org/wiki/Moon_Patrol

  Unlock access to the largest independent learning library in Tech for FREE!

  Get unlimited access to 7500+ expert-authored eBooks and video courses covering every tech area you can think of.

  Renews at $19.99/month. Cancel anytime

  START FREE TRIAL
• Shadow of the Beast (Psygnosis, 1989)
  • https://youtu.be/w6Osnolfxqw
  • https://en.wikipedia.org/wiki/Shadow_of_the_Beast

• Super Mario World (Nintendo, 1990)
  • https://www.youtube.com/watch?v=htFJTiVH5Ao
  • https://en.wikipedia.org/wiki/Super_Mario_World

• Sonic The Hedgehog (Sega, 1991)
  • https://youtu.be/dws4ij2IFH4
  • https://en.wikipedia.org/wiki/Sonic_the_Hedgehog_(1991_video_game)

Making it last forever

There are many roads we could take to make the hero run last forever and to achieve parallax scrolling. You can find a lot of different ready-made solutions in the Asset Store and there are also many General Public License (GPL) open source pieces of code written in C that we could take inspiration from.

Using the Asset Store

I chose FreeParallax from the Asset Store because it is powerful, free, and a well-written piece of code. Also, the modifications needed to achieve our game prototype on this class are very few.

Let's download and import the system from the Asset Store. First, navigate to http://u3d.as/bvv:

Click on the Open in Unity button to allow Unity to open this entry in the Asset Store window.

You can, alternatively, search for the package directly in Unity  by opening the store from the top menu: Windows | Asset Store (recommended). In the search box type: parallax; also choose FREE ONLY like in this screenshot:

You should now find the correct entry, the Free Parallax for Unity(2D) package. You can now download the package and import it into your project straight away.

We saw how to create Unity game engine and assets for 2D games. Check out the book Unity 2017 Game Development Essentials to know more ways of creating interactive 2D games.

Unite Berlin 2018 Keynote: Unity partners with Google, launches Ml-Agents ToolKit 0.4, Project MARS

AI for Unity game developers: How to emulate real-world senses in your NPC agent

Working with Unity Variables to script powerful Unity 2017 games