I created these heart regeneration animations using a mixture of coding and pixel art. The heart sprite fills up and particles constantly spawn. When the heart is full it scales up in size, using the scale and barrel distortion. It also gets brighter, before returning to normal size.

I first drew the heart sprite in Aseprite. Then I created an animation which fills up the heart, simply by deleting one line of pixels every frame. I created the plus shaped particles one at a time. I wanted the particles to loop seamlessly, so I needed to decide the starting point, how many animation frames, how much they would move per frame, where they would disappear, etc.

This heart popping animation was made both inside and outside of a shader. The shader applies barrel distortion and increases the brightness. Whilst outside the shader I used some easing functions.

I used a value called progress to control the animation. The progress value starts at 0 and ends at 1. The middle (0.5) is the apex of the animation, where the scale and barrel distortion are at there highest.

Thanks for reading!