"Life is too short to make bad art."

Wednesday, January 21, 2015

WTF is GameSalad thinking...

Here I was working on templates to start the year with some new posts after a not so good end to 2014, a nice holiday season offline and trip to the snow, that was totally unlike me, when a friend pointed me to the Amazon store. 

Some of the games I have been working on over the years with friends in the UK and US were listed on Amazon for the the kindle fire. All free and all without the developers' knowledge.
It turned out that the game engine creator at GameSalad decided to put all games (nearly 800 apps) from their online html5 games showcase and competitions onto Amazon.

Neither of the developers I worked with knew about the deal or the fact that the game was on the store for free, while their own version of the game might as well be up with a price tag attached. 

I have had art stolen, games ripped and redistributed, publishers leaking beta versions before release and endless deals going south but this one even surprised me. How can a game engine creator abuse trust in such a blunt way? Aren't they relying on the community to make games and promote their tool by delivering standout applications? Isn't a game engine only as good as it's popular games to promote it? 

It's been put off as a 'minor mistake' on the side of GameSalad. Well... they have lost my trust for sure now and I had the pleasure of working on some of the featured games with some of the best GameSalad coders. Shame on you, GameSalad!

Anyway... I wish all of you following my ramblings a happy new year and all the best for 2015!

Monday, September 15, 2014

Top down - extras 2 - tank

Here are some requested addition to the top down view tutorial.

A nice big tank with a separated turret. Just make sure you adjust the shadows - as they are created for this view only. 

The objects are also separated into two PNG files. 


download the ZIP

Saturday, September 13, 2014

Rocks - quick and easy

Another quick tutorial while I am still reworking the space tutorial. This one is another request - how to create rocks, that don't look like clouds. 

The common mistake when creating shading is using 'pillow shading', where the shading is same in all directions, same amount of darkness and distance to the edge. It will look smooth but unbelievable for anything harder and more edgy than clouds or pillows. 

In this tutorial I use three different styles of shading:
- shading through interpolation, 
- shading with lighter and darker shapes [cartoon shading] and
- shading using transparent gradients

I forgot to use the easiest of all for the rounded rock, which would be a radial gradient. Gradient shading [linear or radial] can be very effective but tends to look off as soon as the shapes become more complex.

Let's get started with a simple rounded rock, pebble, boulder, whatever you want to call ti. 

For the veins I used the freehand draw tool, with a white stroke that I ended up putting into a clip to match the shape of the pebble.

Another shape commonly used for rocks is a lot more edgy and clear cut. I worked mainly with the straight line tool for this one. You can also start with the square, make it a path and add nodes to it, if you find that approach easier. 

I hope I made enough sense for you to create rocks on your own now and enjoy doing it.

Saturday, September 6, 2014

Treasure - not found but made

Here's a quick tutorial I found unfinished on my hard drive and decided to finally finish and publish - creating a treasure chest.

It's a task most of us, who create game art, face at some stage - the iconic treasure: a chest filled with gold coins. 

Exported to PNG the chest still looks alright in 64x64 pixels or even smaller at 32x32 pixels:


You might want it to look a little less 'square' and what good is a treasure chest when we can't open it.
Let's tackle those issues now. The first one involves the envelope extension and the opening requires some tweaking of nodes. 

The result looks alright at 64x64 pixels but it starting to be cluttered and losing detail in the smaller 32x32 pixel size. I would have to take some elements off to make it cleaner.


I hope you enjoyed this one as much as I did writing it. I actually used similar chests most recently in a puzzle game for a friend. 
Keep playing with the concept, create chests with iron frames, spikes, skulls, holding diamonds and rubies or being plain empty or broken. Enjoy!

Here's the download file:

Wednesday, August 20, 2014

Space Ship - next step: shading

The next step in the creation process is the shading. Let's start giving the silhouette some volume, defining the layers of the ship (which parts are on top of others, which ones cast shadows, which ones get light, etc.).

The interpolate extension is sensitive to the selection of the objects. The first selected images will be below the second image. 

It's a very helpful extension and if you have not used it in the past, this is a good time to start playing with it. 

For the best possible results keep use a duplicate of a shape as your target shape and alter the nodes (without adding new ones or deleting nodes). As long as the two shapes are that similar the interpolate works great. 

If the interpolation starts to go 'round' and 'curves' the lines, make sure you set the interpolation method to 1 in ther interpolate popup.

You can also go wild by interpolating totally different shapes for some rather interesting results. 

The more complex your shapes are the more chaotic the interpolation will turn out. Play with the extension and see what happens. 

Let's head back to our space ship design (before I get off track completely and start writing about something different altogether).

Creating these assets keep in mind that you can reuse elements that look good for other ships later on.

Assembled back into the starting shape it will look something like this but there are lot's of other variations possible with just those 6 shapes.

Now it's up to you to fire up Inkscape, copy, interpolate, shade, break, design and have fun!

Sunday, August 17, 2014

Space Ships - outlook

I couldn't help myself and started playing around with a few of those shapes to see where it can lead when I add some shading, colour and detail. 

Here's one of the ships taken from the tutorial:

It's still vector shapes and you could make it smoother and lose the vector feel by adding softer shading and some dirt and grunge overlay in the bitmap tool - but that's a task for another day.
Once scaled down to a more game friendly size those edges tend to disappear:

Space Ships - starting with the design

Let's get started with the requested tutorial on space and space ships. I have to admit it took me a little longer than expected and half way through writing this tutorial I decided to change the approach as I found myself getting lost in details. 

Rather than putting the focus on the shading, material structure and detailed look of body parts for the space ships, let's start by defining a good shape first. One way to do that is by sticking to the silhouette and just working with black shapes.

This approach is frequently used for all sorts of concept designs from creatures to buildings and even animation poses. A good silhouette makes for a more intersting and recognizable design. 

For the ship design I start out with simple shapes, mainly rectangles that get deformed by moving some of the nodes. 

Usually you would try and build a design that is unique for special group of ships [e.g. a race or fraction] not just a single one. There would be different ships in a fleet which should be identifiable through their design.
Keep certain characteristics e.g. rounded shapes or long wings, extended tails or huge propulsion systems on one side of the ships.

I will take the ship design and add colour, shape and detail in the next tutorial.


I kept the images in a larger size for a change. It might take a little longer to load but you get more detail.