Creating 2D Sprites for Games

Sep, Mon, 2021
Rich Tanner
Home Tutorials

“Waiter, there’s SLIME in my Sprite!”

2D Games use Sprite Sheets to hold different frames of an animated character, or anything else you may find in a 2D world.

So, we are going to create a simple animated Sprite using a free took that you can use in your web-browser (like Chrome, Safari, Firefox, Edge, etc…)

Photopea is a great program that runs right in your internet browser and works and looks a whole lot like Adobe Photoshop. In fact, if you HAVE Adobe Photoshop, the steps are almost exactly the same for this simple tutorial. Ready?

First step: go to https://www.photopea.com/

Click on File, and then select New in the dropdown menu

In the new window that pops up, you need to set a few things up. First, you can give this new file a better name than “New Project”. Here, I went with “SlimeySprite“, but you can name it whatever makes sense for you.

Then, make the Width be 1280 pixels, and the Height be 256. This will give us five even squares all lined up next to each other (because 256 x 5 = 1280).

Next, select the dropdown box next to Background and select Transparent. This will get rid of background colors so we have less to clean up later.

Finally, click on Create !

Next we need to set up our project so that we can know where the lines are (and NOT color outside of them).

Click on the Edit menu and select Preferences down toward the bottom of the list.

Make sure all the boxes are checked, then set the Grid Gap to 256 pixels. Just click in the box and type in 256.

When all that is set, just click the X to close the Preferences window.

Now we need to make sure the things we just set up will even show on the screen. Click the View menu this time and then select Extras to make sure there is a checkbox next to it.

Go click the View menu again, then hover over Show, and finally make sure the checkbox is on next to Grid. In fact, make sure ALL the stuff under Show has checkboxes, because we will need more in just a minute!
You should notice your box is now separated nicely into 5 little squares.

All checked? Good! Click the View menu one more time, then make sure there is a checkbox next to Rulers. If there is NOT a checkbox, click on Rulers, and it will get checked!

Wow. Lots of setup, right? We are ALMOST to the creative part! Hold on!

Click your mouse inside the ruler now showing along the top just under all the menus, hold the mouse button down, then drag down into your project space. You can let go just before the you hit the bottom. We will use this new Guide (the little blue line) as our imaginary floor.

Okay. We finally get to draw something! As soon as we set up our brush…

Click the icon along the side that looks like a paint brush! The Brush Tool starts out a little thick, so click up top, right under where we clicked the Edit menu before, where there is a circle and (probably) the number 15 with a little down arrow next to it.
A new pop-up window … pops up. We can click where it says 15, and then type in 10 to make the brush size smaller. After you type in 10, hit Enter on your keyboard.

We will be drawing the outlines of a slimy jello blob-thing jumping in these 5 boxes, or frames. Make sure your color is set to black… or whatever color you want your outline to be, I suppose. You can set the color by clicking in the boxes down in the bottom corner under all the other tools.

This will pull up our Color Picker window. Click and drag around to select a color you like. There is a rainbow colored bar and a larger box to play in. When you are done and have the color you want, you must click on OK to set to your new color!

Okay. FOR REAL THIS TIME, we get to draw!

I made the image below.
– In the first frame, we have the jello/slime thing flat on our imaginary ground and popping up like a muffin top.
– In the second frame, he is jumping up into the air, and looks like an upside-down raindrop. His main mass is moving up, and a little bit trailing behind.
– In the third and middle frame, he is at the apex of his jump, so this is a round circle. He is right in between gravity and his upward force… free floating for just a moment, like you do for just a split-second when jumping on a trampoline.
– In the fourth frame, he is coming down again, looking just like a raindrop.
– Finally, in the fifth frame, slimy-guy has hit the ground HARD, so he is flatter and more stretched out than he was in the first frame.

Now we can paint him in! If your frames all are nice CLOSED loops, we can use the paint bucket to make him have color inside the outlines!

Again, click the boxes at the bottom of the toolbar (the top box is our main color) and pull up the color picker.
I am going with a bright purple this time, but do what you like!
Remember, you have to click OK to finish setting the color!

This next part might be tricky. You might already have the Paint Bucket Tool shown in the side toolbar, or it might be hidden under the Gradient Tool. It should be just a couple tools down from the Brush Tool we used earlier, but if you need help finding it, hit the “G” key on your keyboard, and whichever tool is there will be selected.

If the Gradient Tool is what is showing, click and hold in the little arrow under it until a new pop-out appears, and select the Paint Bucket Tool.

Once you have the Paint Bucket Tool, make sure your “Background” layer is selected and then start clicking inside your weird circles to fill them in!

Now we can be creative.
You may click on your Brush Tool again, and give this little guy EYES, and more!

Not my eye placement below, helping to tell the story of where he IS and where he is GOING in each frame.

You can also add a nose, or a hat, or other fun details. Or just keep this simple! Totally up to you!

Okay, I am going to add one final detail to make this really POP.

Down in the bottom corner under the Layers panel, there are a number of buttons, one of them being ” eff “, which is short for “effects“. Click it! then select “Drop Shadow” from the menu.

In this new window, I set the Angle to 90 and the Distance to 15. This makes the shadow cast straight down and not be too far away from our slimy-thing. Then click OK to close the Layer Style window.

NICE!

Okay, let’s both SAVE and EXPORT this. We will save a PSD file so we can go back and make any changes we want later, and export a PNG for use in Unity!

First, saving the working file (so we can change it up later) is as easy as clicking on File and then selecting Save as PSD. Find a place on your computer to save it, and … save it! If you ever want to go back to Photopea.com and have more fun with this, you’ll use the File and Open commands in the menu to pick up where you left off.

NOW, the IMPORTANT PART is to export this so we can do cool stuff with it!

So, click on File and then Export as > and then click on PNG. This is my favorite file type for images, and is usable almost anywhere!

Leave the settings all where they are and click Save. Make sure to pick a place on your computer that you can REMEMBER in just a few minutes when we get into Unity!

Wow. Art takes a lot of time…

But we are FINALLY ready for making this silly thing DO SOMETHING inside of Unity!

Open up Unity Hub, then, when your list of projects pops up, click on the big blue NEW button.
Select 2D for your template, and give it a good name and a location, and, finally, click CREATE.

Once your new project opens, use Finder (on Mac) or File Explorer (on Windows) to locate your new sprite PNG file (I had called mine “SlimeySprite.png”) and drag it into your Project window of Unity.
Alternatively, you can right-click in the nearly empty Assets folder in your Project window and select Import New Asset… and go find your graphic that way.

Once the graphic is in your cool new Unity project, do the following steps:
1) select the graphic down in your Project window
2) in the Inspector window, change the Sprite Mode to Multiple
3) down at the bottom of the Inspector window, click on Apply
4) finally, click the Sprite Editor button to get to our next bit of fun!

The Sprite Editor should open as a new window. Yay, more steps to follow!

1) click on the dropdown box that says Slice
2) click the dropdown for Type that says Automatic, and instead choose Grid By Cell Count. Set the C (columns) to 5 and leave the R (rows) at 1, since we have frames 1 high and 5 wide.
3) click the button that says Slice
4) click the button that says Apply

Once you have done all that, you can close the Sprite Editor

Back in our Project window, we can now expand the original sprite we brought in and see that it now has 5 individual parts! Yay!
You can close that arrow, and click on your SlimeySprite (or whatever you called YOURS) and drag it into the Scene (try to drop it inside the white outline box where the camera is viewing).

You should be instantly prompted to save a New Animation. You can change the name, if you like, but don’t change anything else! Click on Save!

If you click the Play button now, you should see your weird little slimey guy bouncing up and down really fast!

Unity automatically set up our Animation and an Animation Controller for us! Awww… how nice! Thanks Unity!

However, this guy is going way too fast… Maybe he really is a gumdrop made of pure sugar?

Anyway, we can slow him down before we hurt our eyes watching him.

Back down in the Project window, find the Animation Unity made for us. I left the name of mine as New Animation. Hint: it looks like a little triangle trying to get away from us!

Great! This opened our Animation window!
The first thing to do is put your mouse in that big area with the little diamonds in it (those are our animation keys) and scroll out so you have more room! Let’s scroll to zoom out so we can see 0:00 through 1:00 at least in the timeslider bar.

NOTE: for now the keys just look like diamonds, but we can get more visual!
click the arrow next to the word Sprite toward the edge of the window. This should open up the arrow and change the second row of blue diamonds into our actual sprite frames!

Now, start moving the keys away from each other. Make sure they stay in order, but let’s just space them out more so they don’t happen so FAST, okay?

You can move the keys individually, OR you can select them all:

hit command + A (mac) or ctrl + A (windows) on your keyboard to select them all

With all the keys now selected, grab the little blue bar farthest to the end and click and drag it farther out! This will scale them out as evenly as possible. You should be able to count the number of sections between them to see how equally they scale.

One last thing to fix. If you play it now, the frames do go slower, but we don’t get to see that last frame very well (where Slimy goes SPLAT). That’s my favorite part! So, let’s make that more visible.

Scroll / zoom out just a bit more and place your mouse a few frames beyond the final SPLAT frame. Now, right-click and select Add Key. That’s it! It will automatically add the first frame again as the new Key, and we get to enjoy the SPLAT more.