Tip #6: Watch your Edges

Photoshop (and other paint programs) tries to helpfully blend everything together, giving you nice, smooth antialiased edges. Which is great, except when you want a crisp edge for your 1-bit alpha. Photoshop has ruined many a 3D tree-billboard and beautiful 2D sprite edge with it's overzealous edge mushing. Here's my workflow for making sprites into game-ready images. I should make this an action or a script, someday, but it's pretty simple:

Step 1: Isolate the hi-res version on a transparent background

Step 2: Downsample to target resolution

Here's he's (just about) 64x64, still against a transparent background.

Step 3: Make a crispy edge

Here's how to get the edges right:

1. Magic Wand the transparent parts. Important: Set a very low "tolerance" value and most importantly, make sure "anti-alias" is set to OFF.
2. Invert the selection (CTRL-SHIFT-I). It should be about a pixel or so bigger than the subject.
3. Make a new layer underneath the subject, and fill the selection with solid black (or your outline color).
4. If you're game engine wants a color-key background like in this example, add it now as a solid layer below. If you're using transparency, just leave the transparent background as-is.

Step 4: Clean up the pixels

Only now do you start messing with individual pixels. Your outline will probably be a little chunky, use the pencil tool to clean it up, and also add detail to the parts of the sprite that got a little blurred in the downsampling. Here, I just cleaned up the face, the tail, and the antennae.

The point is the most time-consuming way to paint a sprite is one pixel at a time. So you want to put off on this step until as late as possible.

Done: The final enemy sprite

Here's the final sprite at regular and 2x size. It's not perfect, and it's certainly not going to get me a job at Square or anything, but it turned out all right for programmer art.

Tip #7: Create Variations

You might want twenty monsters or spaceships for your game. Great! But you only have so much time. If you create one or two monster-spaceships that you like, you can make variations of them. Change the color. Many of the creatures in "Diablo" were just other creatures with different colors. Same deal with Pac-Man. Or you can change the scale, cut and paste parts. Instead of a meatasaur, vegisaur and a monkisaur, create a whole genus of related meatsaurs with slighty different features. You can turn out five or ten variations in the time it takes to do one new creature.

With the hue/saturation tool, I made a red version of the and erased his antennae. Then I added wings to get a completely different enemy. An added bonus of this technique is that it will make all your enemies look stylisticly similar, so your levels look more consistent, almost as if you planned it that way.

Tip #8: Avoid Animation

• Use a theme that doesn't need it. Spaceships don't need much animation. Vechicles don't really, and you can fake wheels moving. If you can come up with a concept that doesn't need animation, you're much better off. And you'll save yourself some coding time, too.
• If you must, start with simple cheats. Just flip an overhead sprite of a character horizontally and you've got a 2-frame run cycle. You can get away with amazingly few frames, look at sprite rips from old gameboy and NES games to see just how few. Final Fantasy Sprites
• Use templates. Don't steal a sprite rip, but steal the poses from it. For this sprite, I found an example of a sprite from Mega-Man, and drew a new sprite, but used the same poses.
  

  

• Rotoscoping: it's not just for singing orcs anymore. Many digital cameras have a "burst" mode, or you can film a short video and extract the frames. Film yourself doing a few simple actions, extract the frame and start tracing. Recognize this? Warning: this can turn into a time sink if you're not careful, so don't get carried away filming stuff. It's just a guide.

Tip #9: Skyboxen

Making a 3D game?

Implementing a simple skybox is not very hard to do. But in terms of visual bang-for-the-buck, they can't be beat. The skybox does the important job of FILLING THE SCREEN WITH SOMETHING.

I say "skybox" here but this could be any type of panoramic background, from a cube-mapped skybox, to a panoramic image on a sphere or hemisphere, to a simple background image for a 2Dish game.

But where do I get a nice skybox image?

1. Wait until sunset or a nice cloud formation wanders by, go outside (or get up to your roof) and take some photos. Obviously, this is weather dependent, you don't get brilliant sunsets everyday (unless you live in Florida), but you can post-process the heck out of whatever you shoot. Just to illustrate, the day after I wrote this, I took these pictures on the way home from the supermarket. This was a little unusual, where I live is not known for gorgeous sunsets like this, but even on a normal day you'll get something.
   
   ps. They're a bit blurry, but I've included links to the full-res versions, so if you want to use them for something go ahead, use without any restrictions.

2. Paint it yourself! Here's a quick tutorial I whipped up on painting skies:
   

   Compare how much better Zillagame (my first ludumdare entry ever!) looks. On the left, no skybox (and an alpha sorting bug), and on the right with the skybox we just made.

   
3. If this isn't for a contest, there are tons of free or reasonably priced skybox images online.
   • 1000 skies
     
   • Just google for "Free HDR Skies". You don't need HDR for game purposes but that makes it easier to find. Or search for "Sky Pano" or "sunset" on flickr (but check the license before you use any of these).

Also, keep in mind that the sky is the major light source for the outside world. This goes hand in hand with the "color palette" tip above. Use colors from the skybox when making your level and setting up your lighting.

Of course, your game doesn't have to take place at sunset. Unless it's a racing game, I think there's some sort of law requiring that. A clear midday sky, a photoshopped alien landscape, whatever is most appropriate for the setting of your level.

Tip #10: Bake in lighting

This works for a level or a character. It might not be "correct", especially when you mix it with runtime lighting, but it looks good. If you texture your level/character without overlapping anywhere, you can do this without writing an extra line of code by baking light and combining it directly into your color texture map, and if you take a bit of time to handle multiple UV sets you can get full-on lightmapping in your game.

In my 48 hour game, "Bugzapper", all the lighting on the structure is baked into the texture. In fact, I ran out of time to even paint the diffuse texture. The light direction is totally wrong with respect to the skybox, but most people won't notice that, anyways.

Here's instructions on how to use Blender to bake. Maya and others have similar fuctions. Don't worry about baking all the fancy amboccl/normal map stuff, if you're not writing a real game. Just bake EVERYTHING in ("aka full render bake") to the base texture and then use no lighting or very simple lighting in your game.
Baking Lighting with Blender
Here's another example of using this on a terrain in blender to make it look good:
Blender terrain baking

One word of warning, don't try to figure this out during a contest. Try it out beforehand to get the process down first, you can waste a lot of time figuring out how to do this, but once you have it, it can take 15-20 minutes during a contest and make a huge difference.

Also, wait until you are sure you are final with your model's textures before doing this. You can't unbake, and you don't want to have to do this twice.

Tip #11: Get a Tablet

When a lot of people I know first buy a tablet, they take a while to get used to it. Here's some tips to help make the most of a tablet

• In the control panel, crank up the pressure sensitivity towards firm. You want to have to really mash down on it to get full pressure. By default, the pressure is way too loose and you end up losing most of the control
• Drawing with a sheet of blank paper totally changes the feel. Different types of paper -- copy paper, magazine pages, construction paper, etc -- can totally change the feel. Experiment.
• Practice. I know I said none of these tips require practice, but I lied. Try these exercises:
  • In Photoshop, make 10 squares in a row and fill them with greyscale from 0% (black) to 100% (white). Beneath them, make 10 empty squares. Try to shade the squares below to match the guide squares (if you squint your eyes at them). Try this with different brushes, practice the pressure sensetivity.
  • Try handwriting something, like the alphabet or copy a passage of text. Start out very large, with huge letters, and get progressively smaller. This will both get your hand used to the tablet, and your eyes used to looking at the screen while you are drawing somewhere else.

Also, in this day of touch-screen interfaces, having a tablet can be a cheap way to prototype touch-style gameplay (though without the multitouch). It's not exactly the same but it's a lot closer than using a mouse.

Additional Resources

• Color Theory
• Texturing Tutorial
• Ludumdare 48-hour Contest
• Tile Studio Art Tutorial