Create and implement a Spritesheet in Unity
Spritesheets are a great way to organize and group Sprites into a single file for ease of importing. We can also use them to keep similar Sprites together so that we can find them easily. For instance UI Sprites are all in one file, Character Sprites are all in one file, or Specific Object’s Sprites are in one file. This way we can easily find the specific Sprite or group of Sprites that we want to use.
Creating Spritesheets for Unity is very easy as well. We can use a Spritesheet downloaded from Freepix.com as an example.
We start by searching for GUI.
When we find one we like, we click download. This one in particular requires Attribution so Thank You jcomp for your incredible work.
Once we download and extract the files, we are left with two files. We have a jpeg and an EPS file. The EPS file is a vector image file that is proprietary to Adobe Suite.
We can take the EPS file and drop it into Adobe Illustrator.
We can then select everything and Ungroup.
We can delete layers by selecting them in the Layers hierarchy and pressing the Delete button.
Now, once we isolate the objects that we want to keep, we can select them all and Copy. We can then Paste them into a new Photoshop file.
In Photoshop, we can select the Slice tool.
We can click and drag across the entire image to select everything. Then we can right-click and select Divide Slice. This will allow us to basically get some guidelines so that we can clean up our Spritesheet.
Now, we can Box Select each element, right-click and Select Layer via Cut. This will separate each element into its own layer allowing us to resize and move each element as we see fit.
Now, we just move everything around until we are happy with the layout. We can now Export the PNG.
In Unity, we will create a new Sprites folder to hold our Spritesheet.
And we will drag and drop the file into the Sprites folder.
With the Spritesheet selected, we change the Texture Type to Sprite in the Inspector.
In order to separate out the Spritesheet in Unity, we will have to download the 2D Sprite Package. We go to Window->PackageManager.
We then search in the Unity Registry for Sprite and install the 2D Sprite Package.
With the 2D Sprite Package installed, we can now change the Sprite Mode for our Spritesheet to Multiple and click on the Sprite Editor button to open the Sprite Editor.
We can select Slice in the Editor and Automatic. Then we just click the Slice button.
The Sprite Editor will use the Alpha Channel to determine where each Sprite is and Slice them accordingly.
Don’t forget to click the Apply button before closing the Editor.
Now, when we select our Spritesheet, we can see that it contains all of our Sprites separated into their own Sprite.
To use these Sprites, we can create a Canvas and an Image.
In the Image’s Source Image, we can drop one of our Sprites.
And the Sprite is displayed on the Image.
Sometimes the Image may be distorted because the Image Size doesn’t match the Sprite's Aspect Ratio.
Rather than trying to eyeball and guess the Aspect Ratio, we can simply click the Set Native Size in the Image’s Inspector to set the Image to the Sprite’s Aspect Ratio.
And Voila! Our Image looks like the original Sprite.
Now we can begin combining these Sprites together and with code to create impressive UI Elements.
Thanks!
