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:
I combined a couple of incredibly lame tricks to get this background and I could not be happier. #indieGameDev pic.twitter.com/11Yj1yJQle
— Todd Mitchell (@mechatodzilla) July 7, 2016
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.
- Create a new white image – The size is up to you.
- Fill the image with your desired base color – I’m starting with grass, I’ll use green.
- Create a new transparent layer on top
- 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.
Note: There are good tutorials out there for adding patterns to GIMP if you need more to work with.
- Adjust the pattern layer:
- Start with Opacity at 50%, tweak as desired.
- Set a layer mode that improves the look. For my purposes, Burn usually looks good.
Don’t worry if you’re not quite loving the look yet, we haven’t yet applied the dirtiest shortcut of all…
- Apply filthy, fake pixelation:
- Click Filters > Blur > Pixelize…
- Experiment with the Pixel Width and Pixel Height settings until you like the look in the preview window.
- 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
Pattern: Leopard
Pattern Layer Mode: Burn
Opacity: 20%
Pixellization: Around 4 Height/Width
Other Tweaks: Pattern scaled up to 250% height/width
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!
About the writer
