Creating a SpriteSheet From EPS Files Using Free Resources
Objective: To learn how to create a SpriteSheet from an EPS file using free resources and using it in Unity.
What This Article Hopes to Achieve
To give a little context as to what I am looking to achieve, let’s take the above source image and run through an example:
Let’s say I really like the image behind the ‘Play’ text and I only want that to be imported into Unity as I want to create a separate ‘Text’ game object that will overlay on top of it and allow us to create some cool animation effects when hovering or clicking on it.
Let’s run through this process!
Free Resources Required
The first free resource we are going to need is Inkscape which you can download from this link. We are going to be using an EPS (Encapsulated Postscript File) file so that we can maintain the quality of the graphic when we enlarge/reduce the image size as we manipulate it to our preferences.
The second free resource we are going to need is GIMP which you can download from this link. GIMP is kind of like Illustrator but with fewer features, and still quite powerful in it’s own right for free software.
The final free resource we need is a plugin tool called Ghostscript which you can download from this link. Inkscape doesn’t natively support EPS files so we need some help. There are a few steps to installing and setting up this plugin so I have created a separate article for this located here. Once you have Ghostscript setup and tested that it is working in Inkscape with an EPS file, we can continue below.
Downloading and Importing An EPS File Into Inkscape
For this I went to a website called Freepik which provides free GUI resources, and typed ‘GUI’ in the search bar. I also added to the filter options to only show ‘EPS’ files. I have chosen this asset for testing purposes:
Upon downloading this we are presented with 2 files — An EPS and JPEG:
This file might come zipped, so make sure to Extract.
Now we want to import this EPS file into Inkscape by using File → Import → EPS file.
I also chose to setup a page in Inkscape with Other → Icon 512 x 512.
If everything is setup correctly using the Ghostscript plugin you shouldn’t have any errors when attempting to import this asset.
Ungrouping & Grouping
After importing the EPS file into Inkscape this is how it looks (yours could look very different):
Let’s get started with tidying this up so we can import into GIMP and make our SpriteSheet.
You will first notice that you can’t highlight or drag your cursor over separate parts of the images. This is because the entire file is ‘Grouped’ as one.
Step 1 — Ungrouping
Right-click on the image and select ‘Ungroup’. You will now see hundreds of little boxes that we are able to manipulate — by moving or deleting.
Step 2— Removing the Background Lines
The second step in this process for me is to remove the background lines as I don’t want them showing up behind the image.
To remove them we can right-click on the line and ‘Delete’. Continue to do this for any other lines you wish removed:
Step 3 — Remove Text from an Image
Now I want to remove the word ‘Play’ from this image, so right-click on the letters and delete these also:
Step 4 — Re-group the Image
If I highlight over the image now, we can still see that there are many separate boxes making up this image:
We can now ‘Group’ them to be one whole image by highlighting over the image and right-clicking → ‘Group’:
This image is now ready to be imported into GIMP and added to our SpriteSheet but I am going to continue on and tidy up the rest of the images so I can import them all at once:
Creating a SpriteSheet in GIMP
With GIMP open let’s create a new SpriteSheet of size 2048 x 2048.
Right now we have an opaque background but we need to remove this and add an alpha channel (for the transparent background).
In the bottom right corner where it says ‘Background’, we can right-click and ‘Delete’.
Next, we can press the tiny ‘+’ button in the bottom right corner and add a new layer called ‘Transparent’:
Make sure the opacity is 100% and the ‘Fill With:’ field is Transparency. It should look like this with the chequered boxes:
Let’s now bring in our file from Inkscape.
Within Inkscape → File → Export → Set the ‘Image Size’ values and choose a save location, finally pressing the ‘Export’ button when you are finished. It should save as a .PNG file by default which is what we want.
From within GIMP → File → Open → bitmap.png
It should look like this:
This file is now ready to be imported into Unity where we can use the Sprite Editor to slice up the SpriteSheet.
Happy slicing!
