Meshes!

December 19th, 2013

Less than a month after the Kickstarter and just in time for Christmas, meshes are now available in Spine Professional, version 1.7+! The trial can also be used to experiment with meshes.

Meshes provide the foundation for FFD and skinning. They allow you to define a polygon within your image, as well as points and edges within the polygon. We put a lot of effort into making the tools for editing the mesh powerful and easy to use. Below is a quick crash course.

To get started, click the Mesh checkbox on a region attachment’s properties.

The region is converted to a mesh with four points, one at each corner.

The mesh can be deformed by manipulating the points using the translate, rotate, and scale tools. Ctrl drag is especially useful to box select points.

Moving points around deforms because where the points sample the image hasn’t changed. This can be seen by clicking Edit Mesh.

Where the points sample the image are called the UVs. Here the UVs are at each corner, but this can be changed.

After exiting Edit Mesh, you can see the deformed mesh is unaffected by changing the UVs, except of course the points sample the image from a different place.

Another way to edit the UVs is by checking Deformed on the Edit Mesh dialog.

Now when a point is moved, both the UVs and the deformed mesh are changed. This was quite tricky to implement, but we feel the flexibility it offers was worth it.

Meshes are not limited to just four points, of course. The easiest way to set up a new mesh is to click Set Points, then click in your image to add points around the edge.

Next, the Create tool can be used to create internal points and edges by dragging. The edges control how the mesh is deformed, so are used around image features intended to be deformed separately.

On mobile you may want to keep an eye on the number of points used, but on the desktop or when exporting images or video there won’t be an issue. Often just four or five points is enough for great deformations, but you may want to use more, for example to better control deformation for facial expressions.

It isn’t yet possible to key deformations in animations (which is the FFD Kickstarter goal), but that is coming soon. Also, currently the only runtime that can render meshes is spine-libgdx. Once we have FFD and skinning, we’ll dig into the runtimes.