Talking about Game development, HTML5, Javascript and Phaser.
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:
placeKnight:function(){
this.knightGroup = game.add.group();
this.knightGroup.x = 300;
this.knightGroup.y = game.height / 3;
var head = game.add.sprite(35, -107, "knighthead");
head.anchor.set(0, 1);
var arm = game.add.sprite(90, -45, "knightarm");
arm.anchor.set(0, 0.5)
var body = game.add.sprite(0, 0, "knightbody");
body.anchor.set(0, 1);
this.knightGroup.add(arm);
this.knightGroup.add(body);
this.knightGroup.add(head);
var armTween = game.add.tween(arm).to({
angle: 15
}, 1400, Phaser.Easing.Linear.None, true, 0, -1, true);
var headTween = game.add.tween(head).to({
angle: 7
}, 1400, Phaser.Easing.Linear.None, true, 0, -1, true);
}
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? Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.