Unity UI System: SpriteSheets
In this article, I’ll be going over spritesheets in Unity!
What is a spritesheet?
A spritesheet is basically just an image that contains images meant to be used separately. For example:
You can imagine what some of these images should be used for. Icons for UI mostly.
How do you use a sprite sheet? You can simply drag this into a Unity project. The way you import it matters.
The main objective is to make sure to change the texture type to “Sprite(2D and UI). There is a lot of other settings here that I hope to get into later on. This one is most important for now.
How do we separate the image sinto their own individual ones?
The Sprite 2D package via the package manger!
Install that and it will open up the option to use the Sprite Editor feature in the import settings for this image.
Selecting this brings up a menu that basically allows you to crop/slice/define custom outlines and stuff for the image. This is actually a rather in-depth feature and I’d like to dig into it more later as well lol But for now:
If you select “slice” at the top, a few options will pop up. Selecting automatic will make a best-guess estimate for how you want this image sliced up. Unity is pretty smart, so using this option is what I’ve done here.
You may have noticed the white outline around each image. Select “apply” and exit out of the sprite editor. If you navigate to where you imported your image, beneath it, you’ll see a big list of images. Now each one of the elements for this image have been separated out into individual pieces. Pretty cool!
They’re all named kinda poorly though. Its hard to tell which is which. SO An easy way to find a specific sprite to use would be to re-open the sprite editor, and select the image you want. Then look at the name in the bottom right of the window.
Then you can just find that specific one.
This article marks the first in a series of UI-specific articles I hope to make. So if you’re new to the Unity UI system, fear not! I’ll be going into way more depth on how to work with it.
