Game Achievement Badge - Rive Animations ( Remixable )

Hi everyone! ✨ I've been working with Lottie animations for many years, but Rive has recently caught my attention. That's why I decided to explore the platform and learn more about how Rive works.

Let's go to the main course!

✦

Have an animation idea?

We're ready to help. Contact us now!

Email | Whatsapp | Telegram | Skype | Talk With Us

The Badge Designs

So, I started creating badge designs and flags in Adobe Illustrator with three different styles. Each option can represents something, such as indicating whether the game is completed, failed, etc.

The Nested Artboards / Components

In Rive, it's possible to separate animations using multiple artboards and display them on the main artboard using Nested Artboards, similar to how components work

This also makes it easier for us to rework animations on each artboard and allows for adding new assets in the future.

The State Machine

The animations are connected to each other using a State Machine, with transitions triggered by inputs. I use three inputs to personalize the designs and ratings:

Badge Designs ( 3 Designs )

Flags Designs ( 3 Designs )

Ratings ( 1 - 5 Stars )

All the child inputs from nested artboards also can be accessed in the main artboard. You can scroll down to see the interaction on the rive runtime...

🐸

Remix This Project on Rive Community

Feel free to remix the project, edit, or use it in real project