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.
Step 2
Create a new layer by selecting Layer > Add Layer (Shift-Control-N) and name it “Sketch”. Set it to Below Current Layer.
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.
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.
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.
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.
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.
Step 8
Draw the legs all as separate pieces on a new layer using the Bezier Curve tool (Shift-F6).
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.
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.
Go into Edit Path By Nodes mode (F2) and click in the node you want to delete, then hit the Delete Key.
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.
Move the leg into the desired position. I’ve also squished it horizontally slightly for perspective, using the sizing handles.
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.
Now add a second oval and rotate it. You can rotate objects by clicking on the object twice, and then using the handles.
Step 13
Now you can simply copy the leg and flip it to fill in the other leg
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.
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.
Now Shift-Select both circles, making sure to select the highlight circle last, and go to Path > Difference.
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.
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.
Step 17
Draw a simple mouth with the Bezier Curve Tool, and adjust the settings in the stroke and fill menu (Shift-Control-F).
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).
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!
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.
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.
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).
If you find when you’re making a curve you have made it too steep and can’t connect it without this happening:
You can right-click to exit the curve, and then reconnect it manually.
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.
Step 23
Use the Bezier Curve tool (Shift-F6) to create the bottom “lip” 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.
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.
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).
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.
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.
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).
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.
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.
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.
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).
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.
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.
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.
Step 2
Drag the sprite sheet from your File Explorer into your Assets folder.
Step 3
Select the sprite sheet, and open up the Inspector via Window > Inspector (Control-3).
Step 4
Change the Sprite Mode to Multiple. This will enable you to open up the sprite editor.
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.
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:
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.
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.
Now you can see all of your sprites as individual objects in the Project > Asset 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”.
Click on the Game Object in the Hierarchy and go to the Inspector to rename it.
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.
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.
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.
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.
{excerpt}
Read More