Creating AnimatedVectorDrawables with Shape Shifter, Part II
In the previous post, I shared a video showing how to create an AnimatedVectorDrawable from scratch using solely Shape Shifter. In this post, I’m going to expand on that work using the 3D modeling app, Blender.
Keep reading to follow along or check out the video below.
So, why Blender?
Blender is a full 3D modeling package with too many features to list in a single sentence but in brief it has lots of capabilities for modeling, rendering, rigging animations (through shapekeys and bone rigging), particle systems with physics, node-based editing and a video compositor. Blender also had a integrated game engine.
The Blender Foundation has funded a number of open source films to push the capabilities of the app. Blender has also been used in the production of commercials and film media.
But the biggest reason for me to use Blender is that it is free and runs on Windows, Mac, and Linux.
Quick Guide to Blender
Here’s the default scene when you open up Blender with a cube, a lamp and a camera in 3D space.
Setting up the Camera
This animation is going to be purely 2D so I’m going to reorient my view and camera so that I’m creating my objects along the X and Y axes. First select the camera, hit X and confirm deletion. Switch to the top view by selecting View-> Top from the lower menu. Using the sidebar, go to the Create tab, scroll down and click Camera to create a new camera. Select View -> Cameras -> Set Current Object as Active Camera.
Select View -> Camera so that we can see what the camera sees. Hit the N key to bring up a side panel and adjust the properties of the camera.
Change the Z elevation until you can see the can see the default cube inside the orange rectangle.
Drawing our shapes
As mentioned in the previous article, our animation is a series of primitive shapes, circles and rectangles.
Face
Let’s start with the face. It’s a basic circle. Use the side Create tab and click table. Scale it to your desired size by hitting the `S` and dragging your mouse. If we render it now, we don’t see anything in the render view. That’s because it is just a number of connected vertices, there is no surface to render. To make it a solid shape, we need to fill it. Enter Edit mode using the Tab key and all the vertices should be collored orange. If they aren’t hit A a couple times until they are. Now hit the `F` key. Render it now and you can see a disk shape.
Eyes — Phase 1
We can follow the same process for the eyes. After filling them, we need to deform them a bit to make them look more like ellipses. Previously, we scaled all axes at the same time, you can restrict that to a single axis by hitting either X, Y, or Z. Once you are satisfied with the size and shape, select Object-> Duplicate Objects (Shift-D) from the bottom menu and move the duplicated object into position.
Eyes — Phase 2 and Mouth
For the mouth, we can use a scaled plane, select it from the create menu and scale on the individual axes until you are happy with the size.
For the second phase of the eyes, we’re again going to use a plane. A plane starts with four vertices. We need to subdivide a few times to get enough vertices to shape it. Subdivide is the W key.
On each edge, we can select a few vertices on each side and extend or extrude a new face from them with the E key dragging the mouse a couple of units. We need a little cleanup to remove a couple vertices and we have our final shape.
Scale, rotate, and duplicate this object and we’re done.
Caveats
One issue that I covered in the video is that Blender’s SVG exporter doesn’t like it when overlapping shapes well. It will break the obscured shape into multiple paths based on what is visible and that’s not really what we want. To solve this, I created the face, mouth and only one of each eye type.
Edit: While doing the write-up for this post, I learned of a couple new settings that solve the path breakup issue. Stay tuned for the next post.
Final Blender Setup
Even though SVG is a 2D format. It can simulate a 3D rendering. Blender’s Freestyle exporter uses the perspective of the active camera to determine what to render.
Open up User Preferences by selecting it from the File menu. Navigate to the Addons tab and enter SVG in the Search bar. You’ll see two addons, one for importing SVG and one that uses the Freestyle renderer to export SVG. Enable both by clicking the check both.
Click the Save User Settings button and close the window. You’ll now be able to consume and produce SVG assets from/for Shape Shifter. Well sort of.
Let’s give it a try. With the default scene showing, find the Render tab in the side panel. Scroll to the bottom and activate FreeStyle and Freestyle SVG Export. At this time you can change the Output directory if you wish.
In the Freestyle SVG Export dropdown, make sure Frame is selected. Render the frame by hitting F12 or selecting the Render -> Render Frame menu option.
When you double click the SVG file or drop it into a web browser, the file renders as expected. Let’s try it in Shape Shifter. Oh. It’s not pulling in the data.
Through a bit of trial and error, I found that the problematic SVG group is one named `RenderLayer_LineSet`. Once I deleted that opening and closing tags, it imports into Shape Shifter just fine.
If Blender were an established market for motion graphics targeting Android, I might hassle Alex to add native support. However for something this experimental, I decided to target Shape Shifter’s reasonably self-documented file format. That allows him to focus on the core features of his tool instead of spending cycles on an unproven flow. LineSets in Blender are also user customizable so there’s a large amount of variability.
I learned the hard way that not all SVG are created equal.
SVG2ShapeShifter
Enter SVG2ShapeShifter. The initial goal was to normalize Blender’s oddities and output to Shape Shifter. After a bit more hacking, I worked in some basic animation support but more on that later.
SVG2ShapeShifter uses requires Java 8 to be installed. I’ve prepared a release download that you can grab and go. About the code, yes I’m using Groovy inside a Kotlin app. Groovy is better with less strict XML and JSON and by that time I had my data classes already written and didn’t feel like rewriting them.
https://github.com/jwill/android-avd-tools
Run the following on the file we exported from Blender:
java -jar SVG2ShapeShifter -f <filename>and we have a Shape Shifter file ready for import. With that settled, let’s re-create the static assets for the Unknown Error animation.
On to Shape Shifter
We can now render the SVG, convert it to Shape Shifter format to work with it. To recap, we did the following:
| Group | Object | Property | Start | End | From | To |
|-------------+--------+-----------+-------+-----+------+------|
| Left Eye | Group | scaleY | 0 | 100 | 1 | 0.25 |
| | Group | scaleY | 100 | 151 | 0.25 | 1 |
| | Group | scaleY | 174 | 274 | 1 | 0.1 |
| | Path | fillAlpha | 249 | 310 | 1 | 0 |
|-------------+--------+-----------+-------+-----+------+------|
| Right Eye | Group | scaleY | 0 | 100 | 1 | 0.25 |
| | Group | scaleY | 100 | 151 | 0.25 | 1 |
| | Group | scaleY | 174 | 274 | 1 | 0.1 |
| | Path | fillAlpha | 249 | 310 | 1 | 0 |
|-------------+--------+-----------+-------+-----+------+------|
| X_Left_Eye | Path1 | fillAlpha | 274 | 374 | 0.1 | 1 |
|-------------+--------+-----------+-------+-----+------+------|
| X_Right_Eye | Path1 | fillAlpha | 274 | 374 | 0.1 | 1 |
|-------------+--------+-----------+-------+-----+------+------|If you’re like me, this was quick a bit faster than working solely in Shape Shifter. I created all my assets in Blender, exported to Shape Shifter and only had to duplicate two shapes manually and do the timeline work. There’s still a bit of manual work involved. Overall I found it to be a bit less finicky than doing everything manually and it made the ending animation felt more polished.
We got to allow each tool to do what it does best. In the next post, I’ll show you how you can use Blender to handle even more of the animation.
