Create and Implement Sprite Sheets in Unity 2021
UI Related Software — Premium or Freemium?
Ultimately, you’ll have to decide what is right for your circumstances on which software applications you will use for 2D graphics work.
The standard premium approach is to sign up for Creative Cloud on Adobe.com which costs $55/month at the time of this writing.
If you will be spending considerable amounts of time using these types of tools, it may be worth it to go this route.
When it comes to freemium, Gimp, Inkscape, and Krita are popular choices as alternatives to Adobe’s Photoshop and Illustrator applications.
If you only anticipate sporadic use of these types of tools, it may be prudent to stick with the no-cost options.
There are no doubt also one-time purchase options out there, but I’ll let you do your own research on that front.
At the end of the day, you’ll probably be best served by trying the various software applications and deciding which fits your personal needs the best.
Choosing and Downloading a UI Image
There are many websites and resources out there for sprite sheets and images in general.
For the purposes of this article, we’ll use freepik.com.
Once you find a template image you like, download it to your PC.
Now save the file(s) in your project’s asset folder.
The top file version is in the “eps” format while the lower file version is in the “jpg” format.
Prepping The Image to Become a Sprite Sheet
We’ll need to do some minor modifications to our file so that we can work with it in Unity as a sprite sheet.
As jpegs (jpg file format) are compressed and can lose detail and resolution of images, we’ll use the eps version of the file.
As shown above, import this into the Gimp application.
In general, 2048 x 2048 is an ideal resolution for most cases and we can reduce these dimensions later in Unity without effecting our original file.
NOTE: A resolution of 72 would be sufficient here and should reduce file size.
Now, using the magic wand tool, select the white background and hit the “Delete” key on your keyboard.
Perfect, now our background is transparent and the image’s individual elements will be more easily identifiable by Unity.
Go ahead and save your work as a “xcf” file type, which is Gimp’s native file type.
Lastly, we’ll need to use File > Export As to save our image as a “png” file type which will preserve the image quality and allow Unity to work with it.
This process will be similar in Adobe Photoshop or other similar applications if you do not wish to use Gimp.
Import the 2D Sprite Package
Unity only includes as much functionality by default as it thinks will be broadly necessary for your game development.
This keeps file sizes and complexity to a minimum.
Open the Package Manager window in the Unity Editor and install the 2D Sprite package.
Now, go to Window > 2D > Sprite Editor and dock or place the newly opened window where it is convenient for you.
Now, select the “png” version of the file.
They can be difficult to differentiate, but we know the background should be checkered to represent transparency.
If you click the “Open” button at the top right of the Inspector window, the new window that opens displays the file name with file type at the end.
In the Inspector, change the “Texture Type” to “Sprite (2D and UI)” and the “Sprite Mode” to “Multiple” since there are multiple sprites in this one image.
Also, make sure to set “Alpha is Transparency” field to True by clicking the checkbox next to it.
In the Sprite Editor window, click the “Slice” tab and then the “Slice” button.
The default settings should work here.
Now click “Apply”.
Notice that in the Project window, our file now has an arrow next to its name.
This indicates that it has child elements.
If we click the arrow, we can see all of the individual sprites that were created from this one image.
We can drag and drop those child sprites for our project in Unity!
Implementing Our Sprites in the Scene
Now that we have some sprites we can use, we can start putting them into our scene.
First though, we’ll need to add a Canvas game object to the scene.
Also, add an image child object to the Canvas.
Now drag a sprite from the project window into the “Source Image” field of the newly created “Image” object.
The Scene and Game views should look something like the above at this point.
Note that the canvas shows up in 3D space in the Scene window as a white outline.
By clicking the “2D” button of the Scene window we can get a better view of our UI.
Simply pan by dragging with left-click and zoom with the mouse wheel after clicking the “2D” button.
