Sprite system

It's hard to get excited about a game project until the visual elements are in the scene. We will discuss how to bring our character in the game shortly, but first let's go over how to actually use Sprites in Unity. A brief overview of working with Sprites is given in the previous chapter, but now we will get more technical.

Importing sprites

The simplest way to import a sprite into a scene is to simply drag it from your File Explorer (Windows) or Finder (Mac OS X) into Unity's Project Window. Once the image file is brought into the project, clicking on the image will show its various import settings in the image's Inspector, as shown in the following screenshot:

Image Inspector on Project window

Let's take a closer view at the various import settings of an image brought into a 2D project and discuss each of the properties. Here, I will discuss each setting presented in the following screenshot; however, I will discuss the Sprite Editor button a later section:

Note

If you make any changes to the following settings, you must hit Apply for the changes to be saved.

Texture Type - Sprite (2D and UI)

When a Unity project is in 2D Mode, all new images imported into the project are automatically configured as Sprite (2D and UI) instead of Texture, as they would be if the project were set to 3D Mode.

Note

The following settings would not appear if the Texture Type were changed to something other than Sprite (2D and UI).

Sprite Mode - Single/Multiple/Polygon

You will leave the Sprite Mode set to Single if your image contains only a single Sprite and you wish for it to remain on a rectangular plane while being used within your game. If you are importing a sprite sheet or texture atlas (refer to the previous chapter), you will set the Sprite Mode to Multiple. If you have a single Sprite that you want to be bound by a polygon, rather than the standard rectangle, you will select Polygon.

Note

Polygon Sprite Mode will not be discussed further in this text, but its features follow easily from those that are discussed.

Packing Tag

This is a customizable option that lets you set groups to pack sprites into texture atlases. By putting a name in the Packing Tag, it tells Unity to group all the objects with the same tag under a separate texture atlas/sheet together, thereby overriding the default behavior of placing all the assets on the same atlas. Any assets without a tag will be grouped onto the default atlas.

Pixels Per Units

This option is just a setting that allows you to scale the image asset at import time, the default being 100 pixels per unit (or scaled up to 100 percent).

This setting is important because it sets the relative scale of the assets you will import to your defined game units. Your base game unit guides you on how all the assets will scale appropriately to each other and, more importantly, to the camera.

You can manage the game scale through this setting or you can handle this scale through the original texture's sizes; the choice is up to you.

This is particularly helpful with puzzle games. You can use the Pixels Per Unit setting to make a single block in your puzzle game count as a unit, thus making your coordinate system easier to deal with.

Pivot

The pivot point of a sprite determines from where its position will registered. So, if the pivot point is set to Center, when a Sprite is positioned to specific coordinate in the scene, the center of the sprite will be positioned at that point. The pivot point also determines the point around which the sprite will be rotated. More options for pivot are available in the Sprite Editor.

Generate Mip Maps

A Mip Map is a smaller version of a texture. Essentially, when Generate Mip Maps is selected, an object that is further away from the camera will use a smaller version of the texture. This feature does not change the texture on objects created within the UI.

If you are making a 2D game that is orthographic in view (objects far away from the camera appear the same size as when they are close to the camera), you may want to deselect this option. If you want to have objects in your scene that are further away from the camera appear smaller and will be using a perspective camera, you may want to select this option for performance optimization.

Filter Mode

Similar to the Generate Mip Maps option, the Filter Mode will come into play when you are working with a perspective camera and plan on manipulating your objects in 3D space. Billinear and Trilinear blur the texture as it gets closer to the camera where Point (no filter) will make it blocky.

Default settings and per-platform overrides

The Max Size of your texture can be set under the default settings. When an image is initially imported, it is set to 2,048 pixels by 2,048 pixels, as shown in the following screenshot. However, you can change it to any power of two from 32 to 8,192.

When you are developing for different platforms, you may need to consider the resolution size of your textures as each platform has different limitations.

Note

You will get a warning if your image is not using a power of two size texture. This is not critical as Unity will still make best efforts to compress the image:

You can find more information about per-platform overrides at: http://docs.unity3d.com/Manual/class-TextureImporter.html.

Sprite Editor

The main thing you will likely use the Sprite Editor for is identifying the regions of your sprite sheets and texture atlases that represent single sprites. It also allows you to adjust the pivot point of a single sprite (or multiple sprites) and place it in a location not available in the Pivot Point drop-down menu. It comes with several simple yet powerful features to control how the individual sprites will be imported, as shown in the following screenshot:

Sprite Editor window

In the editor, you have two sets of functions: the sprite splitter and the view controls. The options available to you will vary depending on the Sprite Mode.

Sprite slicer

If you have your sprite set to Multiple, the Slice drop-down menu will be enabled. The slicer has three modes, Automatic, Grid By Cell Size, and Grid By Cell Count, in which it can carve up your sprite sheet to create individual images for use in your game.

Automatic

Unity has put some very smart logic into its automatic sprite slicing system that can quite easily identify regions in your sprite sheet where your images are packed. Plus, you have some advanced options to guide the system to make it fit for your game, as shown in the following screenshot:

The slicing is based on the alpha regions within the texture, so bear this in mind. The following are the advanced options provided by Unity:

• Pivot: As the name suggests, it allows you to set the default pivot position at import time for the sprites that it creates by default.
• Method: This option has the following options to guide the selection logic to identify sprites:
  • Delete existing: Selecting this option will clear all the existing sprite ranges from the sheet.

Note

This is the default option and Sprite Editor will not select any sprites until you select one of the sprite identification methods.

• Smart: This option will try to identify common patterns in the sprites from the sheet meant for selection. In some cases, it is able to identify groups that make up a single sprite together.
• Safe: This option focuses on tighter regions around each element it identifies on the sprite sheet, thereby making the edges as close as possible.

Grid By Cell Size and Grid By Cell Count (Manual)

The grid options are a lot simpler with no complex logic. Grid By Cell Size simply allows you to define (as the name suggests) a grid over the sprite sheet with defined cell sizes by setting the height and width options, as shown in the following screenshot:

Unity will then automatically identify sprites based on that grid. The Offset tells the Sprite Editor where the grids should start relative to the top-left corner and the padding tells the Sprite Editor how much space is in between the various grids.

Grid By Cell Count works similarly, except it allows you to state how many columns and rows of Sprites you have rather than how big the Sprites are, as shown in the following screenshot:

View controls

The view controls simply change or affect what you are viewing in Sprite Editor, as shown in the following screenshot:

The following are the view controls provided by Unity:

• Revert: This control simply resets the texture back to the original settings the editor had when it was opened or when the apply option was used to save.

Note

Note that this is not simply an undo button as it completely resets the editor back to the beginning.

• Apply: As the name suggests, this applies any changes you have made in the editor. If you close the editor and keep the changes pending, you will be prompted to apply the changes.

Note

Note that once you apply your changes, these cannot be undone, so when you click on Apply, be sure that the changes refer to what you actually want. To undo any of these changes, you would have to restart the sprite editing process.

• Alpha/Color: This control simply changes the view between fully textured sprites or just the alpha regions. It is useful if you want to see what the automatic splitting options are using to identify individual sprites.
• Zoom Slider: This control is used to zoom in and zoom out. Need I say more?
• Pixelation Slider: This slider changes the resolution of the sprite texture. When it is at the rightmost position, it will be at full resolution (based on the import settings). The further to the left the slider is moved, the lower the resolution will be set.

Sprite region manipulation

Whether you are working with a single sprite or you have your individual regions identified on a sprite sheet, you can change the import settings for each sprite, as shown in the following screenshot:

The Sprite Editor zoomed in on a single sprite from the sprite sheet shown earlier

From here, you can alter the following:

• The sprite's name
• The region of the sprite's bounding box by the following methods:
  • Changing the numbers in Position
  • Changing the numbers in Border
  • Physically adjusting the bounding box with your mouse using the hook points
  • Using the Trim button to make the bounding box snap close to the the edges of the sprite
• The pivot point by changing the drop-down option or physical moving it by dragging the pivot circle

The settings you will change with a single sprite selected will only affect that sprite and not the rest that are on the sprite sheet, so keep this in mind if the sprite you are editing is part of an animation.

Tip

It is very important to be consistent with pivot point placement with sprite sheets. If pivot points are not placed on the same relative position, the animation with look bouncy.

Importing our main character

Now that we have discussed how to import and edit a sprite, let us get our main character imported into our game.

Select the image titled Protagonist.png from the characters folder in the Art Assets folder, then drag it to the Characters folder under Assets\Sprites\ in your Unity project, as shown in the following screenshot:

Folder structure in Project window

Next, as our image contains all the frames of the sprite's animation for our main character, we need to break it up. So, select the image from the project view and change Sprite Mode in the Inspector to Multiple, as shown in the following screenshot:

Protagonist Import Settings in Inspector

Click the Sprite Editor button to bring up the Sprite Editor window and hit Apply when prompted. You should see the following:

To separate this sprite sheet into individual images, select Slice and change the Type to Automatic and change the Pivot to Bottom, as shown in the following screenshot:

Properties to Slice a Sprite

Click on Slice to see all of the sprites now surrounded by appropriate bounding boxes, as shown in the following screenshot:

Note

When working with sprite sheets that represent walk cycles, bottom tends to be the best pivot point position.

Now, click on Apply and close Sprite Editor. Upon returning to the project view, you should see an arrow symbol next to the image asset we imported; clicking on it will show you all the individual Sprites that were identified, as shown in the following screenshot:

Individual Sprites that were identified

Now that we have our character in our project and it is properly imported, let's put our hero into the scene.