"Life is too short to make bad art."

Wednesday, May 16, 2012

Wooden Platforms - putting the wood into action

It's been a while and I decided to get back into the tutorials with a request for wooden platforms as used in the wood material tutorial:



http://2dgameartforprogrammers.blogspot.com.au/2011/11/making-materials-wood.html


A lot of this tutorial is repeated here in a slightly less detailed way - you might want to reread the older tutorials if you run into problems.


Note:

If you work with bitmap output in mind I would suggest creating the platform as a bitmap first. This way you have the proper dimensions to work with. Import the bitmap and create the starting rectangle to match. 



One platform for everything might work - but adding variations to your games art greatly enriches the look and feel. 

I hope this was helpful and you enjoyed it as much as I did writing again.


Get the source art (svg file) of this tutorial for
USD 5.00

Sunday, May 6, 2012

Still alive...

Sorry about the long break between posts... I am in the middle of some turmoil at the moment and a iOS project blew out of scope artwise and turned from a quick 'couple of days' job into a full blown production. With the end of in sight more tutorials will be coming as soon I got my feet back on the ground. ;) 



Sunday, April 8, 2012

Happy Easter!

I hope you are all having a great Easter. 

I surely did (even while working through most of a perfectly sunny day). As usual working made me think of great topics for the next tutorials... 

Once I am over the current mountain of work I have another 4 tutorials to write - just to put some fun into the mix. I wonder why work can't  be a nice steady flow than dry spells and monsters waves - well... I guess it's just a freelancer's life ;)

Enjoy your day! I am going to call it a night... :) 

Monday, April 2, 2012

Top down view - Soldier

I am jumping wildly from iso to shading and now to a top down view. I apologize for the lack of order in the tutorial posts at the moment but I just felt like writing this one after creating the art for a request. 


Top down characters - there really is not that much to see when you look straight down on a character. You see the top of the head, the shoulders, a bit of the legs and the arms when they move. 




One way to show what the shape really represents is by adding a nice long shadow of the shape - which works well in 3D engines but it a proper pain to reproduce in 2D as the shadow needs to move with the character. 


Alternatively you can add more detail to describe the parts better and make them recognizable. 

In the case of the top down soldier it's going to be a matter of creating a helmet that is visibly a helmet, show parts of the gun he's carrying and give him a pose that connects the gun to helmet in a believable way (e.g. a rifle standing out to in the centre of the figure is not really believable as it would ram into his stomach). 


When animating the character it's pretty much just down to the feet and the shoulders corresponding to the leg movement - in a more limited way as our soldier holds his gun with both hands which restricts the movement a little.  



As with all the tutorials it's a matter of taking this and playing around with the ideas and create variations. How would a knight in armor look from above or a caveman or a girl with piggy tails?

Note:
I didn't go into great detail on topics covered in earlier tutorial posts (e.g. the manipulation of nodes or the gradients). If you have problems with those please check out the earlier posts on this blog. Thanks!


I hope you enjoyed this tutorial as much as I did creating the art. 


Get the source art (svg file) of this tutorial for
USD 5.00

Tuesday, March 13, 2012

Basic shading - the ball

This has to be one of the most requested tutorials has to be on shading. How do you do it? Why do it? Where do I add shadows and what colours do I use? Lighting is vast area and the possibilities are shear endless. In this tutorial I tried to cover the absolute basics with one of the simplest shapes - the ball.
If used correctly light and shadow will make your scene / object look a lot more spectacular, real and visually appealing. 

Let's start with a circle - I know this must be the 100s time I have written those words - but it's still the easiest object to work from.


The result is not realistic and not overly cartoon like. If you aim for the latter cell shading with 2 to 4 colours will do the trick. To get the ball to look more realistic the highlight elements would require more work - and a Google image search for something like Christmas decoration. 

Let's take a quick look at the effect of changing light on our ball.


As the ball gets closer to the light source the effect of the light should be stronger - lighter highlights and darker shadows with the effect of the secondary light source less visible. 

One question I have been asked a lot concerns the choice of colours. The very basic shading would be by simply using white for the highlights and black for the shadows. In my opinion the result usually looks dead and cold. I prefer warmer light and my favorite shadow colours are dark purple or dark brown (with adjusted alpha). That way you get warmer tones and more lively colours. 

Then again the scene you are trying to influences  the colours of your light and shadows. E.g. an underwater scene would look very odd with brown or red shadows - you would choose a white/ blue/ green colour-scheme. A summer afternoon would have a light yellow/ gold/ dark brown or deep red palette - while a winter's day would have white/ blueish grey and black. 

Here are a few examples of the effect colours have on the shading of an object. 


In the end it's a matter of playing around, finding the right light to set the mood for your scene and then stick to it for all the objects in your scene. Have fun with it! Try to find something that enhances the mood and the atmosphere you are after and don't be afraid to try 'odd' colour combinations.

Note:
If you create game assets keep changes to the scene in mind. To avoid having to create dynamic lighting - which looks awesome but is a lot of work on the coding as well as the art creation side of things - I would suggest sticking to a standard light setting (e.g. top down - that way flipping a character horizontally to walk in the opposite direction does not mean creating new assets to keep the scene looking consistent). It can also be very helpful to separate the shadows form the objects for allow jumps and walking on non-horizontal surfaces to look right.  

I hope this was helpful so far and I plan to add to this tutorial in future with some more advanced objects and more complex shapes. Enjoy!

Get the source art (svg file) of this tutorial for
USD 3.00

Thursday, March 8, 2012

I want you...





After five month of having fun with these tutorials the reality of life is slowly catching up with me - geee... I loved my little castle in the sky... 

I decided to offer the source art of the tutorials for a very small contribution to my monthly bills. 

There are the single tutorial art files for USD 3.00 or USD 5.00 for the more complex tutorials and also a bundle of all tutorial art (which will either be variable as the amount of art will increase as I continue writing the tutorials or put into 6 monthly packs). 


Note:
You can use the art for any hobby or commercial game as long as you don't sell the art by itself or bundled. Enjoy!

Wednesday, February 29, 2012

Building isometric art in vectors - step 1

I have had a few request to do something isometric - usually the requests cover characters and animation or more complex elements like buildings. As usual I am trying to start a little easier to ease the learning curve and create a simple isometric grass block (how boring of me ;) )... but... the next tutorial is already in the making and I find isometric art a lot of fun - well more fun now than back in the old days when I had to pixel them in 16x16 blocks with a handful of colours and still make them look good...

Anyway... What is isometric art? 
According to wikipedia isometric projection is: 'Isometric projection is a method for visually representing three-dimensional objects in two dimensions in technical and engineering drawings. It is an axonometric projection in which the three coordinate axes appear equally foreshortened and the angles between any two of them are 120 degrees.'

Now that's a mouthful... and please... don't ask me to explain it.... I just use it...  ;) Basically it's an attempt to fake a three dimensional feel in 2D by rotating the ground 45 degrees and ignoring the perspective scaling (objects do not get smaller when they are further away). 

Let's get started with some basic steps into isometric projection. This is close to 'true isometric' but not quite there - but a lot easier to handle artwise. 

Note:
With different game engines you might encounter slightly different proportions as far as the vertical scaling goes... but the process of creating the elements would be very similar.


 
For my little scene I added a quick tree - with a couple of circles (keeping the 1/2 deformation ratio in mind)  and some simple rocks based on the same circles - and it's already starting to look like something you would expect to see in a game. 

The main problem you will encounter when creating whole scenarios in inkscape based on 'isometric blocks' is the depth sorting. It will only look right if the tiles are stacked properly and the furthest away (top left corner of the screen) are on the bottom of the pile and the closest (front right corner) are on top of the other shapes.

I hope you enjoyed this quick post and it's a start into the creation of isometric tile-sets. I will continue this tutorial with props and buildings next (and yes.. I will do characters and animations as well... ).


Note:
Turning on the snapping in Inkscape makes aligning nodes in step 5 a lot easier. 

Turn on the snapping
View/ Snap (%) to align nodes precisely to others. In the snap button bar there is a button  to 'snap nodes or handles' (7th from the top) and by turning on the sub-function 'snap to cusp nodes' (10th from the top) allows you to snap nodes perfectly. 
In case it's still not as responsive as you would like go to the Inkscape Preferences (Shift+Ctrl+P) and change the weight for the snapping there.


Get the source art (svg file) of this tutorial for
USD 3.00