I’ve been “playing” quite a bit with 2D game development for Windows 8 and Windows Phone lately. HTML5 Game Creation tools like YoYo Games’ GameMaker, and Scirra’s Construct 2 make Windows 8 game development accessible to developers at all skill levels. And of course, as a developer there isn’t an API we can’t handle. But games are just loops and if-else branches. The best games have great sounds and graphics as well. And coming up with those types of game assets isn’t always easy for developers. Or is it? I think most developers underestimate their creative abilities, and that if they were to dive in and try creating sounds and graphics for themselves, they might just be surprised at how good they do. Even if the sounds or graphics don’t end up making it into the final version of the games you publish, they can help you form the tone, feel, and play of the game as you go.
Following is a list of the various tools I use for creating graphics and sounds for games:
Vector’s vs. Bitmaps
Bitmap Graphics
The various graphical elements in your games (sprites, backgrounds, environmental art, etc) are almost always bitmaps. With bitmap graphics, each individual pixel in the graphic is a assigned a specific color (and possibly opacity). PNGs, JPGs, GIFs, BMPs, etc are all common file formats for storing bitmap images.
Graphics processors know how to draw bitmaps quickly, and with control over each individual pixel you have amazing control over how the image looks at a specific size. However, they don’t scale up very well at all. As you make a bitmap larger, or zoom in on it, the individual pixels become obvious and the image begins to look blocky. To make a bitmap smaller, new pixels have to be added and the color of those new pixels must be “guessed” or “interpolated”. In addition, editing bitmaps can be difficult depending on what needs to be done. For example, if I wanted to move the hat on my character below, I would have to first select all the pixels for the hat, and move them to a new location in the image. I would then have to replace the pixels it held previously with new colors.
Vector Graphics
Vector graphics on the other hand describe the images using “Vectors”. Each vector describes the shape, points, fill color, line color, thickness, ends, etc of each line in the graphic. They can be edited, re-shaped, moved, rotated, skewed, scaled up, scaled down, etc without using quality. AI, SVG, CDR, & EMF are all common file formats used to store vector images.
These give you a ton of control over creating an image without having to commit to the placement of a specific pixel. However, because they are really mathematical descriptions of your image, they can’t be processed as rapidly by graphics processors and are thus not a great choice for the assets in your games. So, what to do? Well, create your graphics in a vector image editing tool (Like InkScape, Illustrator, or Corel Draw) and then export the graphic as a bitmap at the specific size you need for your game! You can even export it in different poses, and at different sizes! Cool!
Graphics Tools
There are a number of great bitmap editors out there, Adobe PhotoShop is probably the premier tool, but it comes at a price. For my money, you can’t go wrong with Gimp. It has as much capability as you need for creating 2D game graphics, and the price is hard to beat (free).
InkScape is the vector graphics tool I use. Like Gimp, it has all the power that I need for creating 2D game graphics, and is free. Just as Adobe PhotoShop is sort of the premier bitmap tool, Adobe Illustrator is the premier vector tool, but is again pretty pricey. Another popular tool is Corel Draw, and you can get the Corel Draw essentials tool relatively in-expensively.
Waveforms vs. Sequences
Waveforms
Waveforms and sequences are two methods for working with sound data, much in the same way as bitmaps and vectors were different ways of working with image data. Wave forms are a digital representation of a sound. The digital data is captured at a specific “sample rate”. The higher the sample rate, the more samples there are per second. With a waveform editor, you really modifiying the collection of samples much in the same way as you edit individual pixels in a bitmap. They are easy to edit with filters, etc if you want to affect all the sounds in a certain time range, but they can’t help you easily change the bass guitar sound from an electric bass to an upright bass for example. MP3s, WAV, OGG, are common file formats for storing wave forms:
Sequences
Sequencer’s are like the “vector’s” of the sound world. The give you a way to describe a specific sound (guitar, keyboard, bass, drum, etc) to play, at a specific pitch and volume, at a specific time and duration. They often come with complete libraries of sounds and even some pre-built “loops” (looping sequences that can repeat). They give you ultimate control over the sounds you make, but much like vector graphics, require too much processing for real-time game play. So, you will typically create background music, etc, in a sequencing tool, and then export the music out to an MP3, etc.
Sound Tools
Audacity is a great open source waveform editor. Using even a basic microphone (of course better is better) you can record sounds using audacity, process it with some effects (“GVerb”, “Change Pitch”, and more) and get some pretty respectable audio for your games. This is great for sound effects like the click’s, pops, whirs,whooshes, bangs and booms in your games. Just pretend you are a kid again and playing cops and robbers in the back yard. You know you’ve made a sound effect or two in the past, come on!
StageLight is an in-expensive (like $9.99) music sequencing tool. It helps you create songs that you can use for the soundtrack in your games. Even if you aren’t musically inclined these tools can help you create a simple beat, and possibly even a basic melody that you can play in the background of your games.
Resource Links:
Michael Palermo’s GameMaker Resources: http://aka.ms/4gamemaker
Jeremy Foster’s Media Page: codefoster.com/media
Chris Hildebrand’s 2D Game Art for Programmers Blog: 2dgameartforprogrammers.blogspot.com/
Bret’s Character Template: aka.ms/bsct
