When trying to bring a scene to life, there is nothing more important than motion. Living things move pretty much all of the time.
Unity offers lots of ways to get things moving, like the physics engine and animated sprites, but what if all you’ve got is a simple flower:
The physics engine alone can’t breathe life into this static image, and your artists will likely stage a coup if you ask them to hand draw every frame of every animated flower in every scene. So what do you do? Well, probably lots of things, but the solution we came up with centers around using Unity’s Skinned Mesh Renderer.
Provided with a rigged mesh, the Skinned Mesh Renderer will deform the mesh based on the position and orientation of special “bone” game objects. You can then use Unity’s built in animation tools to move the bone objects around and do something like this:
So how do you create a rigged mesh from a static image? Two answers: Inkscape and Blender
Create the Curve
The first thing we need to do is use Inkscape to convert our flower image into a curve. This helps us because curves can easily be turned into meshes using 3d modeling software like Blender.
- Open the image in Inkscape, when it asks “Link or embed” choose “Link”
- Click on the image to select it
- In the Path menu, select Trace Bitmap
- Set the Brightness cutoff to something high (probably .9 or higher)
- Make sure to look at the Options tab. Smooth corners should be off so that the mesh generated from the curve will be simpler
- Click OK to to generate the curve
Make sure that the generated curve covers the entire image. If necessary undo and adjust the threshold and options. When you are happy with the curve, save it.
Create the Mesh
Now that we’ve got a curve, we can import it into Blender and convert it to a mesh. To import the curve select
File -> Import -> Scalable Vector Graphics (.svg)
and locate the file that you saved earlier. You’ll probably have to zoom in pretty far to see the curve in the 3D view.
Now we need to convert the imported curve to a mesh. But first you may want to adjust the resolution of the curve. Right click the curve to select it and in the properties window, under the data tab, adjust the resolution of the curve.
A lower resolution will result in a simpler mesh and better performance, while a higher resolution allows for more detail. When you are happy with the resolution select
Object -> Convert To -> Mesh from Curve/Meta/Surf/Text
and the curve will magically be converted to a mesh.
Rig the Mesh
The next step is to rig the mesh by creating a skeleton for it (Blender calls it an armature). Start by creating a single bone.
Add -> Armature -> Single Bone
The bone starts out huge and pointing straight up away from the mesh so the first thing you’ll want to do is rotate it. In the properties window, under the object tab, enter 90 degrees for the x-axis.
To position the bone hit ‘tab’ to go into edit mode. While in edit mode you can select each end point of the bone and move it around. We’ll start with our first bone somewhere near the base of our flower.
Once you’ve got the first bone placed, select one of the end points and hit ‘e’ to extrude the bone, adding a new bone attached to the selected endpoint. Move your mouse to position the end point of the new bone and click to place it.
This process is repeated to build the complete skeleton of the flower.
Once your skeleton is complete you need to attach it to the mesh. Luckily blender makes this incredibly easy. First hit ‘tab’ again to return to object mode. Right click the mesh to select it and then hold down shift and right click the skeleton to select it as well. The order that you select the two is important so make sure it’s mesh first then armature. Parent the mesh to the armature:
Object -> Parent -> Armature Deform With Automatic Weights
Now your mesh is attached to the skeleton, and each vertex of the mesh has automatically been assigned a value that tells it how much each bone should effect it’s position. Magic!
At this point your hierarchy should look something like this:
Generate Texture Coordinates
The one thing the mesh is still missing is the UV mapping that Unity will need in order to apply a texture to the mesh. Luckily blender has a solution for this as well. First open the UV / Image Editor view. By default Blender has the timeline view open at the bottom, you can click on the small box in the lower left corner to switch this view to the UV / Image Editor view. Once you have the view open, select the mesh and hit ‘tab’ to enter edit mode. Hit ‘a’ to select all vertices and then select
Mesh -> UV Unwrap -> Project From View (Bounds)
You should now see the UV mapping in the UV / Image Editor view.
To make sure this mapping actually fits the original image you can select:
Image -> Open Image
in the UV / Image Editor view and load the original image that you used to create the curve. Usually everything will already line up at this point, but if you notice that the original image is getting cut off or otherwise misaligned you can manually transform the uv mapping using the tools in the UVs menu.
Export the Mesh
Alright, so now we’ve got that rigged mesh we wanted, all we have to do is export it from Blender and import it into Unity. Unity accepts a lot of different formats, but the best results I’ve had are with the FBX format:
File -> Export -> FBX
Under Export FBX on the left set:
- Forward: Y Forward
- Up: Z Up
- Make sure Apply transforms is checked
- Make sure only Mesh and Armature are selected for export.
Export into somewhere in your Unity project folder.
Import the Mesh
Find the exported file in Unity and select it to edit the Import Settings. Under the Model tab set the Scale Factor to whatever is reasonable for your game, I use 131.2. Under the Rig tab select the Root node. It should be:
Armature -> Bone
Drag the model into a scene. You may have to rotate it -90 on the x to see it depending on your camera orientation.
Now it just needs a texture. Create a new material using the Transparent/Diffuse shader and assign the original image as the texture. Drag the new material onto the model in the scene, and there you have it, a flower!
Now for the cool part. If you take a look at the children of the Armature object you’ll see a ton of bone objects. If you select one of the bone objects and move or rotate it, you will see the flower deform accordingly:
The next step is to use Unity’s built in animation tools to animate the bone objects, but that is beyond the scope of this already-far-too-long write up. Another really cool option is to attach rigidbodies to the bone objects and allow the physics system to control how the mesh deforms.
I’ll end with one final note on why you would bother to do all this. After all, rigging the mesh may be simple, but it’s not completely effortless and neither is animating the bone objects in Unity. The advantage this method has over frame-by-frame animation is that you can easily re-use the skeletons and animations to create new flowers. As long as the the structure doesn’t change too much you can swap out the texture and have a completely different animated flower without having to actually create a new animation.