Tuesday, August 30, 2016

Drawing large 2D sidescroller level terrain


I'm a relatively good programmer but now that it comes to add some basic levels to my 2D game I'm kinda stuck.


What I want to do: An acceptable, large (8000 * 1000 pixels) "green hills" test level for my game.



  • What is the best way for me to do this?



It doesn't have to look great, it just shouldn't look like it was made in MS paint with the line and paint bucket tool.


Basically it should just mud with grass on top of it, shaped in some form of hills.


But how should I draw it, I can't just take out the pencil tool and start drawing it pixel per pixel, can I?



Answer



Photoshop has layer-effects which can be used to draw good looking levels really fast. I don't know if that would work with GIMP, but here are some steps how to get something on screen fast using Photoshop:


Instructions



  1. Get some dirt and grass textures. The one I'm using in my example are from this freetexture set.

  2. Open a dirt texture in Photoshop. Select all Ctrl-A and copy Ctrl-C. Then select Edit > Define Pattern... from the Menu. Name your Pattern "Dirt".


  3. Do the same for the Grass texture, name it "Grass".

  4. Create a new Layer in Photoshop and apply the Pattern Overlay and Stroke Effect to your layer. Select the "Dirt" pattern for the overlay and the "Grass" pattern for your Stroke (see images below).

  5. Paint with any brush on your layer... instead of having a boring single color, it should render as a landscape, thanks to the layer effects. The beauty of this is, that you can freely add/remove parts of your landscape by using regular drawing tools like the brush or eraser.

  6. (optional) Draw a gradient from dark blue (top) to light blue (bottom) on the background layer for your sky (you could also use layer-effects for that).

  7. (optional) Add some more layer-effects like a gradient and drop-shadow to your "landscape" layer in order to achieve a better look.


Images


Pattern Overlay settings


Photoshop pattern overlay settings


Stroke settings



Photoshop stroke settings


Final result


With some more layer effects and a background.


final image


You can also download the PSD file here to have a look at it.


No comments:

Post a Comment

Simple past, Present perfect Past perfect

Can you tell me which form of the following sentences is the correct one please? Imagine two friends discussing the gym... I was in a good s...