First of all, let’s answer the question, “what is a sprite sheet”? Well in a nutshell, a sprite sheet is an image that is made up of other images.
How is a sprite sheet useful? Sprite sheets have been used in a lot of games, especially in arcade machines where memory was very limited. Today, we don’t have to worry about memory as much but it does help speed things up.
You might now be asking, how does this help me as a Roblox developer? Well, you might know that having a lot of images uploaded and then having to Preload all those images (if the images are UI elements) will make the user wait until all the images are uploaded before the UI can be displayed to them. This wait time could potentially cause you to loose some players. That can be easily avoided if you use a sprite sheet image that contains all your UI. (btw, Roblox uses Sprite Sheets for Mobile[i’ve seen a sprite sheet containing the mobile controls]! Though they might be using sprites for other platforms as well.)
My Use Case
I’ll be going through how i use sprite sheets and where i currently need them. Below, is an image of my UI. The blank image spots are where we will be implementing the sprite sheet.
Before i begin, i want to point out something. You see how the default image is stretched? Well, you are going to need to change it to Fit in the properties or just do it programmatically, your choice.
Making The UI
You can skip forward to The Implemenation
To create the UI for each section, i’ll be using Adobe Illustrator. But you can use any tool you want, of course.
Once i had them created i just needed to export each artboard as a png file
I know, I know, it doesn’t look too great (not to mention the missing letter) but this is just to showcase.
Once exported, i’ll be using another useful tool called TexturePacker, this is an amazing SpriteSheet making application. Although, i figure most people out there won’t be able to buy it, i thought i’d also look for a free way of doing this.
Making The Sprite With TexturePacker (The Paid Method)
Simply drag in the images and TexturePacker should automatically pack the images into a single sprite. Make sure to set the maxSize to 1024 since that’s the max size Roblox allows the image to be, anything higher than that will be downscaled. Then export using your custom exporter (like me) or use a default one. You should then get the data on each UI element along with the sprite sheet. The data for each element is very useful as you can just plug in the numbers (will tell you where in a bit) or you can just do it by hand which takes a lot longer.
Making The Sprite Using A Website (The Free Method)
After about an hour of searching for an online tool that spits out the sprite data, i have found this site. Although, it doesn’t allow you to specify the size of the sprite sheet (which is very important as the data will be based on the size of the sprite sheet). I was also going to use this tool but i noticed my images were a lot larger than 1024 causing the sprite sheet to be larger than 1024. Meaning, the sprite data would have been sorta useless (would have needed to mess around with the numbers to get it to view properly). So for that reason, i decided to stick with TexturePacker. :p
Implementing The Sprite Sheet
Now that you have the sprite sheet image and the sprite sheet data like me (mine are named “sprite”, please don’t get confused):
It is now time to upload the single image to Roblox
After that, i set every empty image to the sprite sheet image, which they now look like this
I can now use the data that was exported along with the image:
The X and Y values will be placed in the ImageRectOffset, which is the position of the sprite (the UI elements) inside of the sprite sheet. The Width and Height values will be placed in the ImageRectSize property of the image, which is the size of the crop. After that, you should have everything displayed correctly:
Rather than just using the spritesheets for UI elements, you can also use them for UI animations like this one i made:
I also attempted to animate effects on a player but i got partially there:
That is all, i hope you learned something from this post and use it to the best of your abilities!