Infinite Roller Tutorial One – Creating art and importing to Unity

Hello, welcome to Edge of Code’s series of Infinite Roller tutorials. If you’d prefer a video tutorial, you can find one here.

In the previous tutorial, I showed you the game we’re going to make and introduced Unity. This time, I’ll show you how to create images in Inkscape, how to import them into Unity, and how to add physics to the objects.

If you don’t already have Inkscape, go to inkscape.org. Once you’ve downloaded and installed it, open the program. Inkscape is a vector graphics editor which means what you draw is described mathematically rather than in terms of pixels. This allows you to zoom in as much as needed and retain resolution. It’s one of the reasons I use Inkscape to draw images for games rather than a raster editor like Gimp: if I create a character image, then decide I want a much larger version of that character, I don’t have to use a low resolution, blown up version of it, and I don’t have to draw it again at a higher resolution. I can simply export the image again from the saved Inkscape file at a higher resolution. The second reason I use Inkscape is that I find it’s also easier to manipulate images into what you want to draw.

First we’re going to create the character for the Infinite Roller game. As it’s going to be rolling, we want it to be round, so start by clicking the circle button. Move the mouse pointer close to the centre of the screen, hold the left mouse button down and drag. To make it a circle rather than an oval, hold control while dragging. Now go to Object -> Fill and Stroke. Pick a colour to fill the circle from the “Fill” panel, black for the outline from the “Stroke paint” panel, and change the width of the outline in the “Stroke style” panel to about 10 px.

Change the circle into a path by going to Path -> Object to Path. Click on the edit paths by nodes button (hover over the buttons to determine which one this is). There are four nodes initially, and they allow you to manipulate the shape of the path. Drag the mouse over the circle to select all of the nodes, then click on the plus button in the bar at the top of the screen to add an extra node between the selected pairs.

Next, move some of the nodes around by clicking and dragging. You can change the shape further by clicking and dragging on the small circles each side of the node. Adjust them until you are happy with the outer shape of your character.

Unity tutorial 2d sprites Inkscape

Next make an eye by creating an oval (click on the circle button, click and drag to draw it). Change the fill colour to white (in the “Fill and Stroke” panel in the “Fill” tab). Zoom in by clicking the magnifying glass, and then clicking on the screen over the eye. Now draw a smaller oval for the pupil. Click on the “Select and transform objects button”, then click and drag your mouse over the eye to select both objects. Now Ctrl+C to copy and Ctrl+V to paste. Ctrl+V pastes the eye at the cursor’s location. Move the pupil in the second eye to give the character a crazy expression, then zoom back out (by selecting the magnifying glass and clicking on the minus button in the bar at the top) and move both eyes onto the character. If they are the wrong size, you can scale them by clicking and dragging the arrows around the selection.

Unity tutorial 2d sprites Inkscape

To create the mouth, draw another oval, and this time fill it with black (in the “Fill and Stroke” panel in the “Fill” tab). Go to Path -> Object to Path, and click on the “Edit paths by node” button. Adjust the nodes to look like a mouth, then drag it onto the character. You could also add other details in like eyebrows using the same method.

Now that we’ve finished the character, we’ll make a piece of ground. Start by drawing a square – click on the square icon, then click and drag while pressing control. The control key limits the shape to be a square or a rectangle with a specific width/height ratio. Change the colour by going to “Fill and Stroke”, and picking green (or whatever you’d prefer) under “Fill”. Remove the border under the “Stroke style” panel by changing the width to zero.

Click on the “Draw Freehand Lines” button then draw a curved line over the square – we’re going to fill under the line with a brown earthy colour. You might need to alter the smoothing option at the top of the screen. Also make sure the Create Spiro path button is selected. Increase the thickness of the line by increasing the width in the “Stroke style” panel. Click on the line twice to get the rotate options to show, then rotate the curve so that tiling the squares side by side will roughly match up.

Unity tutorial 2d sprites Inkscape

Deselect the line you’ve just drawn by clicking on the background, then zoom in on the piece of ground by clicking the magnifying glass tool. Next, click a brown colour and the fill tool, then click under the line to fill. If you can see green around the edge, undo the fill, then making sure the fill tool is still selected, increase the “Grow/Shrink by” value in the top bar and try filling again. Now delete the line.

I’m going to add a little bit of detail now by drawing some rocks to add to the ground. Just draw some ovals using the circle tool, manipulate them like we did for the character, choose a colour in the “Fill” panel, then drag and drop to position them on the square.

Save the file by going to File -> Save. Next, we need to export a png version of each image to use in Unity. To do this, click on the select button and drag over the character. All of the parts of the character should have a dotted box around them. If they don’t, try again. Go to File -> Export Bitmap; a window will appear. Make sure Selection is selected, then click “Export as” to pick where to export the file to and the file’s name. You can also change the bitmap size. I’m going to change this to 512. The larger the file is, the more memory it will take up in the game. Especially on mobile platforms, this can easily become a problem. If the file is too small, it will look pixelated. 512 should be fine.

Unity tutorial 2d sprites Inkscape

Do the same for the piece of ground.

Find the folder you saved the images in, then re-open the Unity project we created in the previous tutorial. To import them, simply drag the images from the folder into the Project window. Since these are sprites, drag them into the Sprites folder we created. Unity should automatically import them as sprites. To check, click on one, then look at the texture type in the inspector. Sprite mode should be single for these images.

Drag the ground into the scene window to create a new gameobject. Just dragging the image creates the gameobject for you. Looking at the inspector, you can see that it is made up of a transform and a Sprite Renderer component which has the character sprite in the Sprite selector.

You can change the gameobject’s position by clicking and dragging over the transform component’s X (or Y or Z) position, typing a value in the box, or clicking on the second icon (square arrows) above the scene view and then drag the gizmos that appear on the gameobject in the scene window. I’m going to position the ground at zero on the X axis, and a bit below zero on the Y axis.

Drag the character into the scene, just above the ground. If we press play now, nothing will happen because the gameobjects are just images. We need to add some physics to the scene.

Unity tutorial 2d sprites import png

Make sure the character is selected, then click the “Add Component” button in the inspector. Go to Physics 2D, click, then add a Rigidbody 2D. This component tells Unity that we want its physics engine to take control of the object’s motion. If we press play now, the character falls. We want it to land on the ground, so we also need to add colliders to both objects. In the character’s inspector window, add another Physics 2D component – the Circle Collider 2D. For the ground, add a Box Collider 2D.

Press play again. This time, the character will fall and land on the ground.

Create a folder called Scenes by right clicking in the project window, going to Create and clicking on Folder. The scene that we’re saving is the collection of gameobjects in the scene view and hierarchy. A game can have multiple scenes within one project. For example, you might have one scene for each level. Save the scene by going to File -> Save Scene. Call it something like LineRoller and save it into the Scenes folder. Now save the project (File -> Save Project).

In this tutorial, we’ve looked at drawing simple artwork in Inkscape, importing it to Unity and adding some simple physics. In the next tutorial, I’ll talk about prefabs, and we’ll start programming – we’ll write some code to generate the initial terrain.

Remember you can download the files for this tutorial on the Downloads page. See you next time!

PreviousTutorialButtonNextTutorialButton

Leave a Reply

Your email address will not be published. Required fields are marked *