Unity UI: Adding & Creating A Spritesheet

Intro

In this article, we are going to cover how to import, slice and create your own spritesheet. I will be using Photoshop to create the spritesheet and when I say spritesheet I mean the formatting and layout of the sheet with already create sprite.

Importing

In order to slice spritesheets, you will need to the 2D Sprite package, we can be install from the Package Manager in the editor.

Create a folder in your project for your UI sprites to help you stay organized. Simply drag and drop the sprite sheet into the folder.

Select the spritesheet and you will need to change a few settings. The texture type should be Sprite (2D and UI) which will make the background transparent if the spritesheet is a PNG file. The Sprite Mode will be Multiple since there are more than 1 sprite on the sheet and we will need to slice them into individual sprite.

Make sure to select Apply to make the changes and you should see the background of the spritesheet become transparent.

Slicing the Spritesheet

Now we can slice the spritesheet into individual and we will need to open the Sprite Editor to do this.

This will open the Sprite Editor window and you can try the Automatic slice type with the Smart method. This will have Unity detected create a grid and size that grid to fit each individual sprite.

You can see this work fairly well with each sprite having its own slice box. Make sure to hit Apply to slice the sprites.

This will create individual sprites in your project folder for you to use.

Sometimes the Automatic slicing does work and this was the case for the spritesheet below. One solution would be to slice the sheet using the cell size.

The image above shows the sheet being sliced into grids of 100 x 100. This fits most of the larger elements in the spritesheet.

For the sprites that do not fit those grid boxes, you can resize them so they fit.

Another solution would be to create your own spritesheet.

Create Your Own Spritesheet

When I say create your own spritesheet, I mean formatting the sheet with preexisting sprites. In my example, I will be using Photoshop.

When creating a new document make sure the Resolution is 72 and the dimensions are 2048 x 2048.

Copy and paste the spritesheet into photoshop.

Resize and move it using the Free Transform tool (Cmd+ T) to fit the canvas.

Using the Slide tool and right click to divide the Slice.

This will give you the ability to create sliced grid for you to place each individual sprite into to make sure they are all properly seperated.

Using the marquee tool or the smart select tool, click and drag the cut box around each individual sprite and right clicked to cut the selection into a seperate layer.

Using the move tool or free transform tool (cmd + T), resize and move the cut sprite into the sliced grid.

Repeat this process for the rest of the sprites you wish to include in the spritesheet. You will export the sheet as an PNG.

After importing the spritesheet, you can now easily slice the spritesheet either using the cell size or automatically. You may have to space the sprites out on the spritesheet for the auto slice to properly identify each sprite.