Thursday, December 26, 2013

Combat HUD & First Animations

Speaking in indie terms, a couple of days of holidays mean another load of work to do. Happily, I've had time to doodle lots of random stuff and crazy concepts, starting by a male version of the Camarilla clans.

First of all, I've tried to keep the same basic color tones as in the female version. Also, I've played a bit more with body size. I'm not totally happy with all clans, so I may rework them later on. For now, there's the Brujah male character, with big shoulders and a black leather jacket, broken jeans and combat boots. Next there's the Gangrel male, with brown long hair, a green hoody, blue baggy trousers and a bumbag. The Malkavian male wears a nazi trenchcoat and a bandana (wtf!?). Also, he has purple hair (it reminds me of Trunks, somehow). The Nosferatu male character wears a BDSM body and goth boots. Then there's the Toreador, with blonde hair and a bordeaux shirt (half open, in a very romantic manner). The Tremere male wears a victorian cape, purple clothes and a top hat. Also, he has some golden magic symbol hanging from his belt. Last but not least, the Ventrue male character wears a classic three piece suit with leather gloves.

Then I realized I have no enemies to fight in the first mockups. We all love Smiling Jack, but he's not a good character to punch, hit and kill during all combat concepts. So I did a bit of research in my videogame archives and found a perfect candidate to be beaten up without mercy: Galsia, from the Streets of Rage saga (aka Bare Knucle). Here's our beat 'em up star incarnated in Streets of Rage 2.

And here's a combat mockup with my pixelated version of Galsia.

OK, back into bussiness. This combat mockup shows how the female Ventrue character chooses Galsia as the target of her shoot attack. First, note that the white square tiles highlight the weapon range. A big arrow points at the selected enemy, which is also highlighted in red. In the top of the screen, we can see the enemy name (Galsia) and his current health. At the bottom of the interface, we have the explicit dice roll indicator showing that if we validate the attack, we will roll 4 dices at difficulty 6. And in corner, we have a number of dots indicating that we have still 3 actions left in this turn (the player has used 1 action).
In the bottom of the combat HUD we have 3 big buttons: walk, punch and shoot. This is where the player chooses which action to perform. How. Let's see an example in the next mockup.

When the player moves the mouse over one of the base actions, all unlocked actions are displayed. Let's say we have all Firearms unlocked. Note that the actions are layed out exactly as in the skill tree to keep the interface consistent for the player. We can choose to perform a killer headshot just by clicking its icon. As simple as that. Also, very tablet-friendly.
And finally, I've had some time to animate. I've started by a simple walk cycle and a shooting animation for the female Ventrue character. They're extremely simple but I think this is a level of detail that I feel very confortable animating. More to come soon!


  1. maybe try adding a bit of head/torso animation, even a little bit could make them look more alive

    1. I'll give it a try, anon. Thanks for the tip :D

  2. Va cogiendo forma! Las primeras animaciones muy chulas. Un poco estáticas, pero puede que quieras justamente esto, que tenga un aire a los juegos de Atari 2600.

    Con el menú de interacción tengo mis dudas. El diseño lo veo correcto, pero veo muchos items. Se que quieres mostrar todas las posibilidades rápidamente, pero no se si es que hay muchas, o haría otro subnivel.

    Va guay Ema!

    1. Gracias, Andrés! Las animaciones intentaré que no queden tan estáticas... pero mi mano de animador es muy muy limitada :P
      Y lo del interfaz tienes razón, metí más acciones de disparo de las que se pueden tener a la vez. Igualmente tengo que trabajar todo el interfaz de combate, así que le daré más vueltas cuando tenga un rato.