Bubble Popping Animation

What

Last week, one of my tasks for the Sprint was to create a popping cycle animation for a bubble. The bubble is a projectile for a power-up bubble gun; once it hits an enemy, it gets bigger and captures it inside until it suffocates to death, and when the enemy dies, the bubble pops and disappears.

How

To create a good quality animation, I had to look up the different frames for the cycle I wanted to design. I started by searching for animation cycles for bubbles in animation movies so that I can make it stylized, exaggerated, and fits in the game… Nothing helpful. So, I went to find some realistic relevant animation frames and sprite sheets, and I finally found a 6 frame cycle. I copied the sprites into Photoshop, divided them into separate layers, created a frame animation, and tested the quality of that cycle to check if it’s good enough to take as a reference to create my own style animation…. It didn’t meet the expectations. I was then left with one last choice; slow-motion. I started watching videos showing bubbles shot in slow-motion while popping; it helped a lot creating my basic frames by pausing the video several times during the cycle and trying to sketch what I see to create my sprite sheet. The results were satisfying to a certain extent for the animation looked good, however, it wasn’t what I wanted. The problem with that animation is that it looked too detailed and realistic that is useless for a simply intended game animation that is supposed to take less than a second.

After a lot of thinking, and with the help of my graphics mate in my team, I ended up creating a 7 frame cycle including the initial state of the bubble and an empty frame when the bubble is gone. The animation basically consists of slightly increasing the size of the bubble with a constant rate within 4 frames, then the frame that follows them displays the bubble in a significantly bigger size and only showing parts of its circle edge (The animation cycle sprite sheet is displayed in Fig1). The results were finally acceptable and satisfying after being tested in the game.

bubble-anim
Fig1: Bubble Popping Animation Sprite Sheet

 

Why

Although it was a small detail, and although it took too much time and energy, animating the bubble popping was a very important for the quality consistency of our project. Before having that animation, the bubbles would simply disappear with only one effect represented by sound. But we spent 2 weeks working hard to figure how a background parallax should be implemented in the game and how it can serve the aesthetic values and game feel we set to create, so investing few hours to make a small detail work and keep the level of visual quality consistent seemed to be convenient. After all, it’s the small details that makes an artifact a masterpiece.

bubble-anim
Fig2: Final Bubble Popping Animation
Advertisements

One thought on “Bubble Popping Animation

  1. Hallo!

    I’ll just start off by saying that I think the bubble and the animations looks really good!

    I think your post had really good grammar and contained a lot of information about the research that you did to get your intended result, which is good, it helps to know all the different sources one could use for inspiration or reference. Another thing I really like is that you thoroughly explain why the earlier attempts didn’t work out, and why it’s important to get the art style “right”, instead of just getting it done.

    I barely found any issues with the post, the only minor problem I might have is that there isn’t so much information about how you drew the bubble and what kinda problems and processes you went through, although maybe that’s more relevant for when you actually made the first asset for the bubble, in which case, I don’t really have any problems with the post.

    I think you did a really good job :>

    Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s