Intro to meshes

Not long ago, we introduced the ability to add raster images into the Rive editor. This feature is useful for artists and designers who want complex artwork with minimal hit to performance. With the launch of mesh deformations, you can now take those graphics to the next level!

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.

Use cases for meshes

Hero moments

Create stunning hero shots for your apps and websites.

Animated illustrations

Use meshes to bring illustrations to life.

Characters

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

Backgrounds

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 and props

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 a raster image

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. This is useful if you need to import a lot of images at once. Note that you can also import a PSD to import multiple layers together.

Your images will now appear in the Assets panel. From here, drag them onto the stage, then resize and reposition them. The advantage of using a PSD is that the layers will already be positioned for you.

Create a skeleton

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 a mesh

To create a mesh, select your image and hit the Create Mesh button in the Inspector.

Contour the graphic

Now, hit the New Contour button and add vertices to your graphic's outside edge. When you finish the outer edge, hit ESC. Try to use as few vertices as necessary to achieve the deformations you want, this makes the weighting process easier.

Add interior vertices

You can subdivide your mesh by adding interior vertices and forced edges. This is useful when you want to control how the interior of your image deforms. 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.

Bind bones

Select the image, and hit the plus button next to the Bind Bones section of the Inspector.

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.

Make adjustments

Once your graphic is weighted, it's always a good idea to test your bones by rotating them and checking that your mesh is deforming how you want. It's tough to nail this on the first try, so keep adjusting your vertices and weights until you are happy.

Considerations

Stay tuned for in-depth video tutorials on meshes! In the meantime, 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, iOS, Android, React, React Native, Flutter, Flutter Web with CanvasKit

• Not supported: Flutter Web HTML renderer

Remove backgrounds and clean

Before importing assets to use with meshes, 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. Only add the minimum amount of vertices you need to achieve your desired look. This will make your mesh easier to work with and is also a good consideration for optimum performance.

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.