Heartbeat Life Meter: A Corona SDK Example
For my current game I am working on I wanted a beating heart that could double as a life meter as well as throb faster as the game sped up. I’ve created this small Corona SDK example to show both concepts.
NOTE: The code is available at https://github.com/funkyvisions/Heartbeat (in case you missed the GitHub link at the bottom of this article)
Here’s a video of the final result
The video cannot be shown at the moment. Please try again later.
There are 2 images to show the life meter. The back one is white and the front one is red.
In order to show a percentage I had to mask the red heart. To do this I used the following image.
Any area of the mask that is white will show the image behind it. This mask is centered over the image it is attached to, so you need to alter the maskY attribute to change the visibility of the red heart. The mask is 200px which is twice as high as the 100px heart image. So to completely show the red heart the maskY value should be set to -50. We know this because if it was set to 0 it would split the heart horizontally down the middle (remember the mask is centered).
So setting it to -50 would show a fully red heart and setting it to +50 would show a fully white heart. Got that? The code is fully documented, so you should be able to figure out what is going on.
The heartbeat is accomplished by using transitions to scale the 2 heart images up and down. We scale continually from 50% to 100% changing the xScale and yScale attributes of the images. You’ll notice that the transitions keep in time with the BPM (beats per minute) of the music playing. How did I do this? With this calculation
halfHeartRate = ( ( 60 / sound_bpm ) * 1000 ) / 2
So in this example the BPM starts out at 116, which is really close to 2 beats per second. If we do the calculation we get ( ( 60 / 116 ) * 1000 ) / 2 = 259 milliseconds. So almost every half second we will do a complete beat of the heart. Of course I made it fun and sped up the soundtrack as the demo continues. So the transition time keeps getting smaller and smaller to keep up with the music. Pretty cool eh?
But how did I speed up the music? I stumbled across this blog entry
which describes some hidden Audio APIs inside of Corona. Super powerful stuff and fun to play around with.
At the last minute I also decided I really needed a rotating background to make you nauseous while watching this. That was accomplished by a simple repeating timer that changes the rotation of the background image.
I hope you found this tutorial fun. Feel free to comment on anything you see that I might be doing wrong or can be done a better way. I’ve published this on GitHub with the MIT license, so feel free to use this however you wish.