2d – Kennedy Computer Science Academy

How to Make a 2D Sprite in Unity

Hello, world. In this tutorial I will be describing the steps to making a video game sprite of your very own.

Download a portable version of Inkscape to your file on the c drive from https://inkscape.org/en/download/
Now, this step is extremely important: open Inkscape.
Next let’s start with the head. Use the circle tool.
We can edit the head using the Fill and Stroke window. Open this with Shift+Ctrl+F.
Now let’s make a body. First make a new layer below the head. You can open the Layers window using Shift+Ctrl+L.
Use the Bezier tool to make a rough shape. It does not have to be perfect, here you can see mine is anything but.
Using the Edit Path By Nodes tool you can edit the line work. Now it will take the shape you want.
If you don’t want the body to have the same style as the head then go ahead and make it however you wish. If you do want it to be the same, first copy the head (Ctrl+C) and then paste the style (Shift+Ctrl+V).
Using the same tricks you can build up the rest of the sprite, and keep the parts on different layers. You can group shapes together (Ctrl+G) or use the various path options (top ribbon) to form more complex shapes.
Now that you have your basic sprite, let’s make the sprite sheet. We’re going to make this little guy dance. Copy your sprite a few times. You need to copy the parts separately to keep them on the right layers.
Edit the parts just a little bit. Move a leg on the second sprite, move it back in the second, etc.
Make sure that the sprites are not touching each other. Highlight the whole sprite and keep the squares from touching or overlapping.
Export the file as a png (Shift+Ctrl+E). Make sure you are not highlighting anything when you do this. If you open the sprite sheet in images and the background is transparent then you did it right.
Now open your game in Unity and have the sprite sheet pulled up in the folder. Make sure you have a 2d game.
Drag the sprite sheet into your empty game object. If you do not have an empty game object, then make one. It’s Ctrl+Shift+N.
Open the sheet in inspector mode. Make sure it is multiple, not single.
Open the sprite editor. Slice your sprites. You should now be able to open the sheet and have each sprite individual.
Set up a animator. Create your Default Layer State.
Select the sprites and make an animation. Do this by highlighting your sprites, right clicking, hovering over the ‘create’ option, and clicking on the animation option.
Once you have your animation, make sure to make it loop. Select your animation, open in inspector mode, and check the loop time box.
Now that the animation is finished, open your default state in the animator.
Drag your animation into the motion box. You can edit the speed of the animation just below it.
Drag the animator into your game object.
Make a sprite renderer in your game object.
Play your game. The sprite should appear and be animated. If it is not, then you did something wrong. It’s okay to cry at this point. There is no shame. Do it. I know you want to.

Animation Tutorial

Below are pictures to my process in creating sprite animations in unity with captions to help you step by step. I made my sprites in adobe illustrator and photoshop. Keep in mind that you need to save copies of the files as illustrator, photoshop, and .png files just in case you need to edit, or reuse the files. Click on the photos for a full view of the screen.

be sure to save this to a safe file by clicking the three circles under location

Find the location of the files that you will use as a sprite. They need to be saved as .png files.

select them all by clicking on them all once while holding the control key

once selected, drag them into the gray space below. This is your unity assets folder.

once you have that done you need to open the sprites by clicking the arrows on the side of each picture.

then select the inside box ( the darker one) and click create, and go down to animation.

next you want to name your animation. I named mine Anim 1 to keep it simple

then select the gray box sprites again, right click, select create, and then go down to controller. Name it the same as the animation to keep things organized.

double click the controller. Now you should be in the controller window

Drag the animation into the controller window.

Then in the right hand window (inspector) find the box that’s labeled loop time. This will make the animation continue to play.

move the first light gray sprite into the scene window by clicking and dragging it.

Finally you need to double click your sprite to enter the sprite inspector window (right hand side of the screen). Once you have the window open, drag the controller into the lower half of the inspector window. After that just press play and the sprite will begin to move.

Finished Roguelike 2D Game

The (should be) finished version of the game is linked below. After playing the game, if you could take the survey to give me some feedback that would be awesome! Thanks 🙂

To play the game ask me, (Im wearing the Iowa State t shirt), and I can have you play the game on the computer next to mine. Unfortunately the file size was too large to directly link. Sorry 🙁

Survey: https://goo.gl/forms/jheK5WK9LzX9QxB12

Gracias!