Main Character And Environment Design Choices

1

Stats

2,032 visits, 3,083 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 9 Jan, 2014. Last updated 19 Feb, 2019

I've published my first game, Martian Democracy, to the Scirra Arcade and figured I'd do a quick tutorial on my design decisions and how I implemented them.

Colour Theory

Since Mars would be the environment, I figured there'd be a lot of RED on screen; a possible consideration for a main character (the Tank) then would be red's complimentary colour - green - in order to make it pop... however, if you're red-green colour blind like I am, you appreciate it when people avoid these kinds of schemes.

I tried my hand at first with a predominantly blue character (reds and blues have the deepest emotional impact on people), and I have to say, this concept sucked:

I created it in Inkscape just using the Bezier pen tool. Normally I like asymmetrical designs but in this case I decided the tank needed to be more balanced.

I reworked the design from scratch in Photoshop CS 2 - working in Layers is common practice in PS and GIMP so I won't cover that part of it, but what I like to work in is 'chunks.' By using the Elliptical select tool I'll start with a circular shape, then carve into it with additional ellipses (in Photoshop hold down ALT while dragging a new ellipse into the current one).

Once I have a shape - for instance a shape I think would look good as a wing - I fill it with colour. It doesn't matter that I haven't decided on a colour scheme yet, I can always use CTRL+U to change the colour, brightness, and saturation of the 'chunk.'

You can also add to the ellipse by holding down SHIFT and dragging.

Note: for more flexibility, you can use the Pen tool in Photoshop to draw a shape, then convert it into a path by hitting CTRL+Enter - this does the same thing as the Elliptical or Square selection tools but allows you to quickly combine straight and curved forms.

Once I sculpted out a machine I was happy with, I eventually decided on an Analogous colour scheme (purple and orange for the main character, reds for the background) - check out colorschemedesigner.com/, it's a great tool for learning colour theory.

In the end I decided the tank/main character was too fat, so after merging all its layers (note, you don't want to go through the Layers menu option in Photoshop to do this, since you want the background to stay transparent - just select all your Layers in the Layer Window and right click and Merge) I slimmed it down by using CTRL+T and dragging the sides inwards.

I also find adding Noise to an image helps to texturize and unify it - so I created a second layer, filled it with medium gray, set it blend mode to opacity, used Filter - Noise - Add Noise, then merged the layer down. I also shrunk it to its in-game size.

The Background

So, I had my purple-orange character, now I needed my red background. I tried my hand at first creating some backgrounds from scratch, but I'm a lot more comfortable with designing characters than I am with environments. Another great resource came to mind - cgtextures.com. Membership is free (membership is only used to regulate the amount of images that can be downloaded per day), so I looked for some sandy/rocky terrain. The beauty of this site is that a lot of images are ready to be tiled immediately, and can be used in free or for-profit projects - they cannot, however, be used in Open Source projects, so that's something to keep in mind.

There's some great rocky terrain to choose from on cgtextures (and to be honest I can't even find the one I originally used for Martian Democracy), but if you have an image that you want to make tile seamlessly, an easy trick in either GIMP or PS to create a tiled background is too create a new blank canvas four times the size of your image (so below I've created a blank 256x256 canvas for my 128x128 image)

Copy or move your selection to the new image, then Duplicate it, flip the duplicate image vertically and move it down, duplicate it and the original, flip them horizontally and move them to the right.

You now have an image that will tile seamlessly. You should now resize it to the power of 2 if it isn't already (not always necessary, but let's call it a best practice). Also - randomize the interior a little bit, either by painting over it or using the Clone Stamp tool, just to make it look not quite as uniform.

Alternately, you can just take an image in GIMP, choose Filters - Map - Make Seamless, and your image will instantly be made Tileable (not a real word, according to Spellcheck - but then again, Spellcheck isn't a real word, according to my Spellcheck). The only drawback to this method is that your tile will be changed in ways you may not want, but it can be a quick and convenient option.

So here we have the main character on its background (once I changed the tiled background to red):

Anyone wishing to play Martian Democracy can find it in the Scirra Arcade (my game has 'violence' - about as much as Space Invaders... - in it, so you need a free account to play it).

  • 0 Comments

Want to leave a comment? Login or Register an account!