Animating with Meshes in Rive

Meshes are a way to manipulate PNGs in animations. In this case study, I’ll be exploring how to build meshes and add animations to an illustration in Rive.

Situation

There are instances when I may need to work with PNGs and not SVGs in Rive. I love illustrating and featuring my illustrations with animations would be a powerful skill in my toolbox.

I started by watching tutorials, Take your files to the next level with meshes, and Beginner to Pro: Crafting Epic Animated Lofi Videos. These videos helped me to figure out how to build a mesh and take an illustration and prepare it for Rive.

Task

I started by taking one of my illustrations and removing background elements. As a test, I chose two firetrucks I illustrated in 2016. The long ladder is easy to imagine moving and for the other, can I make it drive into the scene and have a subtle turn?

Action

The first thing was to bring the illustrations into Rive. Selecting the firetruck with the ladder, I could begin creating the mesh. Clicking on the ‘Create Mesh’ it enables a mesh, then I create ‘New Contour’ using the pen tool. This lays down anchor points that can be manipulated later on. This process is shown in this tutorial, Beginner to Pro: Crafting Epic Animated Lofi Videos.

The next step is to create the bones that the mesh structure will be wired to. Because this is a simple vehicle with just an arm that will move, I used two bones. I clicked the mesh, then bind bones, then clicked the bones (all of them), and hit done.

To connect the mesh points to the correct bones, I went back into the mesh to select the anchor points and connect them to the correct root bone. Because the truck is a base, it connects 100% to the base root bone, and the ladder is connected 100% to the upper anchors.

I used Midjourney to create an illustrated background scene that fit with my firefighter trucks. Then I bought it into the animator to rig up the action.

Result

Animating these PNG elements in Rive was super fun and turned out well. It felt intuitive and was a fairly quick and straightforward exercise. I am eager to do more sketching to see how far I can push this technique!