My game Puzzledorf is full of sprites. And there’s nothing worse than when a pixel art game doesn’t look the way you want it to, nice and crisp. So I spent a lot of time making sure that the graphics would display just right.
The default settings for importing sprites in Unity often makes pixel art blurry. I’m going to talk about how to import 2D pixel art so your graphics are nice and crisp, and then show you how to chop your sprite sheets up so you can use the individual frames.
Importing 2D Sprites
Create a new 2D project. If you have a 3D project, you can still do it, but Unity uses better default settings for a 2D project when you’re importing graphics if it’s a 2D project.
Create a new folder in your Assets folder called Sprites. In the Project Explorer, right click and go Create > Folder.
If you have a large project with lots of folders, I suggest numbering the folders so that your most used are first, and that you develop a system. Then your brain gets used to the order the folders are in and you waste less time looking around for files and folders – it helps having a system like this with a team too, if people go making new folders it stops stuff getting lost.
Next, add your sprites to the new Sprite folder.
Select your newly imported sprite. You will see the Import Settings in the Inspector.
Above are the default import settings you’ll see if yours is a 2D project. Below is what I set mine to:
I’ll go over the different points briefly and how to set them:
- Texture Type – always just use sprite for 2D pixel art
- Sprite mode – if it is a single sprite, use Single. If it is a sprite sheet, use Multiple
- Pixels Per Unit – Set this to the width and height of your sprite. If your sprite is 14 x 14, set it to 14. If it’s a sprite sheet, set it to the width and height of a single tile in the sheet. If you exported your sprite out larger than its native size, say at 2x or 3x, then you will need to give the size you exported it out as, not the native size.
Your life will be a lot easier if your sprites are square. I have only once tried with a rectangle, and in that instance, it worked when I set the pixels per unit to the width of the sprite, but don’t take that as a rule that will work every time, just one experience.
- Mesh Type – I leave that alone
- Extrude Edges – I leave that alone
- Pivot – This is where your object is positioned. If you leave the pivot at Center, and move the sprite to 0, 0, the center of your sprite will be at 0, 0
- Generate Physics Shape – Honestly, I have never looked this up. The docs say it’s for use with the Tilemap Collider component, and Physics 2D. I have always left it alone, but you could try turning it off, it would probably optimise your game if you really don’t need it.
- Advanced – I have never touched the advanced settings
- Wrap Mode – Leave it as is
- Filter Mode – Bilinear will make pixel art blurry. You want to use Point (No filter).
- Max Size – Making this smaller can optimise textures for a game and make big performance improvments, especially for textures in 3D games. I took a 3D game that barely ran on PS3 due to a low frame rate, and got it running at a high frame rate, just by reducing texture sizes. Generally I say go with the smallest number you can. It’s talking about the literal pixel size of the texture. If the sprite sheet is squashed, you might need to make this bigger.
- Resize Algorithm – I don’t touch this
- Format – I don’t touch this
- Compression – Set it to none for pixel art. In a 3D game, if you were looking to optimise, you might try compression, unless it makes a noticeable difference to how your game looks. Of course, this will partly depend on your camera angle. Top down / third person you will notice compression on textures less. For first person, you will notice it a lot more.
If it’s a single sprite, you’re done. If it’s a sprite sheet, read on.
Chopping Up a Sprite Sheet
So you want to chop up a sprite sheet. Let’s assume you have set your Import Settings correct as above, including Sprite Mode set to Multiple.
Next, you want to click on Sprite Editor under the Import Settings.
It will bring up a screen like this:
Now we need to chop up this sprite sheet. Click up the top where it says Slice.
For Type, I find the easiest is to go Grid by Cell Count. Simply put in how many rows and columns there are.
I like to make my sprite sheets tight, so I have never really used the offsets or padding. Padding, I believe, is if you add some blank space around your tiles in the sprite sheet, and I would assume you want that spacing to be regular around each tile. If you have 1 pixel padding on your sprite sheet, then put that there.
Finally, once you have set the pivot, press slice. Bear in mind, you will likely want to use the same pivot style for each sprite in your game, or you might get weird errors, so keep it in mind.
Once you have sliced, you should see faint grid lines around your sprites.
If you’re happy with the grid, press Apply. If not, simply slice it up again.
If you look back at project explorer where your sprite is, you will notice a little arrow next to your sprite. Press the arrow.
You will see all of your individual sprites laid out. Now you can move them individually into your scene to make animations and set up your game.