"Life is too short to make bad art."

Monday, December 31, 2012

Happy New Year and all the Best for 2013







Another year comes to a close and a lot has happened on this blog and off-line. It's been a good year in some respects, an interesting one in others and definitely one I won't forget. 

I didn't write as much as I wanted and I am not sure I will make up for in the new year - but I will try. I am still toying with the idea of putting my ramblings to print and giving you an offline version to work with. 

I wish you all the best for the new year. Keep on creating games and art - but most of all have fun whatever you do! 

Sunday, December 9, 2012

Aligning objects

A simple but very helpful tool that is often overlooked is the 'Align and Distribute'. It's the answer to a question I have been asked a few time 'How do you place your objects precisely in line?'.

The tool can do a lot more than that by aligning not only objects but groups of objects. 

In order to 'kill two birds with one stone' I am going to use and explain the tool while creating a cute animal. What defines cuteness? Cute usually is achieved by more 'child-like' proportions - round shaped heads, big eyes, small nose, small body. Perfect for my favorite start of a tutorial: "Let's create a circle" - well in this case we create three.     



Note:
Users familiar with Adobe Illustrator or CorelDraw for example might ask why I bother with the duplication and rotation when it's already build in. You create one copy, rotate it and the next copy will be a repeated version and you can create the full circle of triangles that way. 
I find this way easier and more controlled when creating evenly spaced content for a circular shape. 

Let's give the lion some facial features. The mouth might like conplexe but really it's just an up-side-down Y and if the deforming of the circle looks too difficult you might try using 3 separate elliptical shapes to create the same effect. 


I added another circle for the body, a deformed circle for the leg and the paw, duplicated them 3 times to create the legs and added a line with a deformed circle with a pointy edge for the tail. A simple (and in my opinion cute) little lion. 

With a little bit more detail (eyelids and eyebrows) it's easy to give the lion some features and create some variations.



Variations don't stop there. Taking the basic shapes, rearranging them and changing the colours you have a whole zoo at your fingertips.




I hope you enjoyed the tutorial and start playing around with the tools inkscape (and other vector tools) have to offer to create some magic. 




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

Alive and snowed under...

It's been a while and I haven't posted for a lot longer than I realized. I missed a major spike in traffic when a news site picked up the helicopter tutorial and barely kept up with the comments due to health problems, too much work, too much fun, too much happening in the real life and I am sure I can find another lot of excuses why I haven't written a new tutorial for a while... but... they will keep coming... I haven't given up on the never-ending quest for better 2D game art. :) 

For now I am snowed under in the true sense of the word. I woke up to a white world outside my window. It started yesterday with a little bit of a white cover but this morning I woke up to 5 cm of snow on my balcony and a good 15 cm (plus) outside. I know - that's nothing for you guys in Canada or other 'polar' regions - but way more than enough for me.

I made my way through perfectly white and fluffy snow (for the 2 minute 'polar expedition' from my flat to the office) for a cup of coffee.

A horrid time to run out of coffee at my place - and it keeps on snowing... 

Thursday, September 27, 2012

Things you find on the internet...

I check the blog statistics every now and then (not often enough if I wanted to manage this blog more professionally - but hey... I am an artist at the core not a blogger)... but... there was a referring site that looked strange. I followed the link: 

http://gamerboom.com/archives/60814

and found this:

Someone took the time and effort to translate all my gamasutra blog posts to chines - taking out my text from the images and putting new text in. 

I don't speak any chinese so I can't say if they did a good job or not - one thing is for sure - they do a quick job. The tutorials appear on their site a day later... and they have been doing it right from the start.

The do mention me as the author - so... thanks GAMERBOOM.com for the extra exposure. :)



Wednesday, September 19, 2012

Apache Helicopter - modifications

In the last post I mentioned that it's fairly easy to modify the basics and create variations once you have the core shape down. 

So as requested by some here is a modification tutorial bringing the Apache more in line with the helicopter used in the HeliAttack3 screengrab at the top of the last post. 

Instead of the usual start with a simple shape I take the helicopter from the last tutorial.

Note:
You can download it for free at the bottom of the post.




Note:
Keep the guns and missiles separated when exporting your art. Add them as separate objects attached the the base shape in your game engine to allow flexible use (e.g. firing and rotation for aiming). 




Here are the two helicopters side by side in the scaled down size.


I hope this shed some light on how quickly you can reuse and modify vector elements and create new assets for you game or illustration needs from existing images.



As promised another free bit of art to make up for the long time between posts. Enjoy!

Get the source art (svg file) of this tutorial for
FREE
Download inkscape SVG file in ZIP archive

Monday, September 17, 2012

Apache Helicopter

Here's something close to my heart. Ever since doing the art for HeliAttack 2 and 3 back in 2003 and 2005 I fell in love with helicopters. They just make great game assets. 

Back then it was all pixeled and took what seemed like forever to create. In the game there were a few helicopters with limited variations. 

Creating a similar object in vectors allows for easier manipulation and variations. It also makes animations a lot easier and more flexible. 




This tutorial looks a little bit more complex than the previous posts - but I tried to break it down into easy steps and simple shapes. I hope it worked. 

Note:
As with all the tutorials prior I use squares and circles and deform them rather then 'hand-draw' the shapes. With the body of the Apache-style helicopter it might be easier to 'just draw' the shape with the straight lines tool rather than place squares and modify them later - but it takes a little more skill to get the shape right that way.  





Note:
Now you have a basic and recognizable helicopter. It's a good point to save and continue with a new file to give you a base shape to go back to when creating variations.


The next step is adding details (guns, missiles, rocket launchers, etc.) and then add depth to the helicopter by adding some highlights and shadows.


I use basic shapes in light and dark colours - in this case white and black - with transparency to shade the object. This allows for easy changes to the base colour (e.g. an army green or a bright red for an enemy object) without having to redo the shading. 

Note:
If you want softer shadows and lights use a more yellowish tone for the highlight and a dark brown or dark purple for the shadows. 



Here's a version scaled down  

to something resembling an 

iphone (lo-res) ingame size: 


I hope the complexity of helicopter didn't scare you off and you enjoyed the tutorial. In the end it's just another bunch of simple shapes combined to form something bigger. 




As promised another free bit of art to make up for the long time between posts. Enjoy!

Get the source art (svg file) of this tutorial for
FREE
Download inkscape SVG file in ZIP archive

Emotional Explosives...


This tutorial started out with some illustration request and I got a little carried away with the facial expressions I could add to a simple bomb. I thought I might just share the fun and turn it into a tutorial.

Like most of my tutorials this one starts with basic shapes - circles and squares and simple lines. If you are new to the tutorials it might be helpful to read from the beginning. Even though they are not in a special order some of the skills used here have been explained in a more detailed way in earlier posts. 


With the basic elements in place it's a matter of working out the expressions you are after... Adding different mouth shapes, squinting or enlarging the eyes.

Note: 
I will add a page or two with the facial expressions here soon. For now I want to finish another tutorial I have been dying to complete first - a cartoony helicopter to take me back to one of my favorite jobs (doing the (pixel) art of HeliAttack 3 in 2005).  

I hope you enjoyed this as much as I did - and believe me I really missed doing tutorial art and writing these little posts. 



Get the art (png files) of this tutorial for
FREE

As a special treat to make up for the long time between tutorials I uploaded the explosives as PNG-images in 256x256, 128x128, 96x96 and 64x64 pixels to be used freely in your projects. 

Sunday, September 16, 2012

Still alive and kicking...

After a long time without posts [due to all sorts of issues but mainly due to lack of piece and quiet] I finally get to sit down and write some new tutorials and reply to questions and requests.

To make up for it I will start off with some free stuff:

First of all 'Wild Surf - Paradise Island' is free for iOS now:
http://itunes.apple.com/us/app/wild-surf-paradise-island/id521631290?mt=8

Friday, June 29, 2012

And here it is...

Next to summer, soccer and relocation pains and aches here is one of the main reason for the lack of new tutorials lately:
Wild Surf - a mobile devices game that started as a 'quick one day job' and turned into a full blown game development and a lot of fun creating the art.

"You are a few taps away from your next dream vacation. It's an endless summer here in Paradise Island with year-round sun and great surf everyday. Grab your favorite surfboard and catch some waves. Just be sure to avoid the hungry sharks on your ride into surfing heaven.

It's the best fun you had on the beach without getting sand on your device. Collect shells as you surf to spend in Joe's shop on new surfers, boards and power ups. If you don't like shopping, why not try your luck in the Surf Arcade and try to win power up and bonuses? Just watch out for these nasty seagulls, they are always after your shells."



We hope you will enjoy the game, join us on Facebook for in game giveaways, secret codes and tips.

Game is available on iTunes: http://itunes.apple.com/app/wild-surf/id521631290?mt=8
Google Play: https://play.google.com/store/apps/details?id=com.eatingmyhat.wildsur.

Coming Soon to Amazon.

I hope you enjoy the game as much as I did doing the art for it.

Artist Monolog IV

Day 34
Five weeks and he is still around… I figured that the only way out of it was to have a look at what he wanted me to do. I even tried to convince myself that for sure it wasn’t that bad and I could get away with some basic art suggestions (“use red”). Again, I was wrong, what I saw was something like that…

image

image 
 
Day 35
I couldn’t sleep that night (he was under my windows all night asking “so how was it?”, “did you like it?”, “cool ha?”, “told you it is cool”, “call me?”, “I’m sure he liked it”).

Terrible as it was, something did click. I don’t know if it was the challenge, a mental breakdown or compassion for a lost soul (and hair) – but I decided to make a couple of images… and than a couple more, with a one or two additions; and a few hundred images later we finally had Wild Surf.

image


 
In order to satisfy the most likely request 'more babes on the beach' here's one of the ingame comics:

image

Tuesday, June 26, 2012

PayPal Pains...

It was just a matter of time before it happened. I had a long conversation with my friends at deep blue apps (where I am illustrating a lot of the templates) and they had a whole avalanche of paypal disputes. Even my knocking on wood didn't help and today I had my first dispute on a BlockBuddies bundle - strange enough by a customer heavily shopping at deep blue apps as well (and disputing those purchases as well).


You don't get any information from paypal as to why the order has been disputed, so at first I thought ok... there is a kid shopping around with grandma's credit card. I was willing to just let it go and take the hit. After finding out there is a lot more purchases at deep blue apps I kind of changed my attitude.


It might be a sign of the times that everything is considered to be free and when you have a way to 'trick' someone out of his pay you should do so. The main flaw in this logic is the fact that things like this turn me off doing more art and tutorials. Why bother with something that makes me a little bit of pocket money (not talking about the fun I have doing it - but I would have that as well if I wouldn't publish them in this blog)? I might as well sit back and enjoy the summer, sun and pool.


Thanks to all who are supporting me and help me keep the faith in humanity and shame on those who think that it's ok to rip me off just because they can.


Sorry about this rant. I just had to let of some steam.  

Thursday, June 14, 2012

Artist's Monolog... III

Day 16
Still on the beach, still being hunted by the same dude. I got to admit, he tried every trick in the book to get me interested, showing off his skills. Most days it ended miserably, but from time to time he did managed to have a valid point.


Artist's Monolog... II

Day 2 
Who would have thought? A developer? On the beach? On top of it, it seems that I couldn’t shake this guy off, everywhere I went he soon followed. I tried to push him off gently (and not so gently), but it seems to create an opposite reaction and his demands were only getting more annoying and fairly personal.



Tuesday, June 12, 2012

Artist's Monolog...

Day 96
I can’t put my finger on the exact time that it happened, but did it ever happened to you that you start a discussion on top and before you know it, you hit rock bottom? Well, it happened to me… It is not clear when the discussions went from:

EMH: Please do my art
SE: Nope
EMH: Please?
SE: No
EMH: Please!
SE: Na
EMH: Please!?
SE: Noooo!
EMH: Please.
SE: No!
EMH: Please?
SE: Ok
EMH: Thank You! Thank You! Thank You! Thank You!

To…

SE: I worked all night on this one, what do you think?
EMH: Sloppy. It is one pixel short, odd size, eyebrow is wrong color and frankly a bit spooky.
SE: I’m sorry, let me try again…
SE: This one?
EMH: Eyes should be half way; hand is looking weird and who told you to add a hat?
SE: Sorry

I decided to see if the community could help me understand how things got to this point. To do that I’ll need to take you 3 months back to a sunny day somewhere in Australia.


Day 1
I always saw it as a compliment that many developers approached me about doing art for their games. However, after getting so many daily emails wanting art I just had to take a break and refuel. So I took my surfboard and went to the one place that I could find peace, the beach – or so I thought.

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

buy

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

buy

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

buy

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.
Note:
Here's a more detailed step by step for creating the sides of the initial cube. 





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

buy