Mobile Game Loot Box Animation
Disclaimer: Artwork pre-animation by Susy
The loot box was made for a culinary-themed rhythm game, so a team member thought it was appropriate to make it a picnic basket. She sketched out, vectorized her ideas, and also provided a story board (Shout out to Susy!!).
The image above is the texture atlas I got after breaking down the Photoshop layers I received even further and importing them into DragonBonesPro. The video below is the breakdown how those textures are used in the animation.
The lid of the picnic box had to be separated to isolate it better during animation, since some of the actions of the lid are independent of the rest of the picnic box.
We needed three animations in total:
1. Idle picnic box (A looping animation for before the user clicks on the box)
2. Exploding picnic box (An initial opening animation of the picnic box)
3. Coughing picnic box (An animation for subsequent clicks for the next items)
A few things I found:
1. It was really important to make the idle animation loop-able, but not repetitive.
2. If the exploding animation does not look exaggerated yet, keep deforming that mesh.
3. It's really fun and rewarding to see the little details you included complete the whole animation.
A closer look at the opening animation above. I had to keep iterating and finally found the maximum amount of deformation I can do on the picnic box without ruining the outlines. It was also tricky to animate the food jumping out of the box, but making sure that they don't fly too far away due to how it will be placed in-game.
A closer look at the animations frame-by-frame.
The final product of the loot box animation! One final touch I added was the spinning rays behind the item that comes out of the loot box. There was thoughts on making it colorful, but we settled on keeping it simple but still filling up the screen and complementing on the loot box animation.
