Advertisement
  1. Design & Illustration
  2. Animation
Design

Create a 2D Sprite Sheet for Unity 4.3 in Inkscape

by
Length:LongLanguages:

Unity's 4.3 update was a great big door swinging open for 2D game developers, with many new tools and ways to approach 2D game development in this already powerful engine. In this tutorial I will be showing you how to create a character in Inkscape that can be used in Unity 4.3's amazing new editor.


Things to Consider

A few tips on game character creation before we begin:

  • Work from a previously thought out concept or sketch—it will save you time and headaches!
  • Create as many whole pieces as possible. Developers will (frequently) ask for color changes and variations. Creating whole pieces that can be easily changed will make your job a lot easier in the long term.
  • Screen test your characters by placing them over backgrounds you are using while working on them. (Or alternatively, work on a neutral background—if it pops on grey, it will pop on anything.)
  • Be mindful of your sprite "budget". More joints can be more lifelike, but it can also be more complicated.

1. Create the Character

Step 1

Open Inkscape and select File > New . From the list of available options, select the size that is most likely to be your game's resolution. 640 x 480, 800 x 600, or 1024 x 768 are common game resolutions for the PC—for this project I will be choosing 800 x 600.

Create a New Document
If you are working with a developer, check with them for the proper resolution! The great thing about working with vector art however is you can always change the size of the character later.

Step 2

Create a new layer by selecting Layer > Add Layer (Shift-Control-N) and name it "Sketch". Set it to Below Current Layer.

Create a New Layer
Working in layers keeps your files clean and easy to manage.
Name your Layer
Name your layers properly so you can remember what's on them.

Step 3

Get your concepts together. In this case I just used a simple sketch I created in Sketchbook Pro. I tend to create at least two action views of the character so I can get a good idea of how I want it to be animated and what pieces I need to break it down into.

You can simply copy and paste your concept from another program or drag and drop the file into Inkscape.

If you drag and drop the file select embed, not link. You'll be throwing out the sketch later anyway as it's not necessary for the whole process.

Embed Image

Concept sketches help solidify your idea so you are not working blindly.

Step 4

Resize your drawing to whatever size you're comfortable working at using the sizing handles.

Click on the sketch and lock the proportions of the image by clicking the Lock Icon.

Lock your Proportions.

Locking the proportions prevents distortion.

Step 5

Since the Inkscape Preset palettes are generally not very pretty for games, I tend to make my own beforehand.

You can edit your Inkscape Palette by going into your Inkscape folder under the Share > Palettes sub-folder.

Editing your Inkscape Palette

The file may be in a different location depending on your OS.

Step 6

Right-click "Inkscape.gpl" and select open with your favorite text editor. I just used Wordpad.

You can now add your own RGB and Hex values to the list and they will appear in the order you put them. If you are unfamiliar with Hex and RGB codes, there are many easily accessible charts you can find around the Internet or in the color picker of almost any image editing program.

You can find one of them here:

Here are the ranges I used for the different parts of the Octopus' body for those of you that like to collect palettes:

Main Body

  • 110 4 84 #6E0454
  • 164 0 92 #A4005C
  • 188 24 120 #BC1878
  • 220 68 112 #DC4470
  • 235 99 109 #EB636D
  • 243 147 131 #F39383
  • 250 201 172 #FAC9AC

Eyes

  • 57 33 49 #392131

Snail Shell

  • 52 48 89 #343059
  • 67 70 126 #43467E
  • 62 87 150 #3E5796
  • 90 105 192 #5A69C0
  • 103 150 232 #6796E8
  • 126 175 238 #7EAFEE
  • 126 199 217 #7EC7D9

Snail Body

  • 132 71 60 #84473C
  • 165 103 79 #A5674F
  • 206 137 78 #CE894E
  • 243 180 107 #F3B46B
  • 249 246 100 #F9CE64
  • 248 229 122 #F9E57A
  • 251 251 158 #FBFB9E

You can copy and paste these codes into your .gpl file and save them, and they will be there the next time you run Inkscape.

I recommend you keep a copy of your original .gpl file in case something goes wrong.

Add the codes as they are displayed in the file where you would like them to appear in order.

Add the codes as they are displayed in the file. You can place them in the order you'd like them to appear though.

Step 7

Draw the main body first. I am just using a simple circle shape for the octopus' body. I set the stroke to 3.5px in the object editor (Shift-Control-F) but you can make yours whatever you like.

Draw the Body with the Circle Tool

Step 8

Draw the legs all as separate pieces on a new layer using the Bezier Curve tool (Shift-F6).

Creating a Leg with Bezier Curves

Remember, to get an actual curve, you must hold down the mouse button after clicking to position the second node/point and drag it around.

Step 9

Rather than manually adjusting the stroke and color on the leg, we can click on an object that is similar (like the circle) and copy it (Control-C) and go to Edit > Paste Style or (Control-Shift-V) to match the style of the copied object.

Paste Object Style

This is a good way to make sure all your object fills and strokes are uniform.

You may also want to draw legs in different positions, so they can be reused to make more animations.

Alternatively, you may want to draw the whole body with the legs in different positions if you do not want the legs to all move independently.

Remember that you can join pieces together by selecting both objects and combining them via Path > Union or Control-Shift-+ or just Control-+ with the numpad.

Step 10

To get a smoother curve I often add extra points and then delete them after I get the shape I want.

I turn off the Body layer using the eye icon next to the layer name that I want to turn off.

Paste Object Style II

Go into Edit Path By Nodes mode (F2) and click in the node you want to delete, then hit the Delete Key.

Delete the nodes you don't want

You can adjust using the handles on the other nodes if anything goes awry, or by changing the node type in the toolbar.

Step 11

Since I want the legs on the far left and right sides to be almost the same, I will copy the left one and just edit it slightly.

Bring back the Body layer by moving to the layer in the drop down and clicking the eye icon once again, so you can position the leg properly. Select the leg (which will take you back to the leg layer automatically) and copy it (Control-C) then paste it (Control-V).

Flip the image by using the Flip Horizontal button or by pressing the H key.

Flip Leg

This will also make the octopus easier to animate.

Move the leg into the desired position. I've also squished it horizontally slightly for perspective, using the sizing handles.

Moving the leg behind the octopus

If you have problems with the image snapping when you are sizing it, go to View > Snap.

Step 12

I'm going to make the front legs in multiple pieces to add more depth. Make a new layer (Shift-Control-N) to add the legs that will be in front of the body.

Add an oval with the Oval Tool and copy and paste the style from the legs onto the oval.

Create the Bottom Part of the Leg

We will be able to add a bobbing motion to the front tentacle this way if we want.

Now add a second oval and rotate it. You can rotate objects by clicking on the object twice, and then using the handles.

Create the top of the leg

Now this part of the tentacle can move separately!

Step 13

Now you can simply copy the leg and flip it to fill in the other leg

Position all the tentacles"

Don't worry too much about tentacle position for now, it will adjusted in Unity.

Step 14

Let's add some shading and highlights to the octopus before moving on to the face. I do this by creating ovals and then using another oval to "subtract" the parts I don't want.

Add a Circle

Position the highlight to where you want it.

Now copy and paste the circle and adjust it to where you want to cut away. Make it a different color so it's easier to see. I prefer to make it the same color as the main body.

Add another Circle

I find this method best for balloons and other round, shiny objects.

Now Shift-Select both circles, making sure to select the highlight circle last, and go to Path > Difference.

Subtract one circle from another

A nice smooth highlight!

Select all the objects and Group them (Control-G) to make sure they don't get moved around from where you want them.

Note: You can still copy and paste the style from an object by using direct select/edit path by node even when they are grouped.

Step 15

Draw some highlights on the legs as well, using the Bezier Tool (Shift-F6). Make sure you are drawing on the layer with the appropriate tentacle and group them with their related piece when you are done. Try to use the same color from the previous highlight.

Simple Lighting

You can add fewer or more highlights, to your taste.

Step 16

I drew the eyes using the Circle Tool (F5). I do the same thing here that I did with the tentacles to make sure they were the same; copy and paste the left eye and adjust for position and perspective again.

Adding the Eyes

He now has a simple set of peepers.

Step 17

Draw a simple mouth with the Bezier Curve Tool, and adjust the settings in the stroke and fill menu (Shift-Control-F).

Create a simple mouth
I set the Stroke to 3.00 and the cap to Round Cap.
Adjust Stroke Settings

You can play around with these settings to get them how you'd like.

Step 18

I decided to add some more highlights to give him a bit more depth. If you find when you're adding new stuff later on that it is appearing over previous objects when you regroup them, select and cut the object that is behind (Control-X), click on the object you want to paste it over that's on the same layer, and select Edit > Paste In Place or (Control-Alt-V).

Fixing Layer Groups

Keeping your groups clean will help you organize your sprite sheet later.

Step 19

I've also added a secondary highlight, again using Bezier Curves and the Circle tool, only this time I'm using the #F39383 color.

While there are a few up-and-coming programs that allow the easy addition of dynamic lighting to 2D art (such as Sprite Lamp), they are still very rudimentary and mostly meant for pixel art so we will have to add them ourselves for now!

Adding Extra Highlights

Step 20

For a point of interest, I am also adding a snail on top of the octopus' head. I will make the body first with the Bezier Curve Tool (Shift-F6). I will make the snail on a new layer, but I don't need to make one also for the shell as long as they are grouped properly. You can make them on separate layers if you prefer.

Creating the snail body

As before, I will delete any unnecessary nodes and smooth out the body with the Edit Path by Node (F2) mode. You can also select around multiple nodes and move them in this mode.

Move Multiple Nodes At Once

Step 21

Now add some lighter shades to bring out the volume of the snail. Again I will use the Bezier Curve tool (Shift-F6).

Adding Highlights to the Snail Body
Make sure to group the body objects when you are done!

If you find when you're making a curve you have made it too steep and can't connect it without this happening:

Adding Highlights to the Snail Body II
Messy curves are no good! If you accidentally connect it, just hit Control-Z to go back!

You can right-click to exit the curve, and then reconnect it manually.

Adding Highlights to the Snail Body III
Easy to fix!

Step 22

To make the base of the shell, draw a circle with the Circle Tool (F5). I used #5A69C0 as the stroke and #7EC7D9F as the fill.

Creating A simple shell base

Step 23

Use the Bezier Curve tool (Shift-F6) to create the bottom "lip" of the shell.

Creating The Bottom of The Shell

Step 24

Use the Spiral Tool to add the proper shape to the shell (F9) and set the turns to 1.50.

Create a Spiral

Now rotate and position the spiral so it looks like a real shell. I also set the cap for the spiral to Round Cap to avoid a harsh edge.

Move the spiral

Step 25

For the highlight of the snail shell, we will again use the bezier curve. I will just be using white for the color, but I will set the shape to 50% Opacity so that it blends. You can adjust the opacity in the Fill and Stroke Menu (Shift-Control-F).

First Highlight
You can also use the blur slider to soften the appearance, but I don't recommend it for a shell.
First Highlight

Step 26

Continue on with the rest of the highlights. You can copy and paste the style of the first highlight to the other highlights and it will also copy and paste the opacity, which makes it a lot easier.

Add the Rest of The Highlights

It's worth noting that I made the shell and the snail body separate groups. I am going to be saving them separately in case I want to animate them later.


2. Create the Sprite Sheet

Step 1

First let's delete the sketch to get it out of the way. Click the "sketch" and press the Delete key. Make sure you unlock the layer before attempting to delete it or you will not be able to. You can also delete the actual layer from the Layer Menu. Just be sure the layer you want to delete is active at the time you delete it.

Delete the Layer

Step 2

Make sure you save your file before doing the next part (though it is worth noting you should be saving frequently anyway, just in case). To do this, go to File > Save As (Shift-Control-S).

Save Your File
I generally keep the original file and the sprite sheet file separate so I can remember how the character was positioned.

Step 3

Now you need to separate the pieces of the octopus so that they are far enough apart for the slicing tool in Unity to pick up that they are separate pieces. There are settings you can tweak in Unity to help with this, but an organized sprite sheet is always better.

This will be a good test of your grouping skills. If you grouped all the right pieces together this should be relatively easy. You can learn more about Grouping in Inkscape thanks to a helpful tutorial created here on Tuts+. Click-drag each piece to arrange them how you like.

Step 4

I also align the edges of objects on the outside of the sheet. While computers are so fast now you might not notice it too much, it's always better to save what space you can, and make the sheet as small as possible. Open up your Align menu (Shift-Control-A) and make sure Relative To is set to the Last Selected rather than the page, as the objects will be what is exported and not the page.

This means that the first object and all subsequent selected objects will be aligned based on the position of the last placed object.

Align Objects
You can set it to First Selected if that is your preference.

The alignment doesn't have to be perfect. Here you're just trying to reduce the white space as much as possible, and aligning is an easy way to do that. The main thing is to make sure that an object is not going to expand the sheet more than necessary.

Organizing the sheet the right way
This way won't increase the sheet size
Organizing your sheet the wrong way
This however, will increase the file size, even though you're not using all of the extra space.

Step 5

Pack the sheet as tightly as possible. There are programs to do this but many find it quicker to just eyeball it in Inkscape.

However if you do prefer to use one (or already have exported each image separately for use in other game engines), you can download Texture Packer here:

It's available for Mac, Windows, and Linux for free!

Step 6

Save the sheet as a separate file, again so you have the original composition (you could also keep them both in the same file if you wish).

You will notice the eyes seem unnecessarily far apart for texture packing. This is because I've opted to treat them as one object rather than have each eye operate independently. You can do this and then still split them up in unity as separate eyes.

A packed sheet

Step 7

Select all the objects at once by clicking and dragging over the entire area as if you are trying to contain them all in a box (see image below).

Contain the objects
My "sheet".

Step 8

Now to export your sheet! Select File > Export (Shift-Control-E). You can export the sheet as a size that fits your needs, but I've just kept it at almost the same as the size as I started with in Inkscape.

Exporting the file
A great thing about vectors is that if it turns out to feel wrong for the game, I can simply re-export at a larger or smaller size.

You can edit the filename in the filename box so that it's something recognizable. Otherwise, it will be named by Inkscape as the last path or group that was selected (e.g. g720.png).

You may notice the Batch Export Objects option. You can actually just export everything as its own file this way, but keep in mind the shape that it is in Inkscape will be its exported size, so you may have to adjust it manually.

Note: There's currently a bug in Inkscape. If you name the file when all the objects are selected, and you attempt to batch export, it will only export the last object as they are now all named the same thing.

Step 9

If you look at the exported file now, you should see the sheet including transparency.

Exported File

3. Bring it into Unity

For this part of the tutorial I am going to assume you know how to open Unity and start a project. If you are unfamiliar with Unity there is plenty of documentation for beginners on the Unity website. I am just going to explain the process of getting a sprite sheet into Unity and cutting it up for use in a game.

Step 1

Open your project and make sure your editor is in 2D mode (to make things easier) by going to Edit > Project Settings > Editor and selecting 2D as the Default Behaviour Mode.

Changing the editor settings to 2D
You can always change this setting back if you're more comfortable in 3D mode.
Editor Dropdown for 2D

Step 2

Drag the sprite sheet from your File Explorer into your Assets folder.

Change the Box Dimensions to the size of the Document

Step 3

Select the sprite sheet, and open up the Inspector via Window > Inspector (Control-3).

Opening up the Sprite Inspector

Step 4

Change the Sprite Mode to Multiple. This will enable you to open up the sprite editor.

step_3.4

Truecolor is a good choice for the Format as it is best for nice clean images, especially when dealing with pixel art sprites. Your other settings may depend on the individual project.

Step 5

Open up the Sprite Editor.

Opening The Sprite Editor

You can also access it from the Inspector

Step 6

Click Slice. Normally I would just choose Automatic and leave it as is, however I cannot do that in this case as it would split the eyes into two parts, like so:

Automatic Slicing

In order to fix this, click one of the bounding boxes and Delete it. Now stretch the other bounding box over to include both eyes and click Apply.

If you lose a box or need to make a new one as it didn't slice them properly, click-drag in an empty space.

Adjusting the Sprite Boxes

Click Revert to undo any changes you have not applied.

You may also notice the box on the bottom right has a place to name each piece. This is very important for organization, as if you drag any of the sprites onto the screen, they will be automatically named whatever the Name box indicates. Another parameter you can adjust here is Pivot which indicates the main anchor point of the sprite. When you rotate the sprite in the animator, it will rotate around this point.

Step 7

Adjust all the pivots to where you'd like by clicking and dragging the circle in the middle of each sprite, or by typing them in manually to the Pivot field.

Adjusting the Pivot Points

Click Apply when done.

Now you can see all of your sprites as individual objects in the Project > Asset Folder.

Assets Folder

Step 8

Now we can drag the pieces onto the scene to create Game Objects. However, first let's create an empty Game Object (Control-Shift-N) and call it "Octopus".

Create an empty Game Object

Click on the Game Object in the Hierarchy and go to the Inspector to rename it.

Rename your Game Object

Step 9

Now you can drag the other body parts onto the Octopus Game Object in the Hierarchy and arrange them how you wish, but make sure they are centered over the empty Game Object.

Adding All The Pieces

There's a slight problem...

Step 10

So as you may have noticed, the octopus tentacles are not quite in the order we want them. We can fix this with Sorting Layers in the Inspector. Normally I might create a new sorting layer for the Octopus but for now I will just leave it as default and adjust the numbers.

Change the Sorting Layers

The higher the number the closer the object is to the camera.

Step 11

Now let's save a test scene and the project (File > Save Scene). Unity can crash when you start getting into more in depth actions, so I recommend saving often.

Save the Scene

Since I'm not making an actual game project, I will just name this "testscene" for now.

Awesome Work, You're Ready for Animation!

This character doesn't have animations yet so it is hardly "game ready". The animator in Unity is extraordinarily powerful but there is a bit of a learning curve!

It is good for artists to know how their art will look in the engine, and how they can be animated to help make graphics more suitable for game development. It's worth noting that even after you've gotten to this point, you can easily update your sheet and put it back in the asset folder (Unity defaults to your project folder in "Documents") and the game will automatically update. Just be aware if you change sizes of the sprite in any way, even by adding "extras" you may have to re-slice the sheet.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.