The main purpose of this website is to support Android indie game developers with tutorials, reviews and promotion of their games. The main difficulty for the developers is not to make the game, but to get exposure. To get it out there. If you find anything useful here, please spread the word. Like my page on Facebook, follow me on Google+ or Twitter. Thank you!

Google+ Facebook Twitter

× close

Wednesday 4 September 2013

Tutorial - Cartoon Tree for 2D Platformer

The image on the left is a tree for winter season of my game, Mr. Dandelion's Adventures.

I know it would be better to use Adobe Illustrator or Inkscape. But I only know how to properly use Photoshop.

I have already created trees for Summer and Autumn levels and they are both almost the same, just with different colours. For winter season, I wanted to create a cartoon coniferous tree. If it's a pine, spruce of fir, I don't know. Something like a big Christmas tree.

Basic shape of trunk

For my game, I create trees 256 pixels wide and 512 pixels tall. Start with creating new image, 256x512, transparent background. Drag a few guides to the middle of the picture just to get a better perspective of the size of the tree (not neccessary).

The easiest way to create the shape is using Pen Tool. Click the icon  or press (P) to activate it. If you don't know, how to use Pen Tool, learn it. It's priceless for cartoon graphics!

Draw a path that has a "trunk" shape. Conifers have thin trunks. Don't worry about the shape too much, just something like you see on the picture on the right. Also it's your game and you can always call it "stylized".

When you create the path, right click on it in the path tab. You have two options: Stroke Path and Fill Path. Create two empty layers. Select first one (on top), then switch to path tab and select Fill Path - this will fill it with foreground color. I used #826665 for the the fill (Gray with a little bit of red). Select the second layer and select Brush Tool (B) and choose 7px wide brush. Click on the brush settings and select minimum diameter 50%. I used #473636 color (brownish). Don't forget to save colours that you are using often to the swatches.

Now switch to Path tab again and right-click on the trunk path. Select Stroke Path and check "Simulate pressure". This is good for us amateur artists without tablets (the thing you use to draw, not Android tablets or iPads...). It will create a stroke that looks like hand-drawn. I select 50% minimum diameter - without that the stroke would start with 0% width.

Trunk features

You can make the trunk to look a bit 3D, give it depth, by selecting Blending Options and turning on the Bevel and Emboss with the following settings. Don't worry about the top and bottom of the trunk, you can hide it simply by moving the whole trunk and the top will be covered by green.

This is how the trunk should look now. Later we move the trunk down and put the green top on it, so the ugly part of 3D-ish feature won't be visible.

Tree top

This is how I create a simple tree top. First make a single level of "branches". Again, use Pen Tool to create a Path.

Use the same trick as with the trunk to stroke the border, use darker green, and fill the path with ligher green to get a single level of the tree top. Then duplicate it three or four times, each time making it maybe 10-20% less wide. Also you can horizontally flip each other level. This is what you should get:

For greater variety, you can create more trees, different sizes, different numbers of tree top levels and change the shades of green. Also for my game, I add a little bit of snow here and there as you can see in the top most picture.

This is it. It should not take you too long to create a tree. I doubt it's that pretty you would really like to use it, but if you want, you can download the full PSD - licensed under WTFPL.
Martin Varga is a Czech software developer who likes pygmy owls (hence Kulíš), running, ramen, travelling and living in foreign countries. He is also known as smartus or sm4 on the internet (read as smartass, but there are too many of them). He currently tries to make games in AndEngine like Mr. Dandelion's Adventures and hangs around a lot at the AndEngine forums.