Intro to Meshes

Intro to Meshes

Intro

Not long ago, we introduced the ability to add raster images into the Rive editor. This feature on its own added an excellent utility for artists and designers who want complex artwork, with minimal hit to performance. Now, you can add meshes to those graphics to take them to the next level!

Content Overview:

  • What are meshes?
  • Uses
  • Creating a Mesh
  • Considerations

Note: To review the meshes, bones, or animations, for any example, check out the community files.

What are meshes

Meshes are layers that can be added to raster graphics, giving you the ability to deform the graphic in ways that create realistic motion and volume. This allows you to make skin flex, fabric ripple, hair flow, and more. Connecting a mesh to bones gives you a natural way to deform the graphic with a skeleton, but you can manually animate the vertices for total control.

Uses

Hero Moments

Create stunning hero shots for your apps and websites.

Animated Illustrations

2022-03-07 14.48.09.gif

At their core, meshes allow us to bring illustrations to life.

Characters

2022-03-07 14.49.30.gif

Characters for apps, games, and websites are likely the most common use case for meshes.

Backgrounds

2022-03-07 14.51.17.gif

We can take trees, signs, lamps, or anything used to decorate a scene and give it some added motion with a bit of work.

Objects

2022-03-07 14.52.54.gif

Meshes aren't strictly limited to games. Anytime we want to utilize rasters images, we can take them to the next level by adding a mesh and giving the object some motion.

How to create a mesh

Import raster image

2022-03-07 15.00.43.gif

Start by importing the artwork you'd like to animate into the rive editor by either dragging and dropping it onto the stage or using the plus button in the Assets panel to batch import.

2022-03-07 15.01.29.gif

Your images will now appear in the Assets panel. From here, drag them onto the stage, then resize and reposition them.

Create bone structure

2022-03-07 15.06.00.gif

It's not required to animate meshes with bones, but they provide a convenient set of controls to simplify the animation process. Be sure to pre-plan your bone structure to ensure you have the proper controls for your particular project.

Create new mesh

2022-03-07 15.09.06.gif

To create a mesh, start by selecting the desired image and hitting the Create Mesh button in the Inspector.

Contour the graphic

2022-03-07 15.10.01.gif

Now, hit the New Contour button and begin adding vertices to the outside edge of your graphic. When you finish the outer edge, hit esc.

Add interior vertices

2022-03-07 15.24.10.gif

With the pen tool activated, begin placing vertices on the interior of the mesh. If you need to move a vertex, click and drag it with the pen tool active. Once you're happy with the interior of the mesh, hit esc to confirm the mesh.

Bind bones

2022-03-07 15.27.21.gif

Select the image, and hit the bind bones button in the Inspector. When prompted, select a bone you want to bind. Repeat this process until all bones you wish to influence the mesh are bound.

Weight the mesh

Select the graphic and hit the Edit Mesh button. Now, adjust the weights of each vertex using either the Weight tool or manually in the Inspector.

Note: The first bone selected in the binding process will, by default, be weighted to it fully.

Make adjustments

Once your graphic is weighted, it's always best to text your bones and ensure that things are deforming how you want. It's tough to nail this on the first try, so keep working it until you are happy.

Considerations

We'll look at setting up meshes in greater depth in video tutorials, but here are a few things to consider while trying this out for yourself.

Runtime Impact

Meshes can impact which runtimes you’ll be able to use.

  • Supported: Web, Flutter, Flutter Web with CanvasKit, iOS, Android,
    React Native
  • Not supported: Flutter Web HTML renderer

Remove backgrounds and clean

Before importing assets to mesh, be sure the assets are on a transparent background and don't have any unwanted pixels lingering. Ensuring a clean image will provide you with a smaller bounding box, making selection on the stage much easier.

Keep it simple

Some meshes require more vertices than others, but as a general rule, try to keep your mesh as simple as possible. Avoid adding extra vertices until you've tested your initial mesh and find that you need more.

Export the correct image size

Before you import your assets into Rive, be sure you export them at the correct size and resolution for your app or game.