Skip to content

Collecting Game Assets

One important part about building games is to collect assets. These are non-code files that contain things such as images, maps, animations and sound. As you have extra time throughout this unit, you should work on collecting assets for your game.

Map Building

We briefly looked at this near the beginning of the course. Details can be found here.

Character Images and/or Animations

Building characters for your game from scratch requires a lot of time and artistic skill, since you need to create every animation frame for any position that the character may find itself in.

Thankfully, there are a lot of generous people out there who have created this sort of artwork and have released it for free use. A great resource is OpenGameArt.

There are three ways we can store character assets:

  1. As a single image - for characters that don't animate.
  2. As a collection of images - one image for each animation frame. For best results, images should all be the same size.
  3. As a spritesheet - One file containing multiple images. OArcade supports spritesheets where each sub-image is of the same size, arranged in a grid pattern.

All images should be saved in a png file format with a transparent background (png is the most common graphics format that supports transparent backgrounds).

If you need to make a background transparent, or you just want to use a portion of an image file you downloaded, or you want to convert another image format to png, Gimp is a good free program that is installed on the school computers that can do these things easily. I will go over how to do this in class, and I also made a quick video here. An overview of the steps you need to take:

  • Open the image in Gimp (usually can be done by right-clicking on the file, and going to the Open with sub-menu)
  • To isolate part of the image, select it, then Image -> Crop to Selection
  • If you need to make the background transparent, right-click on its layer and choose Add Alpha Channel. If that option is grayed out, it means the image already has an alpha channel. Next, choose the fuzzy select tool, which looks like a magic wand. I would recommend enabling the Draw Mask option associated with this tool. Then use the tool to select the background and hit the delete key (which is different than the backspace key).
  • As a last step, select Image -> Crop to Image so that you're cropped in as tightly as possible, which will eliminate an excess hit box in your game.

Vitruvian LPC Studio

If you would like an easy way to design your own characters, check out Vitruvian LPC Studio. This will allow you to combine the artwork of others in creative ways to create certain types of characters.

This program allows you to export your characters as spritesheets that are compatible with OArcade.

Your Task

  1. Create at least one map.
  2. Download a few characters from OpenGameArt, and convert the downloads to appropriate file formats.
  3. Create a couple characters using Vitruvian LPC Studio.

For the purpose of this unit, your characters and maps don't need to fit a common theme, since we're just practicing. However, if you decide to do a game as a final project, you might want to think about a theme for that.