Thursday, January 8, 2015

Zity - Health Bar and Liquid

It's been a while since my last post, mostly due to the holidays and sickness. I've still been working on Zity in the meantime and actually managed to get quite a fair bit done in a few late nights. One thing that particularly challenged me was in implementing a health bar.

Now I don't want to give too much away but basically I wanted a very dynamic health bar that would be able to show a wealth of information without shoving a large amount of numbers and pictures at the player. I had sketched out a design a while back and finally got around to implementing it in December.

The first problem I encountered was that I wanted the bar to contain liquid (Blood, basically) as a fun, creative way to display the characters state. I've known about the many various particle methods and spring methods of simulating liquid flow but I wanted something simpler and easy to modify. My first instinct was a shader (XNA - Effect), that skewed the water surface to simulate flow. Here is the result:
The liquid is rendered from a simple rectangle using my custom shader.

Getting this result wasn't easy (though it is fairly simple) as I had very little knowledge of shader programming and even less knowledge of wave functions. To make it worse most other tutorials and articles I found were explaining more complicated methods that I did not want nor need. After a lot of research I found a close enough example and from there managed the rest on my own. 

If you would like to know how to render a waterline (I'll be calling it a waterbox from here on) keep reading.