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!
- What are meshes?
- Creating a Mesh
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.
Create stunning hero shots for your apps and websites.
At their core, meshes allow us to bring illustrations to life.
Characters for apps, games, and websites are likely the most common use case for meshes.
We can take trees, signs, lamps, or anything used to decorate a scene and give it some added motion with a bit of work.
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
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.
Your images will now appear in the Assets panel. From here, drag them onto the stage, then resize and reposition them.
Create bone structure
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
To create a mesh, start by selecting the desired image and hitting the Create Mesh button in the Inspector.
Contour the graphic
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
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.
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.
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.
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.
Meshes can impact which runtimes you’ll be able to use.
- Supported: Web, Flutter, Flutter Web with CanvasKit, iOS, Android,
- 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.