AR/VR Tutorial: Microinteractions in Maya

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone

Microinteractions in Maya

Aaron Faucher, a graduate of the Ivory Cohort, is a UX/UI designer focused on the emerging platforms of AR/VR. Follow him on Medium at @f0sh_.

Introduction

In this post, we’ll walk through how to animate a simple microinteraction in Maya 2016 for OS X. Our tutorial will center around a simple, yet essential asset – a 3D, pushable button – that could be used as a UI element in a virtual reality (VR) or augmented reality (AR) context.

Animated button in Maya

This exercise will focus on the preparation of the 3D asset: we’ll walk through how to create a polygon, modify its geometry, and animate its shape using keyframes. The button you create is fully-exportable to the Unity interaction engine. With a simple script and Unity’s built-in Mecanim animation editor, your virtual button can be ‘pressed’ by your physical hand using the Meta or Leap Motion SDKs!

Creating a new scene

Open Maya and create a new scene. Let’s save it right away, so we don’t forget to later. I’ll be saving this scene in a new project folder, maya/projects/simpleButton. I’m calling my scene button1.mb.

Saving a new scene in Maya

Inserting a shape

First, we’ll want to pick from Maya’s library of simple polygons to begin modeling our button shape. Towards the top of the screen, you’ll see this set of tabs:

Maya tabs

Select the second tab to bring up the Polygons shelf. This will give us a set of polygon primitives to insert into our scene.

Maya polygons shelf

Click the orange cylinder. This will place a cylinder primitive into our scene, centered at the scene origin (0,0,0).

Inserting a cylinder polygon

Resizing the cylinder

Maya toolboxRight now, our cylinder looks more like a can than a button. Let’s shrink it down into something more button-sized.

Left-click the cylinder to select it, then press ‘R’ to call up the Scale tool. Alternatively, select the Scale tool from the Tool Box, which sits on the left side of the screen.

The red, blue, and green handles allow us to deform the cylinder along the x, y, and z axes independently. Grab the green handle, and shrink the cylinder along the y axis.

 

Resizing the cylinder

Smoothing the button shape

While a standard cylinder could work fine as a button, what if we wanted our button to have a rounded, smooth shape? We’ll have to modify our mesh’s geometry to achieve this look.

On the right hand side of the screen, select the tab labeled Attribute Editor. If you don’t see a tab called Attribute Editor, toggle this button Attribute editor toggle  on the top-right corner of your screen.

Within the Attribute Editor, navigate to the polyCylinder1 tab (also called a ‘node’). The settings on this node will let us change aspects of our cylinder’s geometry. Scroll down to the Subdivisions Caps slider, and increase the number from 1 to 6. This will create 6 subdivisions on the top and bottom of our cylinder. Then, enable the Round Cap checkbox. You’ll see that our nondescript cylinder now has a much smoother appearance – enhancing its affordance as a finger-friendly, pushable button.

Adding subdivisions and round cap to the cylinder

Setting up the timeline

Maybe our virtual button is firm and solid in form, and should retain its shape when pressed. Or, perhaps the button is made of a more rubbery, malleable material, and should deform when touched. For the purposes of this tutorial, we’ll go with the latter, and try to create a button appears to have a squishy, rubbery texture.

Let’s start our animation process by setting up our timeline. In a default scene, Maya initializes the animation timeline to 120 frames. Because our button microinteraction will be short, let’s shorten the timeline to 40 frames: 30 frames for the button to depress, plus 10 frames for it to spring back to its original position.

We can change the length of our timeline in one of two ways: we’ll either grab the right-side timeline handle and move it to our desired position, or manually enter the ‘end time’ of playback range.

Changing the animation timeline

Preparing for animation

Before we jump into animation itself, we’ll want to change into a more convenient view for manipulating the button’s vertices. Tap the spacebar to bring up Maya’s ‘Four View’ screen. Hover your mouse over the ‘side’ view (on the bottom right corner), and tap the spacebar again. The spacebar will become our primary means of navigating between the 3D perspective view and the orthographic top, front, and side views in our scene.

Toggling top, side, and perspective views

To animate our vertices – in other words, to change the shape of our object – we need to be able to select vertices themselves. To do this, we need to switch from Object Selection mode to Vertex Selection mode. This will let us select (and animate) only some of the points on our object, rather than the full object.

To switch to Vertex Selection mode, you’ll need to access the Modeling Toolkit. Click the Modeling Toolkit icon Modeling Toolkit icon on the top right part of the screen to show the tab at right.

Then, click the Vertex Selection icon to switch to Vertex Selection mode. You’ll notice that the wireframe of our cylinder is now comprised of a number of vertices that can be selected and manipulated individually.

Vertex selection mode

Press the ‘Q’ hotkey to swap back to selection mode. Click and drag to select all of the button’s vertices.

The following step is very important. Now that we’ve selected our vertices, we need to create 3 keyframes to represent these sequential button states: unpressed, pressed, and unpressed. If you’re confused about why we need two keyframes for unpressed, not to worry – you’ll see why in a moment.

With all of our vertices selected, we’ll create keys by selecting specific frames on our playback timeline, and pressing the ‘S’ hotkey to insert a key.

Create keys on frame 1, frame 30, and frame 40, simply by selecting these frames and hitting ‘S.’ You’ll notice the frames become highlighted by a red line.

Once you’ve created the three keys, navigate back to frame 30. Now it’s time to actually move the vertices around.

Selecting vertices and adding keyframes

Depressing the top of the button

Let’s select just the top part of our button, and animate it down towards the bottom of the button. This will simulate the movement of the button being pressed.

In the Tool Box, switch back from the Scale tool to the Select tool (Q). Click and drag to select the top half of the button. You’ll see the selected vertices turn from purple to yellow.

Tap the ‘W’ hotkey to expose the Move tool. This will allow us to move these vertices towards the bottom of the button.

Navigate to frame 30, which should be highlighted in red. Grab the move tool’s y-handle, and drag the vertices downwards like below.

Translating the top vertices

Note that we’re moving these vertices on a specific keyframe: frame 30. On frame 1 and frame 40, these top vertices remain in their original position. Maya automatically interpolates and animates the position of all these vertices, creating smooth movement between them.

Click the Play button Play button next to the timeline, or use the ‘Option + V’ hotkey to preview the animation you’ve just created.

The first half of the animation is complete

Expanding the bottom of the button

We noted earlier that our button should have a ‘squishy’ appearance. While our animated button is no longer static, it still doesn’t quite exhibit the bouncy, rubbery, pressable quality we’re going for.

Think about conservation of volume: if the top of the button is pushed down, where does all that material go? If a rubber button were sitting on a flat, hard surface, the material would probably spread across the surface if compressed.

To create the illusion of compression, do the following:

  • On the timeline, navigate back to frame 30
  • This time, select the bottom vertices
  • Flip to the Scale Tool (R)
  • Grab the center handle on the Scale tool, and pull to the right. This will scale the bottom of the button proportionally
  • Preview your animation using Option + V, and adjust accordingly

Expanding the bottom of the button to simulate conservation of volume

Adjusting the color

Now that we’ve got a basic animation down, let’s make our button a little more attractive by changing its color. To add color to your button, follow these steps:

  • Switch back from Vertex Selection mode to Object Selection mode.
  • Left-click the cylinder to select it
  • Click on the Attribute Editor tab at right
  • Within the Attribute Editor, navigate to the ‘lambert1’ node
  • Click on the gray box next to the Color.
  • Use the color picker to adjust accordingly

Changing the color of the button

Conclusion

Congratulations! You’ve made your first AR/VR-ready button. Because you’ve animated this microinteraction in Maya, you can easily port your asset into Unity using .FBX or .MB file formats, and trigger it using interaction scripts and Unity’s built-in Mecanim animation editor. You can read more about Maya-Unity integration here, and view a tutorial on Unity’s Mecanim here.

The finished microinteraction

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone

Leave a Reply

Your email address will not be published. Required fields are marked *