Unity assets are part of the unity ecosystem which help you to create in-game environments, gameplay options effectively. In this article, we are going to show you how to work with Unity assets which will eventually help you create fun and interactive 2D games with Unity 2017.
This article is a part of the book titled “Unity 2017 2D Game Development Projects” written by Lauren S. Ferro & Francesco Sapio. This book helps you to create exciting 2D games from scratch easily.
Textures and Sprites
Before you start anything within Unity, it is useful to know that Textures and Sprites within Unity are two separate things, although they are used in similar contexts. To begin, a Sprite is an image that can be used as a 2D object. It has only two coordinates: x-axis and y-axis. Therefore, all the graphical components of 2D game development are called Sprites. Sprites can be repositioned, scaled, and rotated like any other game object in Unity.
You can move, destroy, or create it during the game. Sprites, by default, are rendered directly against the camera; however, you can easily change this if you are using the Sprite Renderer in a 3D scene. They work with the Sprite Renderer, unlike a 3D object, which works with the Mesh Renderer. Besides Sprites, there are other graphical components called Textures. These are also images, but they are used to change the appearance of an object in both 2D (for example, Sprites and background) and 3D (for example, an object or character’s appearance).
But Textures are not objects. This means that you cannot get them to move during gameplay. Saying that, you can create images with Textures that animate, with Sprite Sheets/Atlases. What this means is that each frame of an animation is placed on a Sprite Sheet, which is a Texture, that will eventually be cut up so that each frame of the animation is played sequentially.
Throughout we will use the terms Sprite Sheets and Atlases. While they are pretty much the same thing, the subtle difference between the two is that a Sprite Sheet generally has Sprite (frame-by-frame) animations, whereas an Atlas will contain images such as tileable Textures for the walls and other environmental components (for example, objects). Their purpose is to maximize the space by combining multiple images into one Texture, whether for characters (and their animations) or environmental Textures.
More generally speaking, when it comes to handling Sprites and Textures, Unity has various tools that deal with them in different ways and are used for different purposes. A brief overview of each of them follows. We will discuss them in more detail:
- Sprite Editor: This is used to edit Sprites. This is done by selecting them individually from a larger image, known as a Sprite Atlas, or by changing their Pivot point, and so on.
- Sprite Creator: This is used to create a Sprite placeholder. This is useful if you do not have any Sprites to use but want to continue implementing the functionality of a game. Sprite placeholders can be replaced later with actual Sprites.
- Sprite Packer: This is used to increase the efficiency of your project’s usage of main memory. It achieves this by packing various Sprites into a single place using the Packing Tag attribute. This appears in the Inspector window when you select a Sprite in the Project window.
Sprite Render
The Sprite Render displays images that have been imported as the type Sprite. There are a number of different parameters within the Sprite Render that allows you to modify a Sprite. We will discuss them here:
- Color: Color allows you to change the color value and the value of the Alpha channel (transparency) of a Sprite
- Flip: Flip is what defines the axis that the Sprite needs to be flipped on
- Material: Material refers to the material that Unity will use to render the Sprite
- Sorting Layer: Sorting Layer defines which layer the Sprite should be rendered on (it basically indicates the order in which the different Sprites are drawn, for example, which one is on top of the others)
- Order in Layer: Order in Layer is the order within the Sorting Layer
Sprite Editor
In some cases, you may have a Texture that contains just one graphic element; in other cases, you may have multiple ones. The latter is more effective for many reasons, such as saving computational resources and keeping things organized. A case in which you are likely to combine many Sprites into one Texture may be frame-by-frame animations of a character, where other Sprites may be parts of a character (such as clothing and items), and will need to be customizable, such as different items (and their effects). In Unity, you can easily extract elements from a single Texture by using the Sprite Editor. The Sprite Editor is used to take multiple elements from an Atlas or Sprite Sheet and slice them into individual Sprites.
How to use the Sprite Editor
To open the Sprite Editor, perform the following steps:
- Drag and drop some images (anything you have on your computer, so you can have them as test images) into the Project panel.
- Select the 2D image you want to edit from the Project view.
- In the Inspector, change the Texture Type into Sprite (2D and UI), so you will be able to use it within the Sprite Editor.
- Click on the Sprite Editor button in the Texture Import Inspector and the Sprite Editor displays.
When you open the Sprite Editor window, you can move it around like any other window within Unity; you can also dock next to others such as the Hierarchy or Project windows. - To select the Sprites, simply click and drag on the Sprite that you wish to select. As a result, you will have bounding boxes around each Sprite element that you have selected, as in the following screenshot:
- If you happen to click and drag too much around a Sprite, don’t panic! You can easily resize the bounding box by clicking on any of the four corners or edges of the bounding box, like in the upcoming screenshot. Alternatively, you can also reposition the bounding box by clicking and dragging in the middle of the box itself.
- While you’re creating these selections, it is important to make sure that you name them appropriately. To do this, click on the box surrounding the Sprite that you wish to name. You will notice that a box appears.
- Now, next to where it says Name is where you enter the name that you wish to call your Sprite.
Another thing that is also to keep in mind here is the Pivot of the Sprite. Think of this as the Sprite’s center. For example, if you rotate a Sprite, it will rotate wherever its Pivot is .0.
A few more elements that you will also find useful while you are slicing up your Sprites are the options located at the top of the Sprite Editor window. We will discuss them now.
In addition, you cannot edit a Sprite which is in the Scene view.
- Slice Menu: One great feature of Unity is the opportunity to automatically slice Sprites. What this means is that if you have a large Sprite sheet with various animations, images, and so on, you can automatically cut each image out. You have two options to do this:
- Automatic: Automatic is better for when you have unevenly distributed Sprites, such as the case with an Atlas. When choosing the location of the Pivot, it will, by default set it to the center.
-
-
Method: Method tells you how to deal with existing Sprites within the Sprite Editor window. For example, if you select Delete Existing, it replaces any Sprites that exist (with the same name) with new Sprites; Smart will try to create new Sprites while at the same time adjusting existing ones, and Safe will add new Sprites without changing any that currently exist.
-
- The Grid is better for when you have Sprites that are evenly distributed, such as frame-by-frame animations. In these cases, it is not recommended to use Automatic because the size differences between each Sprite may cause unintended effects in terms of how they appear within the game, such as the Pivot being in the wrong location, resulting in an inaccurate animation. An example of the Grid menu is shown in the following screenshot. Pixel Size sets the size of the Grid in the unit of Pixels. This number will be determined based on the size of your Sprite Sheet and distribution of Sprites:
Sprite Packer
Using the Sprite Packer, you can combine multiple elements such as large sets of Sprites into a single Texture known as an Atlas. However, before using it, we must first make sure that it is enabled within Unity. To do this, go to Edit | Project Settings | Editor.
Once you have done this, look at the Inspector; you can change the Sprite Packer from disabled to Always Enabled or vice versa. You can see an example of this in the following screenshot. By selecting Always Enabled. The Sprite Packer will always be enabled whenever you start a new project. That way, you will not need to worry about enabling it again:
One of the benefits of using this is that it can boost the performance of your game by reducing the number of Draw Calls each frame. This is because a significant portion of a Sprite Texture will often be taken up by the empty space between the graphic elements. As a result, it wastes video memory at runtime because it needs to compute this empty space even if there is nothing there. By keeping this in mind, when you are creating your own Sprites, try to pack graphics from several Sprite Textures together and as close as possible to one another within an Atlas.
Lastly, keep in mind that depending on the sizes of your Sprites, an Atlas should not be larger than 2048 x 2048 or 211 (or at least, this guarantees compatibility with many devices).
Unity handles the generation and use of Sprite Atlas Textures behind the scenes so that the user does not need to do any manual assignment. The Atlas can optionally be packed on entering Play mode or during a build, and the graphics for a sprite object will be obtained from the Atlas once it is generated. Users are required to specify a Packing Tag in the Texture Importer to enable packing for Sprites of that Texture.
To use the Sprite packer, simply go to the top navigation menu and select Window | Sprite Packer.
Once you have done this, it will open the Sprite Packer.
Sprite Creator is your friend when you have no assets
While we have Sprites, in this case, you might not always have them. If you don’t have Sprites, you can always add placeholders or images in the place of where they are likely to be. This is a useful thing to use when you’re prototyping an idea and you need to get functionality working before your images are ready to go. Using the Sprite Creator is quite simple.
We can create a placeholder Sprite by doing the following:
- First, select Assets | Create | Sprites.
- Next, select the placeholder Sprite you want to make, like in the following screenshot. Unity offers only six different placeholder Sprites: Square, Circle, Triangle, Diamond, Hexagon, and Polygon. Before creating the Sprite, it is important to make sure that you select the folder that you want the Sprite to be created in. This just saves time later from having to move it to the correct folder. This is because, when creating a Sprite with the Sprite Creator, it will automatically place it in the Asset folder that you currently have open in the Project Window.
- Lastly, from the list, select the placeholder Sprite that you wish to use:
Once you have chosen your Sprite, it will appear as a white shape. The Texture created by Unity will use the .png file format and contain default image data of 4×4 white pixels. At this stage, the new Sprite will have a default name based on its shapes, such as Square or Circle. You have the option to rename it, but if you don’t change it, don’t worry, as each additional Sprite that is the same shape will simply have a number following its name. You can, of course, always change the name of the Sprite later by clicking on it in the Asset folder where it is located:
Once your new Sprite has been created, simply drag and drop your placeholder Sprite into the Scene view or Hierarchy to start using it in your project. An example of this can be seen in the following screenshot:
Once you’re done, whether it is a mock-up, prototype, or something else, you may want to change the placeholder Sprite to the actual image. Once you have imported the new image(s), simply do the following:
- Click on the Sprite within the Scene view so that it is selected.
- Now, in the Inspector, locate Sprite Renderer Component. An example of this is shown in the following screenshot:
- Now, where it says Sprite, click on the small circle located next to the Sprite name, in this case, Hexagon. This is highlighted in the following screenshot:
- Now, a small window will be displayed, like in the following screenshot:
The Sprite Creator makes 4×4 white PNG outline Textures, which is a power of 2-sized Texture that is actually generated by an algorithm.
Setting up the Angel Cakes project
Now we’re going to discuss how to set up our first project! For the rest, we’re going to discuss how to import the assets for the Angel Cakes project into Unity and get the project ready to go. We’ll cover the process for importing and setting up while getting you familiar with 2D assets.
To begin, let’s get the Angel Cakes asset pack, which is featured in the following screenshot:
To download the assets, simply visit www.player26.com/product/Angelcakes and download the .zip file. Once you have finished downloading it, simply unzip the file with a program such as WinRAR.
Folder setup
You need to make sure that you have some foundational folders created to use with your project. To briefly recap, have a look at the following screenshot. Remember that the Assets folder is always the root or parent folder for the project files:
Importing assets into the engine
With your folders set up, we now begin to import some images for our project: the background, the player, an enemy, player collision (wall, objects), and collectables (Angel Cakes, health, and bonuses). Importing the assets into Unity is easy.
- First, click on the folder that you want the Sprites to be imported into, inside the Project window; for this project, we will use the folder titled Sprites
- Next, in the top menu, click Assets | Import New Assets and navigate to the folder that they are located in
- Once you have found them, select them and then click Import
- Once they are imported, they will appear in the folder, like in the following screenshot:
Configuring assets for the game
The assets used in this game do not need much configuring, in comparison to the ones that we will use later.
Once you have imported the two Sprites into Unity, do the following:
- Select each one within the Project window.
- Now, in the Inspector, change the Sprite Mode to Multiple. This is because we have multiple images of each Texture. One is an Atlas (the environmental objects) and one is a Sprite Sheet (character animations).
- Once you have done this, click Apply:
Once you have changed the Sprite Mode to Multiple, click Sprite Editor. Now you should see something like the following screenshot:
- First, click on Slice and select Grid By Cell Size
- Next, in Pixel Size, change the values of X and Y to 50, like in the following screenshot, then click Slice:
Now, if you hold down Ctrl (or command on a Mac) you will see all the freshly cut slices, like in the following screenshot:
If you click on each slice, you will notice that a Sprite information box will appear, like in the following screenshot:
In this information box, you can rename the Sprite to whatever you would like. Each Sprite has been given a number so that you can understand the corresponding name conventions that are described following screenshot:
For this project, we will call each Sprite set the following:
- Numbers 1-6: ACSpriteChar1…2…3…4…
- Numbers 7 – 12: ACSpriteCharEvo1…2…3…4…
- Numbers 13 – 18: ACSpriteCharEnemie1…2…3…4…
- Number 19: Delete
Once you have done this, you can now see all your Sprites within the Project window. To do this, simply click on the triangle that is highlighted in the following screenshot:
Once you have clicked this, it will expand, revealing all of your Sprites and their names, like in the following screenshot:
There are many things that we will now be able to do with these images, such as animations.
The next thing that we need to do now is slice up the environment Atlas. Locate the Sprite file within the Project window and open it up in the Sprite Editor. Remember that you need to change the Sprite type to Multiple in the Inspector, otherwise you will not be able to edit the Sprite.
Once you have it in the Sprite Editor, it should look something like the following:
This time, instead of selecting the Slice type Grid By Cell Size, we will do it manually. This is because if we choose to do it via the type Automatic, we will find that there are other slices, like those on the clouds on the right of the following screenshot. This can be tedious when there are lots of little parts of a single Sprite, such as the Clouds:
So, for now, manually drag and click around each of the Sprites, making sure that you get as close to the edges as possible. You may find that you will need to zoom in on some parts (by using the mouse scroll wheel), like the Angel Cakes. Also, the options in the top-right corner might help you by filtering the image (for example, black and white). As you begin refining the bounding box, you will feel the outline pull or snap toward the edges of the Sprite; this helps you to get as close as possible to the edges, therefore creating more efficient Sprites. Don’t forget to name the Sprites either!
For this project, we will call each Sprite set the following:
- ACSpriteEnviroBlock
- ACSpriteMenuBlock
- ACSpriteBonus
- ACSpriteHealth
- ACSpriteCake
- ACSpriteBackground
- ACSpriteCloud1…2…3…and so on
To give you a better idea where each Sprite is located, have a look at the following screenshot. The Sprites are numbered so that you can easily locate them.
Once you have done this, click on Apply in the top-right corner of the Sprite Editor. As a result, you should be able to see all the Sprites in the Project window by clicking on the triangle. It should look like the following screenshot:
9-slicing Sprites
A nice little feature of Unity that allows you to scale elements such as Sprites without distortion is 9-slicing. Essentially, what 9-slicing does is allow you to reuse an image at various sizes without needing to prepare multiple Assets. As the name suggests, it involves splitting the image into nine segments. An example of this splitting is shown in the following screenshot:
The following four points describe what will happen if you change the dimensions of the preceding image:
- If you change the four corners (A, C, G, and I), they will not change in size
- If you move sections B and H, they will stretch or tile horizontally
- If you move sections D and F, they will stretch or tile vertically
- If you move section E, the image will stretch or tile both horizontally and vertically
You can see these four points illustrated in the following screenshot:
By using 9-slicing, you can re-size the Sprite in different ways and keep the proportions. This is particularly useful for creating the walls within our environment that will create obstacles for our little Angel and enemies to navigate around.
We will need to do this for our ACSpriteEnviroBlock so that we can place it within our level for the player to navigate around. To do this, we need to make sure that the Sprite that we have created has been set up properly. First, you need to make sure the Mesh Type is set to Full Rect. To do this, select the Angel_Cake_Sprite_Atlas (contained in Project window | Asset | Sprites), then head to the Inspector and change Mesh Type from Tight to Full Rect, like in the following screenshot:
Now we need to define the borders of the Sprite. To do this, perform the following steps:
- First, select the Sprite (Angel_Cake_Sprite_Atlas).
- Next, in the Inspector, click the Sprite Editor button.
- Now, click on the Sprite that you want to apply the 9-slicing to. In our case, this will be the ACSpriteEnviroBlock, like in the following screenshot:
Looking at the Sprite information box in the bottom-right corner, we need to adjust the values for the Borders of the Sprite. For this Sprite, we will use the value of 20 for L, R, T, and B (left, right, top, and bottom, respectively):
In some cases, you might need to tweak the position of the borders; you can do this by clicking and dragging the green dots located at the intersections of each border (top, bottom, and sides). You can see this in the following screenshot:
To test your 9-sliced Sprite, drag it from the Project window into the Scene, like in the following screenshot:
Next, in the Inspector, change the Draw Mode from Simple to Sliced, like in the following screenshot:
Now you can resize the ACSpriteEnviroBlock without it deforming. Give it a go! You should have something like the variations in the following screenshot:
You will notice that it isn’t quite like the Sprite. This is okay, we can adjust this setting in the Inspector. Simply click on the Atlas Texture in the Project window and, in the Inspector, change the value of Pixels Per Unit to 250:
Click Apply, then click and drag another ACSpriteEnviroBlock onto the Scene and try to resize it. You will end up with something like the following screenshot:
As you can see, there is a little distortion. This just means that you will need to edit the Borders inside the Sprite Editor until you get the location of them correct. For now, tinker with the locations of the borders.
To summarize, we have shown how to work with the Unity 2017 assets, and how you work and configure sprites for your 2D game projects effectively.
If you have liked this article, then don’t forget to check out the complete book Unity 2017 2D Game Development Projects by Lauren S. Ferro & Francesco Sapio on the Packt store.
Read Next:
Working with Unity Variables to script powerful Unity 2017 games
Build an ARCore app with Unity from scratch
Unity announces a new automotive division and two-day Unity AutoTech Summit
