"Life is too short to make bad art."

Sunday, June 9, 2013

Hacking and Slaying... back into action


It's been way too long since the last post. I am still around and as eager as always to write some hopefully helpful tips on how to create some assets for your game/ illustrations or just for the fun of it. 

One requested tutorial I received was on weapons and how to create something looking decent in inkscape. Due to  the multitude of weapons out there and even more creative variations used in phantasy games and RPGs, I decided to split the request into two or three tutorials and start off with an axe. 


Here's a sample of those two axes scaled down to 64x64 pixels and 32x32 pixels for use e.g. in inventories or equipped to the character. 

      

In the smaller version you can see the limitations of the dimensions. Adding more detail to the axe when the final ingame size is just 32x32 or smaller wouldn't make much sense as you lose most of it when scaling. It also gets harder to read the object as an icon.

Tip:
Keep your output size in mind when creating your vector images. The image might look awesome on your 24" monitor. Yet a lot of the time consuming details added to them might not be visible in the image used in the game. 
It helps to zoom out every now and then and look at the art in a size close to what you will use in your game. 

Let's take the simple hand axe and turn it into something a little fancier. We have the basic blade - a little dull and boring but a good starting point.  



Tip:
For some additional colouring of the blade (e.g. the reddish tint I used on the two blades above) it's easiest to create a duplicate of the blades base shape and give it a coloured tint and then turn it into an alpha gradient. The transparency allows you to shade only certain areas of the blade. 
For the smaller blade I used two of those shapes running from bottom up and another one from top left to lower right. 



When creating a whole set of weapons to allow a character to evolve and update his equipment it's helpful to line up your designs and 'sort' them from the simpler shapes to the more complex and decor rich designs to give the player a sense of upgrading visually.

That's it for now... I will continue this set of tutorials with some rambling about designing swords next. I hope you enjoy this as much as I did writing it. Good luck with your designs. 

15 comments:

  1. Nice to see you back in action, Chris.
    Thank you for this wonderful tutorial. It is like always - a few simple steps leading to an impressive result full of details that breathe life into the shapes.

    Btw.: I made my first steps in Inkscape after reading some of your great tutorials and now I use it for almost everything.

    ReplyDelete
  2. Thaks for the tutorials, they are really helpful !!

    ReplyDelete
  3. It's good to see your tutorials again.

    ReplyDelete
  4. very nice tutorial and good to see you back :D

    ReplyDelete
  5. welcome back and thanks for great tutorials!

    ReplyDelete
  6. Great tutorial, thank you!

    I'm working with Illustrator, and trying to do some detailing on axe like you did, but I find it pretty hard

    ReplyDelete
    Replies
    1. Try and keep your detailing simple. E.g. I used triangles for the shards - duplicated in a lighter and darker version they create the illusion of a dent / shard. The bigger axe has a few elements substracted from the main shape - I keep a copy of the to make to make the wider outline.

      Delete
    2. I tryed halbert but I think I didn't matched details accordingly to the size

      http://i43.tinypic.com/1570u2f.jpg

      Delete
    3. It looks great... and I don't think the level of detail is the problem with the halbert. I find the outline/ shading a little confunsing... I would try and define one lightsource and rework the shading based on that light.

      Delete
  7. Hey. I've been reading your site from the beginning, and it actually got me very interested in art. I tried my hand at making some weapons recently, and here are the results:

    https://dl.dropboxusercontent.com/u/15174088/weapons.png

    Middle, right, and left were the order I made them in. Hopefully you can see them getting more quality and complicated. Latest I made yesterday:

    https://dl.dropboxusercontent.com/u/15174088/newaxe.png

    They can be improved of course, but I'm very happy with them, and they're vastly better than anything I thought I could make. So thanks for your work!

    One thing I'm curious of. When you make your vectors, what do you then animate them in? Because I know you've mentioned animation in the past, like with the character models.

    ReplyDelete
    Replies
    1. Nice work... and yes... the improvement is clearly visible.

      As for the animation of vector illustrations. I try to build the objects that need to be animated in a way that gives me 'joints' and overlaying areas where I need to bend an objects. A lot of the time it's enough to rotate, move and skew these separate objects/ limps to get the animation working.

      Sometimes though it's a matter of tweaking the nodes and curves of a shape to make it look fluid - e.g. a band in the wind or a flame. Here it can be helpful to do the key frames [while trying to keep the number and basic setup of the nodes the same] and then do a blending from one shape to the next to get the inbetween images. These might need some tweaking later but it can be a good help.

      Delete
    2. Thanks!

      I understand what you mean about the joints. But what about for the actual animation process itself? Do you just arrange them on spritesheet frames? Somehow import it to, say.. Flash Professional and work there? Something else?

      Delete
    3. Hi Victor,

      It depends on the project and the quality of animation needed. With smaller/ standard animations like a walk, run or jump for a small ingame character it works fine in inkscape by using layers and grouped objects.
      If it's more complex, larger and longer animations I like to use either CorelDraw [with it's multiple page option] or Flash and in the end export png files for the coders to arrange in spritesheets as they need them.

      Delete
    4. Cool, just what I needed to know. Thanks for this.

      Delete