Hands-On GameDev: Five-Minute Textures

by

If you happen to follow me on Twitter, you may have caught me sprucing up my “developer art” during a coding break, thrilled with myself for very quickly improving the backdrop of my card game prototype. If not, here was the tweet:

Now, clearly this is not game-changing artwork–though I like the Contra level 1 thing it has going on–but the speed with which I created something appropriate was a huge win. I thought I would share a couple of tricks for anyone interested. You may or may not consider this technique production-quality, but it may be a lifesaver during your next game jam weekend.

Quick and Dirty 2D Textures

For demonstration purposes, let’s say I need to come up with three materials to use, yesterday. I’m going to quickly create ground, water, and rock textures that won’t look out of place in a retro-style 2D game. To follow along as closely as possible, you will need just about any version of GIMP.

Quick note: I will not go into TONS of detail about the individual steps. These are all pretty routine tasks, and if you’re unfamiliar with them, they’ll be easy to look up.

  1. Create a new white image – The size is up to you.
  2. Fill the image with your desired base color – I’m starting with grass, I’ll use green.
  3. Create a new transparent layer on top
    layers
  4. Fill the top layer with a pattern – Use your imagination and pick a pattern that might create a nice texture with a little tweaking. Worry about its texture, not its color. You’ll get better at this with a little experimentation. I chose Walnut.pattern

    Note: There are good tutorials out there for adding patterns to GIMP if you need more to work with.

  5. Adjust the pattern layer:
    1. Start with Opacity at 50%, tweak as desired.
    2. Set a layer mode that improves the look. For my purposes, Burn usually looks good.

    pattern2

    Don’t worry if you’re not quite loving the look yet, we haven’t yet applied the dirtiest shortcut of all…

  6. Apply filthy, fake pixelation:
    1. Click Filters > Blur > Pixelize…
    2. Experiment with the Pixel Width and Pixel Height settings until you like the look in the preview window.

    pattern3

  7. Make final opacity and layer mode changes as desired

You’re done!

There are any number of tweaks you can make to this recipe, including gradients on the base color layer, scaling up the pattern layer for an even more pronounced retro/pixelated look, etc.

Here are my other two patterns and their ingredients:

Water

water

Pattern: Leopard
Pattern Layer Mode: Burn
Opacity: 20%
Pixellization: Around 4 Height/Width
Other Tweaks: Pattern scaled up to 250% height/width

Stone

stone

Pattern: Burlwood (Whatever that is)
Pattern Layer Mode: Difference
Opacity: 50%
Pixellization: Up around 10 Height/Width
Other Tweaks: Pattern scaled way up, saturation reduced, contrast increased

Now go make some textures, and let me know if this kind of post helps!

Leave a Comment