Bring your game characters to life with microtweens

In most cases, if you are an one-man game studio, you work with a small budget. This means, unless you are really good at drawing, you’ll probably end up buying your graphic assets on sites like Creative Market or Graphic River.

Once you bought your graphic assets, you’ll often find yourself with an Adobe Illustrator file of a static image, like in this case, when I bought these RPG characters from Creative Market:

Sorry for the watermark but you know, they are part of my upcoming game and I only have the license to use them for the game. Anyway, although I am just using them as a portrait avatar for my RPG, I did not want them to be static, so I got the Illustrator file (actually, I had to convert the EPS file into an AI file thanks to Convertio) and I saved into three PNG file the head, the body and the arm of each character.

Then I added a little tween to head and arm, this way:

Ok, it’s raw code with almost no sense, but at least it helps you to see how I manage character head, body and arm.

And this is the final result:

Much better now, I think. And if you think it’s a cheap solution, think Sonny game does not even animate its characters – but uses a camera shake, we’ll see it in an upcoming post – and still looks good.

How do you add life to your characters?

  • donkey

    I would love to see your next game!
    Great Job!

    • Emanuele Feronato

      Give me a week and you’ll see it!

  • Richnou

    Hello

    Nice idea to create microtweens, it is very “fluid”, but maybe “static”.

    I have try an other approach: a sprite width child (head, eyes, mouth…) each of child have an animation

    function monsterConstructor(monsterID, x, y) {
    var monster = game.add.sprite(x, y, monsterID);
    monster.animations.add(‘anim’, [0,1,2,3], 10, true);
    monster.animations.play(‘anim’);
    //
    // monster’s eyes
    monsterEyes = monster.addChild(game.make.sprite(0, 10, ‘auto-eyes’));
    monsterEyes.animations.add(‘anim’, [0,1,2,3], 10, true);
    monsterEyes.animations.play(‘anim’);
    // etc.
    //
    return monster ;
    }

    Of course lot of (mini) pictures, but (maybe) less calculation…

    • Emanuele Feronato

      Nice idea, I’ll have a try and post some experiments

  • Chris Raymond

    Curious to know why you needed to convert to AI to pull out parts of the character?

    • Emanuele Feronato

      I had them as a non layered EPS file.