2D Game Art for Programmers

I want you...

2012-03-08T11:39:00.001+10:00

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!

Building isometric art in vectors - step 1

2012-02-29T10:32:00.000+10:00

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

Working with bitmap output in mind

2012-02-23T10:56:00.001+10:00

Here's another request (or a a combination of requests) put into a tutorial. How to create vector art that looks good in a small e.g. 48x48 px size.

One of the advantages of vector graphics is it's lossless scalability. You can easily create an image and scale it up and down without sacrificing the quality. There will be no jagged edges or visible blocks when you increase it's size by a tenfold. It also works nicely the other way round by creating source files that can be used for smaller in-game images.

To me it's a lot easier to create a few circles and boxes than to pixel a character from scratch. It can then be animated in inkscape and exported to bitmap and worked on with a bitmap tool (e.g. gimp) afterwards.

I like to work with files 2x the output image for a slightly larger work area - and because I find the scaling algorithms work better in bitmap tools then exporting straight to the small size in inkscape.

The main elements are there and it's time to check what our little character will look like in its small in-game size. I primarily want to check if the outlines will still work in 48x48 or if they become too thin to be readable or are just too big and overwhelm the character.

Now we have our character and it's exported to a bitmap file.

Note:
I skipped the adding of more detail (e.g. the shadow line of the hair (which is basically just a copy of the hair shape without the stroke and coloured in a 50% alpha dark violet) and the highlight in the hair (which is a quick squiggle with the freehand lines tool).

You should have something like this: a 96x96 px image with a transparent background and the little guy in his full glory. Thanks to the antialiasing it doesn't look much different from our vector shape.

Now we open the file in the bitmap tool (e.g. gimp).

In gimp we reduce the size via 'Image/ Scale Image' to 48x48 and should get something like this. It still has the antialiasing which rounds of the edges and smoothes the steps.

If you are after a more pixelated look I suggest reducing the colours (e.g. to just 16 colours) and manually touch up the image, removing AA outlines and redrawing the outer lines to be even.

This would be a topic for a whole new tutorial - and I will add it to my todo list. For now I hope you enjoyed this tutorial and keep creative with inkscape.

Note:

Some engines (especially for the iOS and android require set dpi (dots per inch or x and y resolution). I find it hard to adjust my art properly in inkscape to export to the right dpi straight away. Instead I change the dpi in the bitmap tool whenever needed. In gimp it's done in the 'Scale image' tool. You can set the x resolution and y resolution (e.g. to 72 dp[i for iOS applications) when scaling down.

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

USD 3.00

Creating a brick building

2012-02-21T15:56:00.002+10:00

This is a tutorial requested by one of the readers on how to create a building made of brick. In order to clarify what he meant I quickly created this one and wrote up the tutorial to explain the steps.

There are a few problem when adding pattern added to a shape. You have to make sure it's seamless (it tiles properly horizontally and vertically). You have to make sure it scales well with your object (too much detail might be lost in a smaller view and too little detail will look boring) and you need to make sure it matches the illustration style (a bitmap photo in a vector illustration might cause serious inconsistency in the look and feel).

This is a brick building. We all recognize the pattern but it looks boring because the blocks are too big and too even. It's also not the best design for a house.

Let's get started with a bunch of rectangles and build a more interesting looking house and then add the nicer brick pattern to it.

So... We got a simple yet decent looking house...

put into a row with varying colours it looks rather nice. It's open to a lot of designs now (e.g. you could add wood boards as a pattern and place it in Scandinavia.).

For now we are after bricks so let's add some pattern.

When creating a pattern always try and look at the larger project rather than the one element you are working on. Will you need to reuse the pattern? Will there be colour variations? Do I need to make it scalable? You can save a lot of time and repetitive work if you keep those questions in mind. Work with e.g. transparent elements for shaders rather than tinted variation of the base colour or convert your lines into paths to allow for a proper scaling.

I hope you enjoyed the tutorial as much as I did creating it. Have a great day and keep your creativity flowing.

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

USD 3.00

Creating a character with outlines

2012-02-17T14:28:00.004+10:00

Here's one request I have read a few times now: 'How do you make a character with outlines?'. It's not much different from any other character creations you just add a little more difficulty and a few problems to work around.

The main problems I see with a lot illustrations using outlines are: a) the inconsistent line weight (different thickness of the stroke for different elements on the screen). It's a little more complicated and takes some thought to design the screen balanced. My advice is to keep it either keep it all at the same thickness or use a thicker brush for all the focus elements (eg. characters, logo, UI elements) and create the background with a thinner stroke. b) the colouring of stroke vs. the colour of the shape. c) the line weight does not correspond with the illustration. You might have noticed it in comic books, illustrations or animated cartoons - the stroke is not consistent in thickness. It starts thinner, goes thick and ends thin again giving it more of a brush feeling. If it's done right it really enhances the image but it's a time-consuming art. Simply using tools in Adobe Illustrator or Corel Draw to create dynamic brushes usual ends up looking wrong.

All those problems aside. Let's start with something simple.In this tutorial we will do a little piglet with a plain black stroke that stays consistent throughout the elements. In one of the next tutorials I will cover more complex and modified outlines.

The last two steps show one of the main problems with outlines - the overlapping of elements creates lines we don't want to see. You could just combine the snout and the head. Simply making it one object would result in problems animating it afterwards. This becomes even more visible in arms and legs. I prefer just adding shapes to cover those overlaps.

The tail might not the usual corkscrew design you see in a lot of pig illustrations - it was one of those cases of thinking you know how it looks versus the way it looks. In the end I checked on Google images [the best invention since sliced bread] and had a look at real piglets and found this cute little tail more appropriate.

And the last step - I forgot to add it to the tutorial pages - (remember I am fresh off the vacation) is a cover shape for the legs to join them with the body.

I hope you enjoyed this tutorial. Get out inkscape and start creating!

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

USD 3.00

Vacation is over!

2012-02-17T13:56:00.003+10:00

I am back from the vacation and glad to be home. The two week cruise to NZ is over, the suitcase unpacked and it's time to post.

Besides doing nothing, eating too much good food and sleeping 2x as much as usual, I used the time on the ship to draw and sketch on my iPad and I might just do the odd tutorial on how to get the most out of the drawing tools available.

After two weeks of not having computers or internet [ship's internet was painfully slow and overpriced to the point of being ridiculous] it's good to be back...

All refreshed, recharged and ready to roll I will try and work through all the requests for tutorials from you guys. :)

Cartoon Cactus

2012-01-19T14:35:00.005+10:00

After a not quite so smooth start into the new year - with health problems [starting to really get annoyed with those] and my work laptop dying on me [thanks to a dead graphics card] - I am finally back in the swing of things and working through the wish list of tutorials I received.

Here's one from Andrea - a cartoon cactus - which happens to be an extra element I created for the BlockBuddies Cowboy Bundle.

I hope this is helpful, Andrea. Enjoy!

Get the source art (svg file) (does not include the BlockBuddies cowboy) of this tutorial for

USD 3.00

Happy New Year

2012-01-01T06:45:00.001+10:00

All the best for the New Year! It's already started here and even though I was not down in Sydney to see the fireworks first hand they still looked amazing on TV. Being the designated driver meant I was restriked to a sip of champagne at midnight and by the time I got home I was to tired and forgot about the nice, cold, German beer in the fridge - on the up side: I am up early to experience a nice and calm first morning of 2012.

I am looking forward to an exiciting year, with a lot of tutorials in the works and your feedback to keep me pushing on and trying to reveal more fun with vectors.

Merry Christmas...

2011-12-24T07:52:00.001+10:00

As usual I am a little late sending out my Christmas emails... I just couldn't decide on a nice design, got carried away with fun projects and now Christmas is here... and I will have to go with the 'naked truth' about my Australian Christmas - it's too hot to wear anything but shorts and t-shirt, way too hot for the roast for lunch, simply too much food (it starts with a brunch this year, a lunch with the family and a dinner (that I am not too sure will happen at all) and in the end a beer [or two :) ] in the pool... I can't wait!

Thanks for all the feedback and praise, the critique and support. Have a great holiday season and all the best for 2012.

Game Assets - BlockBuddies

2011-12-19T15:03:00.002+10:00

Instead of working on the next tutorial I spent the weekend working on some easy to use game assets and am wondering if there is interest for something like it.

So far I have done 16 sets of ~50 frames (each in 4 sizes from S (64x64) to XL (256x256)) covering zombies, cowboys, adventurer, soldiers and the odd blue alien with samurai, ninja, romans and a range of animals in the pipeline.

[Click to get to the character sheets]

The sets sell for USD 15.00 with the bundles (containing 3 characters) selling at USD 37.50 and two character sets going for USD 20.00.

Here's a sample sheet of the Block Buddies Dummy character:

[box (6 frames), kneel, doze, fall flat, ko, big gun [stand and crouch], gun [stand and crouch], flat, flying after a knock, idle, jump, jump high, jump higher, jump joy, jump land, jump far, push, run (8 frames), sit, stab, walk (8 frames)]

Here's the download link for the png files:
https://s3.amazonaws.com/BlockBuddies/Dummy.rar

Back with a BANG!

2011-12-12T15:59:00.001+10:00

I was asked to write a tutorial on explosions, which didn't seem that hard until I started... It's become common practice to use particle effect for most ingame explosions, so doing an explosion by hand was a bit of a challenge.

I stared out with a simple very generic explosion and took it from there, added to it and added some more. Let's start with the first simple explosion.

It's a fairly generic, cartoon style explosion - quick and easy to create [and animate - by scaling the elements and fading to either light or dark as the explosion progresses].

Usually blowing things up leaves more than just a flash of light. Dust and smoke clouds and debris are part of a good explosion. Let's add some of that.

This is still a very cartoony look. Let's try something a little less 'flat' and add some volume to the explosions.

This explosion is a bit more work to animate. You would start with a smaller light centre that would grow and add more circles to it that go darker as they reach the outside. The flash in the centre is just that - a flash - don't keep it on for too long or it will look more like a light source than an explosion. As this explosion dies down the dark circles would go grey and black, shrink and fall apart [either by imploding or falling to the ground].

As this is way too much fun - let's try another one. Similar to the last one but a little more compact, detailed and with some shading.

I hope you enjoy this one as much as I do... It's just too much fun to blow things up in style and I have to stop myself now and try and catch up with work (before writing the next tutorial that's already playing havoc with my imagination).

Have fun and as always let me know how you go with the tutorial.

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

USD 5.00

Time out...

2011-12-05T06:18:00.001+10:00

Just a quick update to the blog - the next couple of tutorials are in the pipeline but won't be up for another few days.

In the midth of house cleaning, gardening, pondering about writing a book and trying to get some work done, my body decided to take a time out and I spent the better part of the weekend in bed totally depleted of energy, reading books, playing with the ipad and just taking it easy... and I have to tell you - I could get used to that... ;)

The Clip Tool - revisited

2011-12-01T09:21:00.001+10:00

I had a few questions about the clip tool - as it's a little bit of a pain in inkscape and not the easiest to handle in Adobe Illustrator either.

I use clipping masks a lot as you can create shading and patterns inside objects qucikly and still keep the shapes - while a path intersection destroys the base shapes.

I made this set of tutorials for Inkscape, Adobe Illustrator and CorelDraw. I prefer the ease of CorelDraw over the other two - with Inkscape lacking some key features to make working with an essential tool like clip masks easy on the user.

Let's take if from the simple shaded ball to something more complex (e.g. a cartoony plane I just did for another tutorial). In order to do the shading on the body (the darker blue part at the bottom of the plane) or the white stripes, you have to create intersecting shapes to cut the white stripes or the lighter body to match the base shape.

It's a lot quicker and easier to create the clip mask and 'throw' a shape in there - even more so when the shapes get more complex (e.g. a floral pattern on wallpaper) - and it allows you to 'undo' the action and release the clip again.

Note:

Doing clips inside clips is not possible in inkscape as far as I know [but I might be wrong]. In order to work around that problem try and use the Path/ Intersection tool to create a shape matching inside a base object.

Note:

Once you have created a clipart you can work with the objects inside the clip art just like any other object in Illustrator (e.g. arrange to bring them to the front or send them back inside the stack of objects in your clipping mask).

Even though things might be a little easier to achieve in the other programs Inkscape allows you to achieve the same results with a little bit of patience and trial and error.

Good luck and enjoy your vector bending.

Note:

The toolbar of CorelDraw and Illustrator might have changed slightly as I am not up to date on either program. I am still using CorelDraw14 and Illustrator CS.

Get the source art (ai, cdr, svg file) of this tutorial for

USD 3.00

Making materials: wood

2011-11-28T20:59:00.001+10:00

Another quick request tutorial [and there will be more incl. animals, weapons and explosions]. This time it's on wood grain and the colours to chose for you wood material.

To get a semi-realistic colourscheme to start with I searched on the world wide web for some reference image and decided on a light wood image that I liked.

Here is a sample of a game I am working on that uses this sort of technique.

Enjoy!

Get the source art (svg file) (not including the art files of the pirate sample) of this tutorial for

USD 3.00

Tank Tutorial

2011-11-27T20:30:00.001+10:00

Here's a quick tutorial on a cute and cartoony tank requested by one of the members on a game development forum.

Note:
When you scale in Inkscape holding SHIFT+CTRL down allows for the ratio of height to width to stay intact - which is rather helpful at times...

Remember to keep moving and overlapping parts separate when exporting to bitmaps - eg. keep the barrel in a separate image file from the body in order to manipulate it via code later on.

Note:

Animate the tank by rotating the wheels and move the tracks along by modifying the nodes of the track shape. Four or five different images of the wheels and tracks should be enough for an animation.

One of the key elements to speedy art creation is reusing elements you have build earlier (e.g. the tanks headlines might look really good on a vintage car as well or the cogs can be part of some clockwork).

Enjoy and keep those vectors bend.

Get the source art (svg file) (includes the cartoony and more realistic tank) of this tutorial for

USD 5.00

Lightning strikes

2011-11-18T21:03:00.001+10:00

I had a request for an electricity effect/ lightning strike and think I found a rather quick and simple way to do it in Inkscape.

With a some additions it turns into a night lightning strike.

If you want to animate these I suggest doing the lines first and altering a copy of the line shape in a new layer [see the animation tutorial for this]. Animate the shape roughly and not too similar. After creating a few variations of the lightning strike start with the conversion to paths.

It's a lot easier to adjust a few nodes on a line than twice that many or more in a shape.

I hope this quick tutorial is helpful to some.

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

USD 3.00

Character Animation...

2011-11-14T20:21:00.001+10:00

I should state that this is just one way of doing animations. It's very similar to old school cut out animations. It's not as fluid as hand drawn animations or 3D work but it's a straight forward and somewhat easy to follow approach. It works quite well with small size sprites.

Creating the [soon to be animated] caveman

It's pretty much the same process used in the tutorial's 3rd part with some added complexity in the facial features.

Note:

I mirrored the limbs in the image above just to show the 'exploded' body setup. There is no need for that when you use the elements in a side on view [both feet should point in the same direction].

Note:
Working with CorelDraw a lot I come to appreciate the multiple page setup of CorelDraw documents. Instead of layering animations you just place them on separate pages and flick through them to check your progress. The program even alows you export the pages in one layered bitmap file keeping layers and pages separated.

Animating:

If you start out animating it's helpful to go with some more basic animations first - there is nothing wrong with the 'mad-kung-fu-360-tiger-meets-dragon-in-mid-air-move' but it might be a little frustrating to start with.

Think simple and create something you can use in your game. This way you keep motivated and focused.

Note:

It's always helpful to check out references, poses, animations and other tutorials. A lot of the reference will show you a simplyfied setup that makes it a little easier than working off memory and your own experiences.

First steps (quite literally)

This is a scaled down version of what the walk cycle looks like:

Note:
This setup will seem very familiar to those of you using Adobe Flash or similar timeline based tools. The groups of object created in inkscape are similar to symbols either as 'movieclips' or 'graphics' used in flash. All you have to do though is animate the bits inbetween which Flash handles for you with 'tweening'.

I hope you enjoyed this addition and it gave you some ideas how to have fun with vectors.

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

USD 5.00

Creating more characters...

2011-11-14T09:13:00.001+10:00

I am still working on the animation tutorial but thought I post some characters that happened on the side while creating the tutorial...

Cracking up

2011-11-04T18:14:00.000+10:00

Here's a quick post on how to create the crack in the office window tutorial. It's basically a quick use of the straight line and bezier curve tool and some moving around of nodes.

Note:

Combining the spiky shapes (Path/ Union) cleans it up a little bit more - as you won't see the overlaps. Keep in mind to combine two objects at a time in inkscape.

I hope this quick tutorial explains the creation of the crack well enough.

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

USD 1.00

Creating a basic face

2011-11-04T08:40:00.000+10:00

Taking the last post a little further this tutorial will feature a basic face by using mainly circles (again), some more advanced straight line tool and the node modifier.

With the inital setup done it's time to play with the shapes and try out some variations.

I hope you enjoyed this addition and it gave you some ideas how to have fun with vectors.

Get the source art (svg file) (does not include the facial variations) of this tutorial for

USD 5.00

More fun with circles

2011-11-01T20:06:00.000+10:00

I just played around with more circles and a different approach to the eyes from the first tutorial... as well as using the bezier curves and straight line tool for some simple shapes.

Variation is the key. You can use the elements to form all sorts of critters.

As always - I hope you enjoy this tutorial and I hope you have more fun with vectors...

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

USD 3.00

Creating a game character

2011-10-28T07:15:00.000+10:00

Let's get started on a simple 2D character. There are a lot of resources and tutorial out there on character creation and animation - most of which written by and for artists and animators. I will try and break in down to simple elements and easy to follow steps.

Note:
Some of the techniques used in this tutorial have been covered in earlier post. They should help you working your way through this a little bit more complex tutorial.

It's time to start getting creative. Building a character from scratch we start with the head and create the body and limbs before assembling the elements into the final figure.

Note:

When working from a sketch, scribble or concept drawing it's helpful to import the bitmap image into a new layer at the bottom of your stack and work on top (Layer/ Add Layer or SHIFT+CTRL+N). Bring up the Layers (SHIFT+CTRL+N), select the sketch layer and import the bitmap. Lock the layer and select the work layer (e.g. Layer 1).

In order to make it easier to animate the character later grouping elements and assigning better pivot points is really helpful. Rather than turn an object like an arm at it's centre it makes more sense to turn it at the shoulder. In order to do that, select objects that 'belong' together and move the pivot points.

This concludes the creation process. Now it's time to go in and play with the shapes, create some variations and make the most of the objects we have created so far.

I hope you enjoyed the tutorial so far. Have fun with vectors and stay tuned for the next post 'Taking on animation in inkscape'.

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

USD 5.00(only includes the main character created in the tutorial plus the 'king scene')

Quick tutorial on the stamp shape

2011-10-22T19:16:00.000+10:00

During the beach tutorial I created stamp border for the illustration. Here is the step-by-step on how to get there.

Note:

The reason for ungrouping and combining the circles first lies in the restriction in Inkscape to only do a Union, Difference, Intersection, Exclusion or Division between two objects.

Tools like CorelDraw can do these with a group or even just several selected objects. Try around around a little see how your vector application handles these very handy commands.

Creating a character...

2011-10-20T22:52:00.001+10:00

I was playing around with some shapes for the animation tutorial when the character started to take on a life of it's own...

Office windows... a quick request tutorial

2011-10-20T05:18:00.000+10:00

One request I have is a quick tutorial of a simple, shiny office window for a game tile. All you do is play around with some rectangles, the clip tool and some gradient fills.

I hope this explains it a little bit. Enjoy and keep the requests and feedbacks coming...

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

USD 3.00