So You Want to Make a Computer Game: Inventory Items

November 13, 2015

Last time in this series of blog posts to help create your first computer game we introduced some interactivity into our game world by adding in a pile of old pirate bones that the player could search through. While searching, the player can discover an old flintlock pistol. However, when they click on this pistol it disappears into the ether never to be seen again. Today, we’ll be changing the game so the pistol goes to the player’s inventory so they can carry and use it elsewhere.

The Adventure Maker game engine that we’ve been using to develop our game represents the items in the player’s inventory as small pictures of those items (as opposed to simple text, for example). That means that for each item we want the player to be able to store in their inventory, we need to have a small picture of that item.

For our game, we’re ultimately going to have two inventory items: the flintlock pistol and a pirate hatchet. I pulled these items from my cache of Halloween supplies—originally purchased at a dollar store—and arrayed them on a large sheet of paper. I took a top down picture of the items with my camera and brought that into the computer. The starting picture looks something like this:

The inventory items.

If you’ve been using my pictures from previous blog posts for this first game, then you’ll want to continue that trend by downloading the extra pictures needed for today’s blog entry.

What we need to do with this picture is to break it out into two images, scale those images down, and incorporate them into Adventure Maker as inventory items.

There are many software applications out there that we could use to extract the images. Some are more powerful than others, some are easier to use, some are free and some are more expensive. Since we’re keeping things simple, we’ll go with good, old, simple Microsoft Paint, which is a part of the typical installation of the Microsoft Windows operating system. Basically, if you’ve got Windows you’ve got Paint.

We’ll start our work with the flintlock. First we run Microsoft Paint. You should be able to find it in the Windows Start menu as All Programs > Accessories > Paint. Once you’ve started Paint, open the image you’re going to be working on, the one with the pirate implements.

Paint provides a lot of simple image editing tools such as the ability to do freehand drawing, filling areas of a picture with a specific color, or drawing special shapes like circles and squares. We want to use the Line tool from the Shapes section of paint.

Paint’s Line tool.

By default, lines are only a single pixel wide. To make the outlining work easier I find that using a thicker line is helpful. This can be chosen from the Size dropdown in paint.

The line Size dropdown.

Lastly, we also want to use a different color than the default black. You can use any color you want so long as it’s not a color used in the actual image. In my case, I opted to use the color blue by clicking on it in the Colors section.

The color blue!

With our line tool properly configured, we’re ready to start outlining. This is as simple as drawing line segments around the edges of the actual object, which in this case is the flintlock. Don’t worry about being too terribly accurate with the outlining. When we reduce the size of the image shortly the player won’t be able to tell if the outlining is a little off.

The flintlock partially outlined.

Once we’ve outlined the flintlock itself, we want to change everything outside of that outline to the same blue color as we used for the outline itself. While this is possible to do in Paint, it’s really time consuming and tedious because there’s no “one-click” option to do this with Paint. Fortunately, I’ve prepared a little tool that will help you out.

Download SeaLeft Fill2Border.

Once you’ve downloaded SeaLeft Fill2Border, you can double-click its icon to run it from wherever you downloaded it to. This is a simple application whose sole purpose is to fill the area bounded with a given color with that color. This differs from Paint’s “Fill” tool, which only changes adjacent pixels that have the exact same color to a different color (for example, if you clicked on a pixel colored red, only other red pixels touching that one would be changed).

Before using the SeaLeft Fill2border tool, you’ll want to save the changes you’ve made to the flintlock image. I would recommend that you save the image as a BMP file as this is a “lossless” image file format, which will ensure that you don’t lose any detail from the picture.

With SeaLeft Fill2Border, open the image of the flintlock you’ve been working on (you’ll want to save your changes in Paint first). Fill2Border will start with the “Dropper” tool pre-selected, which is used to choose the color that you want to fill with. Find the outline in the image and click on it to choose its blue color as the fill color.

Fill2Border's Dropper tool.

Fill2Border will automatically switch from the Dropper tool to its “Fill” tool. Click on any non-blue pixel outside the outline of the flintlock. The entire outside area will now be filled in Blue. If the flint lock also becomes blue then it means that you have a gap in your outline. In that case, you should return to Paint and find the gap and close it with another blue line before using Fill2Border again. Once you’ve properly colored the image in Fill2Border be sure to save it again.

The Fill tool.

We’ve now got our flintlock pistol surrounded by solid blue. The next thing we want to do is extract this out to its own image without the hatchet or any of the non-blue background.

Start by opening the blue-filled image in Paint. Open the “Select” dropdown and choose the “Select All” option. This “selects” your entire image, which then allows you to drag it around with the mouse. Move the image so that the top left of the pistol is very close to the top and left sides of Paint.

The pistol dragged to the top-left in Paint.

Click the “Select” tool to cause the selection box around the image to be removed. Now scroll down to the bottom-right corner of the entire image. You’ll see a little “gabber box” there. When you drag this box you can change the size and dimensions of your image in Paint. Drag this box so that the sides of the image are very close to the bottom and right sides of the pistol.

The image sized to fit the pistol.

Now you should have an image of just the flintlock, where the background is solid blue and that blue is only poking out a little bit around the edges of the flintlock. You may want to save this version of the flintlock as a separate file to be safe.

We’re almost to the point where we can add the flintlock to our game as an inventory item. However, in its current form the flintlock image is too big for Adventure Maker. Adventure Maker uses ICO image files to represent inventory items. These are special lossless image files that allow you to make part of the image transparent. We’re going to turn our flintlock into an ICO and make that bright blue color transparent. That way, when we see the pistol in game, we’ll only see the pistol and not the blue square around it.

As I mentioned, our current pistol image is too big. Adventure Maker likes to work with small ICO images. Adventure Maker itself comes with a tool that lets you save images as ICOs, but only if they’re 32x32 pixels in size.

Before we get to that tool, we need to shrink our image. In paint, select the “Resize” tool. This will display a “Resize and Skew” window. In the Resize section, choose to resize by “Pixels”. Our flintlock pistol is taller than it is wide, so type in the number 32 in the box labeled “Vertical”.

The Resize and Skew dialog.

When you click the OK button, the image will be resized so that it is 32 pixels tall and less than that wide. Now we’re going to copy this image so we can use Adventure Maker’s ICO tool. First, select the entire image in Paint just as you did for repositioning the pistol (see above if you need a reminder). Once you have the entire image selected, click the “Copy” tool to copy the image to the Windows clipboard.

Now we’re finally going to use Adventure Maker’s ICO tool. From the Windows Start menu go to All Programs > Adventure Maker > Tools > Icon Editor. This will start the tool and present you with a large white square where you can construct your new icon.

We already have our icon stored on the Windows clipboard. So in Icon Editor, click on the Edit menu and select Paste. You should now see the flintlock in the top left of the icon area. Drag the flintlock so it is more or less centered in this area.

The pistol pasted and centered in Icon Editor.

Almost there, all we have to do is tell the Icon Editor which parts of the icon to make transparent. First pick the Fill tool from the left toolbar of Icon Editor, then in the bottom-right corner of the application select the little radio button between the Transparent and Inverse boxes.

The Fill tool and Transparent/Inverse setting.

By default, the background of the icon starts off transparent. All we have to do is change the blue pixels to also be transparent. Anywhere that there’s a blue pixel in our image, we left-click to make it transparent.

The transparent-ized pistol.

Whew! That was a bit of work, but now we can finally go to the File menu and Save our icon. I recommend giving it a descriptive name like “flintlock.ico” so it’s easy to recognize later.

Our first ICO image is done! However, for today’s tutorial we need a second inventory item as well and consequently a second ICO image. This one will be of the pirate hatchet that’s in the original picture I provided. Using the same method as described above, extract the hatchet out to its own ICO file.

Once you have both the flintlock and the hatchet ICO images, it’s time to use them in Adventure Maker.

If you weren’t able to incorporate the bone pile from last time into your Adventure Maker project, then you can download my current Adventure Maker work in progress project here.

Start Adventure Maker as normal and open the frame containing the pile of bones that we added last time to our game.

Open the Hotspot Properties window for the hotspot showing the flintlock image but none of the bones that would otherwise hide it. This is the same Hotspot Properties window we’ve been using all along in our development. However, we’re now going to use a new tab in this window that we haven’t visited before.

Switch to the “Item” tab of the Hotspot Properties window. Click the little checkbox that says “When the hotspot is clicked, add an item to the inventory.” As this label describes, when the player clicks on the flintlock picture, they’re going to get an item placed in their inventory.

Click on the “New item…” button that appears to start creating the flintlock as an actual item. Adventure Maker will ask for the name of this item, which it will display in game when the player places their mouse over the item in their inventory. I went for the obvious name of “Flintlock”.

When you click OK, Adventure Maker will now ask you for an ICO image to represent the inventory item. Search for the ICO image created with Adventure Maker’s Icon Editor and select that.

You should now be returned to the Item tab of the Hotspot Properties window and should see the Flintlock displayed. Hit OK to close the Hotspot Properties window.

The configured pistol inventory item.

To test out your new inventory item, you can run the Test Frame (Preview) from the Frame Editor window. The scene of bones should display and when you click through to the pistol and pick it up, instead of simply disappearing, it should now be placed into the inventory in the game. The inventory displays for a short time when an item is added. It also displays again if the player moves the mouse to the top of the frame.

Now, to make our new inventory item actually usable in the game we’re going to add one new node into our project. From the downloaded images. for this blog, create a new frame in Adventure Maker from the image node_27_1.jpg. You’ll see this image is a close up of a bench with some gauzy stuff tied to it.

In a manner similar to adding the bone pile last time, add in node_27_1_sub_1.jpg as a picture hotspot positioned to cover that green gauzy stuff. You’ll see this new hotspot has our pirate hatchet in it. Don’t worry about the fact that the hatchet is only held on with a thin piece of twine. We’ll be changing that next time so that the hatchet appears to be secured in place by a locked, thick metal latch. Anyway, on the Variables tab set this hatchet hotspot to only be visible if the value of a new variable, “hatchet_taken”, is 0. See the previous blog entry if you need a reminder on how to do this.

While we’re adding hotspots, add three more regular hotspots to form a “U” around the hatchet hotspot. Set these hotspots to go to node_19_1, which is a zoomed out picture of the bench. The final layout of hotspots should look something like this:

The layout of node_27_1.

Now, we’re going to finish off with our flintlock inventory item so that the player can actually do something with it. In the final game, the hatchet is going to be held in place by a heavy padlock, as I mentioned above. The player is going to use the flintlock to shoot the padlock off in order to take the hatchet.

With the Frame Editor for node_27_1 open, click the “Manage Inventory Items…” button to open a new Inventory Items List window. You should see the flintlock listed on this new window.

Items can be dragged from the Inventory Item List window.

From the list drag the Flintlock line over to the node_27_1 hotspot showing the tied up hatchet. This will open a Hotspot Properties window similar to the ones we’ve been using so far. This window is specifically for the interaction between the flintlock and the hatchet hotspot (i.e. it’s used to tell Adventure Maker what to do when the player uses the flintlock on the hatchet hotspot).

Switch to the Action tab of the Hotspot Properties window. Here click on the box next to “Remove the dragged item from the inventory” to check it. This will cause Adventure Maker to take the flintlock out of the player’s inventory when they use it on the hotspot so they can’t keep using it (after all, it’s a flintlock, it only has the one bullet).

You may also want to display a text message when this interaction. Something to reinforce that the player is receiving the hatchet when they use the flintlock here.

The configured Action tab for using the pistol on the hatchet.

Now, switch over to the Item tab. Just as you did for the flintlock, set up this tab so the player receives another new item. In this case it should be the Hatchet.

Finally, switch to the variables tab and configure it so that the value of the hatchet_taken variable we added when creating the hatchet picture hotspot in node_27_1 will get set to 1 when the flintlock is used on the hatchet.

One last thing, we need to make sure the player can actually reach node_27_1. Pop over to node_19_1 and add a new hotspot on top of the bench that will take the player to node_27_1.

Go ahead and try the game out at this point. If everything is hooked up correctly then you should be able to

• go to the pile of bones
• search through the bones and get the flintlock added to your inventory
• go to the bench
• drag the flintlock from your inventory to the hatchet hotspot to shoot off the lock and receive the hatchet into your inventory in place of the flintlock

And that’s it! That’s the inventory.

If it felt like a really long blog post today, that’s because it was. However, keep in mind that we did cover three new tools today to make our inventory items: Microsoft Paint, SeaLeft Fill2Border, and Adventure Maker Icon Editor. And we learned how to create and use inventory items in Adventure Maker itself.

Next time we’ll be expanding on what we learned with Microsoft Paint to not just make inventory items, but to doctor regular images to make them better suited and more interesting for our particular game. In doing so, we’ll be completing all of the remaining artwork we need for the game and we’ll be incorporating that artwork to form the full path through the game from beginning to end. See you in two weeks!

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: