So You Want to Make a Computer Game: Custom Artwork

November 27, 2015

Last time in our series to help you create your first computer game I promised this time around that we’d be finishing up with the artwork as well as finishing the full path of the game from beginning to end. Unfortunately, I’m going to have to break part of that promise. In writing this entry, I found I had more to cover on the custom artwork side of things than I had expected. So we’ll be dealing with that exclusively today and then we’ll incorporate the new art pieces into our project next time.

However, this is a good lesson for game development. Even on a small, simple game, inevitably things will always take longer to do than you expected. Moral for today.

All right, for today we’ll be dealing with more artwork. If you’ve been using my images to this point, then you may want to download the new images that we’ll need for this tutorial.

For our little starting game we’ve done our best to minimize the amount of time spent on creating the artwork. We accomplished this by taking real photos of the environment around us—in my case, a city park—and using those. This is a great way to quickly and cheaply produce artwork for the game. However, unless we’re really lucky, we won’t be able to get pictures of everything we would like to have in the game. That means that we’ll just have to create those special pictures ourselves.

We’ll be looking at two different ways to create these special pictures. I’ll loosely call these two methods “set construction” and “doctoring artwork.” These aren’t official game development terms, but they allow me to put nice titles in this blog post. Like so:

Set Construction

If you’re not able to find a suitable location to use as the background in your game, perhaps you can make it. What I’ve loosely termed as set construction is basically taking an existing real world location that doesn’t quite work for the game and physically changing it so that it does. Don’t worry. You won’t need any advanced carpentry or landscaping skills for this.

My game is all about finding a lost pirate treasure. A pirate treasure that I decided was hidden in a crypt buried in a secret cave below ground. There aren’t many secret caves where I live and even fewer with hidden crypts in them. However, I do have a nice steep stairwell at the back of my place.

Black, plastic garbage bags are cheap to afford especially if you go with one of the no name brands. I took a bunch of said bags and taped them up around my place’s rear stairwell, puffing them out and folding them in interesting ways. It only took a couple of hours to arrange the bags. I supplemented the arrangement with a few things from my collection of Halloween supplies. The result was an area that I could go into and carefully pick angles that looked good to photograph just like any of the natural places I had taken pictures of.

Before and after decorating the stairwell.

That gave me pictures to work with for the cave, but what about the crypt. Again my place served me well there. I have a cold room down in the basement with unfinished concrete walls. The previous owner of my home had built in some rough wood racks that suggested crypt, at least to me. I decorated the room with some Halloween skulls, a complete skeleton, a couple of headstone markers, and a bunch of play money that worked as the pirate treasure.

Before and after decorating the crypt.

But don’t think that constructing something real is limited to just taking background pictures for your game. Perhaps you can piece something together to make an interesting inventory item. Or maybe, as in my case, you can weather some paper to be able to incorporate some interesting notes and hints into your game.

You see, I decided that I would start and end my game with some simple text displays. Not the most exciting way to start and end a game, but, keeping to our mantra of keeping things simple, it is effective. To add a little more visual flare to the start and end text, I decided I’d set the text against a piece of battered and weathered paper that, to my mind at least, gives an appropriately pirate feel, since the game deals with pirates and all.

To accomplish this, I first took a piece of textured, cream colored paper. You can find this kind of paper in some sketchbooks or diaries. The color and texture already gave it a bit of an antiquated look, accented further by my cutting the edges of the paper roughly with some scissors, but I wanted to go a step farther by singing the edges a little bit.

I lit a candle and then held the edges of the paper near but not in the flame. I had the edges about an inch or two above the flame. That was close enough for the edges to brown up a bit and I also browned a couple spots in the middle of the paper. The result was a good, weathered bit of paper that I took a picture of to use as a backdrop for the text in game.

Weathered paper.

Constructing sets and props like this can be both cheap and easy to do. The take away from this is that you should look at places around you not necessarily as they are but as they could be if you decorated them up a bit. Look for interesting ways to use cheap “building” supplies, such as garbage bags for rocks or singed paper for old parchment. Game making is a creative process so unleash your creativity here and have fun!

Doctoring Artwork

Last time we started using Microsoft Paint to edit the images for our inventory items. We saw how to use paint to outline areas inside a photo so that we could more easily extract the outlined parts to use as our items. This time around, we’ll be expanding on our repertoire of Paint techniques to alter images to use as the backgrounds for new nodes and for picture hotspots in our game.

At the end of the last tutorial, we had reached a point in our game where the player could get a flintlock and use it to shoot off a menacing piece of string holding up an old pirate hatchet. I promised then that we’d secure that hatchet in place a bit better, and that’s going to be our first bit of artwork doctoring today.

Behind my place I have a shed with a door that closes with a clasp and padlock. That’s exactly the type of thing I wanted to have securing the pirate hatchet in place so I took a couple of pictures, one with the lock on and one with it off. We’ll start our artwork doctoring by taking the picture of the locked latch and incorporating it into the picture of the background showing the hatchet in game.

Compositing the locked hatchet.

First, start Microsoft Paint and open the picture of the locked latch (node_27_1_sub_1_latch.jpg). For my game, I want the latch to be vertically oriented (up and down). However, the latch on my shed is horizontally oriented (side to side) and I took a picture of it that way specifically to illustrate one of the tools in Paint: rotation. Pretty well all image editing software will provide some sort of rotation tool. It’s a useful tool to be able to use and I just wanted to highlight it here so that if you move on to other image editing software, you’ll know what to look for.

Paint’s rotation tool is very limited. It can only rotate the image in ninety degree increments. Basically a quarter turn at a time. In Paint click on the Rotate dropdown menu and select “Rotate right 90” to get the lock to be up and down.

Paint’s Rotate command.

Now we need to isolate the latch and lock from the background of the shed. This is done in the same way as isolating the flintlock pistol and pirate hatchet from last time. Using the Line tool and a distinct color, outline the latch and lock. Save the file, load it into SeaLeft Fill2Border, fill the background with the outline color, save the resulting file out again, and then reopen it in paint (all of this is covered in the last tutorial, so check that out if you need any help). When you’re done, the result should be something like this:

The isolated lock and latch.

Got the latch and lock isolated? I hope so, because we’re going to do our first composite. For this tutorial we’ll be keeping the compositing very simple. The results won’t be spectacular but they will be good enough.

Start a second copy of Microsoft Paint and use it to open the background image of the hatchet tied to the bench by a bit of string (node_27_1_sub_1_background.jpg). In this copy of paint, click the “Color 2” box and then click the same color that you used for the outline in the lock and latch image. For me, I used the color green as it stood out well from the backdrop and the lock and latch. We’re setting color 2 to green here because when we bring the lock and latch picture in, we’re going to tell Paint to treat the color green as transparent. It will make more sense when we actually try it.

Paint’s Color 2.

Switch back to the first copy of Paint with the lock and latch picture. As described in the last tutorial when moving the flintlock image from Paint into Adventure Maker’s Icon Editor, select the latch and lock and copy it to the Windows clipboard.

Switch over to the copy of Paint with the hatchet image. Click the “Paste” button to paste the copied lock and latch picture over top of the hatchet image. At this point, you probably won’t be able to see through the lock and latch image to the hatchet image unless you’ve used Paint before and changed its starting settings. I’m going to assume you haven’t done that.

You’ll notice that when you paste the lock and latch image, the Select tool becomes highlighted in Paint. Click on the dropdown part of this tool and choose the “Transparent Selection” option that is displayed. This tells Paint that we want to treat any pixels in the pasted image that are Color 2 (in our case green) as transparent.

The Transparent Selection option.

You should now see the green background disappear and the hatchet background become visible while at the same time seeing the lock and latch over top of the hatchet image.

The pasted lock and latch are too big for the hatchet.

You should also see that the lock and latch are way too large for the hatchet. With lock and latch still selected, use Paint’s Resize tool, which I covered last time, to shrink the lock and latch to a reasonable size. I found that shrinking it to 35% gave a nice result. You can experiment with the sizing as long as you keep the lock and latch selected. Once you have a good size you can unselect the lock and latch to make it a permanent part of the picture.

The final composited lock, latch, and hatchet.

Before we move on to our next example of doctoring, take some time to repeat the above steps, this time using the picture of the open latch (node_27_1_latch.jpg) and the picture of the bench with the hatchet removed (node_27_1_background.jpg). Something like this:

Compositing the unlocked, taken hatchet.

Moving on. You may, or may not, remember that in the third installment of our series when we were building our virtual world that we added in a node with an “off leash” dog sign in the picture. I promised back then that we’d be dealing with that at a later date. Well, it’s a later date now.

That sign is perfectly located at the beginning of our game to be able to provide some helpful clues to the player when they start the game. For our project this time, I’ve taken a close up picture of that sign so that the player will be able to “zoom in” on it and read it comfortably. Here’s that zoomed in picture (node_35_1_background.jpg).

The original sign.

What we want to do is doctor this picture to get rid of all the existing text and replace it with text of our own. The first step is to do a bit of outlining on the picture. Again select a distinct Color 1 for the outlining. In this case, I chose the color pink. Using the Line tool, outline the light gray part of the sign just inside the dark gray border. Also roughly outline the City of Calgary information at the bottom of the sign. When done, it should look something like this:

The outlined sign.

Save the image and open it in SeaLeft Fill2Border. Fill the inside of each of the three outlined areas with pink so that the sign now looks like this:

The filled sign.

Open the filled image in Paint. Now a pink sign isn’t too useful to us. We want to use colors that already come from the sign. To do this, start by selecting the “Color Picker” tool in Paint.

Paint’s Color Picker tool.

When you have the Color Picker tool selected you can left-click on any pixel in the picture to choose that pixel’s color for Color 1. You can also right-click to choose a pixel’s color for Color 2. For our purposes, we want to left-click on any of the light gray pixels on the edge of the sign.

Select a light gray from somewhere on the sign.

Now select the “Fill With Color” tool in Paint.

Paint’s Fill tool.

You may recall from last time that I mentioned this tool only fills areas where the pixels are all the same color (as opposed to SeaLeft Fill2Border which fills until it hits pixels of the chosen color). Well, this time we have several pink areas that we now know have pixels of the same color. Click on the top pink area to change it to light gray. Use the Color Picker tool to select a dark gray color from the bottom of the sign and then use the Fill With Color tool to fill the two remaining pink areas. When you’re done the image should look like this:

The blank sign.

We now have a blank sign ready to receive whatever text we want to put in it. To add text in Paint, we naturally enough use the “Text” tool. When you select the tool, you can then draw a box by left-clicking and dragging on the picture where you want to place the text. Draw the box so it fits inside the light gray area of the sign.

Paint’s Text tool and the drawn text box.

You can now type text inside of the box to use on the sign. I found that a font of Arial Narrow and a size of 12 were good for this sign. I also kept the dark gray color selected from before so that my text would use the same dark gray as is on the rest of the sign, just for a little more consistency to make the text feel like it’s more a natural part of the sign.

For the text itself I typed the following:

When you’re done entering the text, click anywhere outside the text box in Paint. The text is now part of the image itself, but it does look a bit strange:

The text starts off left aligned.

Paint doesn’t allow us to change the alignment of the text when we’re entering it. So all of our text gets smushed over to the left side of the box in a very unattractive way. What we need to do is move the parts of the image around containing the text so that they look a bit better. Before doing that, though, be sure to use the Color Picker tool and this time right-click on the light gray area of the sign. This will assign the light gray to Color 2 in Paint. I’ll explain why we’re doing this in just a moment.

Now, to move part of the image around we can use Paint’s Select tool. This time, instead of selecting the entire image, choose the Select tool and then draw a box tight around the first line of text in the sign in the same manner as you drew a box for the text initially.

Selecting the first line.

You can now drag this box around the image to a new place. For example, you can drag the text to be centered at the top of the sign now.

When you drag part of the image like this, Paint automatically fills in the area that you were dragging from with Color 2. This is why you needed to choose that light gray color. Here’s what the picture would have looked like if we hadn’t changed to light gray. Note that here I used the color blue in Color 2 so that you can more easily see the effect.

Moving a selection without using the correct Color 2.

Now you know how to move the bits of the picture around. Go ahead and adjust the other lines of text so that you end up with something like this:

The centered text.

The sign’s a bit better now, but it still looks a little off. That’s because I took the picture of the sign on an angle but the text we’ve added is going straight across the sign. We can adjust this by “skewing” the text parts of the image a little bit. This will make more sense if I describe it as we go through the example.

First, start by selecting the top three lines of text just as you did for positioning. Except this time you’re selecting all three in one box. Like this:

Selecting the first three lines to skew.

Now click the Resize button in Paint to open the Resize and Skew window. We’ve used this window several times now to resize our images. However, this time we’re going to use the bottom part of the window to skew the selected part of the image.

As you can see on the window, skewing means that we take our selected area and push it over a bit. So our area goes from a rectangle to more of a diamond shape. For our purposes we’re going to use the “Vertical” skew. For the top three lines we have selected, I typed in a vertical skew of 9 and then hit the OK button.

Paint’s Skew window.

With the text skewed, we now have a picture like this.

The first three lines skewed.

That looks like the text fits the sign in a much better way. Go ahead and repeat the skewing process for the other lines of text. You’ll find that, because of the angle at which the sign picture was taken, as you move down the sign, you’ll need to skew the text less and less. Of the three remaining lines to skew, I skewed the first at 8 degrees, the second at 7, and the third at 5 to get a final result like this:

The final sign.

You can practice what you just learned by opening up the background image for node 1 of the game (node_1_1_background.jpg). This is the “zoomed out” view of the dog sign. The same doctoring needs to be done here. The background of the sign needs to be turned to light gray and then the same text, although at a smaller size, needs to be applied, positioned, and skewed on the image.

Before and after doctoring the “zoomed out” sign.

While, I’m assigning homework, you’ve now been introduced to all the tools in Paint you need to complete the doctoring of the remaining artwork needed for the game. Here’s a grocery list of what you should prepare for the next tutorial in two weeks’ time (don’t worry if you can’t get this done, I’ll be making the finished pieces available for use next time):

Using your outlining skills, create a new picture from node_15_1_background.jpg with the door replaced by a dark region to represent an open door:

Before and after doctoring the building door.

Using your outlining and image selection and moving skills, create a new picture from node_32_1_sub_1_background.jpg with the door replaced by a dark region to represent an open door and with the pull string raised up on the image (when we incorporate this into the actual game, the player will pull the string down to light the interior of what will be our pirate crypt):

Before and after doctoring the unlit closeup of the crypt door.

Using your outlining, scaling, and moving skills, isolate the sign from pirate_sign.jpg and then add it over top of the restroom signs in node_15_1_sub_1_background.jpg and node_14_1_background.jpg:

 

Before and after doctoring the rest room sign to be a pirate sign (arrr!).

Using your outlining and text writing skills, give the burnt paper from parchment.jpg a dark background and then create two new images, intro.jpg and outro.jpg with the text shown.

Before and after doctoring the intro letter.

The finished outro letter.

Using your outlining, resizing, and positioning skills, isolate a vent slot from oven.jpg and place it over top of the electrical outlet on node_31_1_sub_1_background.jpg and node_31_1_background.jpg (this slot will become a keyhole into the crypt in our next installment).

 

Before and after doctoring the closed and opened doors with a lock.

 

All right, that’s all for this time. This should be the last of the really, really long tutorials. Next time we’ll be taking all of this new artwork and incorporating it into the game to give a full playable experience from beginning to end.

Read up on the whole “So You Want to Make a Computer Game” series:

• Part 1: The First Step
• Part 2: The Artwork
• Part 3: The Virtual World
• Part 4: Interactivity
• Part 5: Inventory Items
• Part 6: Custom Artwork
• Part 7: The Critical Path
• Part 8: Sound and Music
• Part 9: Deploying
• Part 10: The Path Leads On

Previous:   |   Next: