Saturday, 12 April 2014

My art - Making of: Skeleton sprite

Inspired by seeing videos of Crusaders of Might and Magic gameplay, a game I liked very much when I played some years ago, I decided to take a chance at making a skeleton sprite (skeletons of various sorts are the main enemies in the game). Since pixel art does not give the kind of realistic results I wanted, and I don't have the talent to do it with 3D animation and rendering, I had the idea to use "compositional sprite creation", as I call it (I probably didn't invent this and it may actually have other names).

After a quick Google Images search, I had the following "building blocks" to build my sprite upon (yes, this violates those images' copyrights, but I don't really care, if I wanted I could do with a liberal-licensed resources site like Wikimedia):

So we have a skeleton (probably from an anatomy book like Netter's Atlas), a sword, a shield and a helmet.

After a hour or so with GIMP I had this:

If you look closely, you can see that the parts that compose the animation are divided into various layers, e.g. leftleg1, leftleg2, leftleg3 are the left leg of the skeleton in the 3 frames of the walking animation.

There are 3 animations in total:

  • Walking animation.
  • Attacking animation.
  • Defending animation.

How did I do the walking animation?
I did the walking animation by changing each leg's size (height) depending on the frame. We perceive smaller objects to be further away and bigger objects to be closer by, so I scaled up and down the legs of the skeleton in a way so that it looks like he's moving one leg to the front while leaving the other behind i.e. taking a step. Look at the scaling of the legs:
And the resulting animation:
How did I do the attacking animation?
To do the attacking animation I had to select the humerus and rotate it around the acromium. Also, I selected the hand bones, radius and ulna and rotated them around the joint with the humerus to make the arm swinging animation more spontaneous. I then duplicated and rotated the sword. To finalize, I added a semitransparent sword slash effect.
To do the slash effect, first I used the free-hand selection to create the shape of the slash, then I created a black-to-white gradient in the direction of the sword's movement, and last I made it semitransparent by using "Color to alpha" in the swordslash layer with the color set as black. The resulting animation can be seen below:
How did I do the defending animation?
The defending animation is very similar to the attack animation, with the only difference that I made the shield a little bigger to make it look like the skeleton bumped the shield in your (the viewer's) direction. See the defending animation below:

I pretend to finish editing this sprite (I still want to correct the saturation a little bit and make ghost, fire and ice versions of the skeleton, and perhaps use it in a game) and then I will release the sprite to and link it here. I hope you have enjoyed this discussion of the techniques.

Thursday, 10 April 2014

My games - Siberian husky sliding puzzle

This is just a small game I programmed quickly as part of a challenge I am creating. Since I had already written the code, I decided to release it as a game separately from said challenge too.

The image I used for this version is from Wikimedia Commons. I also used a sound from

There's not much to be said about this. The code for such a game is rather trivial. Feel free to modify it and/or use it to make other sliding puzzles.

A personal story: trying to upload this game I discovered that not only Dropbox does not support relative URLs, but also that it's public folder functionality is only available to Dropbox Pro users or old free accounts, ipso factum Dropbox sucks. From now on I will host my HTML/Javascript games with a free domain I got from, on which I can also use PHP and some other shit which will be fun.

Click on the image below to play the game.