Tuesday, March 3, 2015

Animated Card Art

In my time at Wizards of the Coast, I’ve art directed three installments of the franchise Duels of the Planeswalkers. It’s the digital version of the popular trading card game Magic: The Gathering, available on iOS, Steam, PS3, Android and XBox. One of the hidden features of Duels of the Planeswalkers 2014 were the animated cards. We chose rare or special cards to animate; when brought into play or zoomed, the iconic card art would surprise the player by coming to life. There were around 20 animated cards in the game; but since they were rare, powerful cards, it is an exciting and unexpected moment when the player encounters one. Our goal was to make you claw your eyes out the first time you see Grave Titan:

Grave Titan from Erik Van Horn on Vimeo.
Animated card from Duels of the Planeswalkers 2014
Artists: Nick Bartoletti, Nick Isaac
Animation Director: Erik Van Horn
Illus. Nils Hamm

DotP is a collaboration between developer Stainless Games and publisher Wizards of the Coast; both teams took on some card animations. I directed them, and I personally contributed to the animation of the WotC efforts, collaborating with our excellent 3D artists Nick Bartolletti and Nick Isaac.
The technical limitations dictated we had 4-5 seconds of animation to work with. We decided we could have three types of animated cards: looping animation which seamlessly played in perpetuity; one-time animation resolving to a static image; and one-time intro animation resolving to a looping state. The native card art would dictate the appropriate approach.
A high-level goal was to animate in service of the artist’s intentions; not animation for animation’s sake. There were three approaches we employed. One, we could simulate real-time movement. Such was the case with Grave Titan and Giltspire Avenger.

Giltspire Avenger from Erik Van Horn on Vimeo.
Animated card from Duels of the Planeswalkers 2014
Animators: Nick Bartoletti, Nick Isaac
Animation Director: Erik Van Horn
Illus. Chris Rahn

Another approach was to animate the artistry of the image itself in a surface-aware manner. Cycling a texture or lighting effect was an appropriate choice when the image did not lend itself cost-effectively to a camera move or full animation. Such was the case with Celestial Mantle:

Celestial Mantle from Erik Van Horn on Vimeo.
Animated card from Duels of the Planeswalkers 2014
Artists: Nick Bartoletti, Nick Isaac
Animation Director: Erik Van Horn
Illus. Steve Argyle

A third approach was bullet-time, or stop-time animation. The idea here is to show a frozen moment in time in three dimensions; by moving the camera, we reveal a sculptural quality to the card art for a new view of a familiar image. An example is Behemoth Sledge:

Behemoth Sledge from Erik Van Horn on Vimeo.
Animated card from Duels of the Planeswalkers 2014
Artists: Nick Bartoletti, Nick Isaac
Art Director: Erik Van Horn
Illus. Dave Allsop

For Dan Scott’s Charmbreaker Devils, the high-energy exploding shards suspended in midair suggested the third approach; that of revealing a third dimension to accentuate the chaos of the frozen moment. An early prototype I created as a visual target, I purposefully pushed the camera move to the extreme to test how far we could push the effect. The end result is a bit jarring, as the move is extreme. We put it into the game this way since the initial jarring factor paid off well when it unexpectedly resolved into the familiar card art.

Charmbreaker Devils from Erik Van Horn on Vimeo.
Animated card from Duels of the Planeswalkers 2014
Animation: Erik Van Horn
Illus. Dan Scott

Here's a view of the Maya scene so you can see how simple the geometry actually is. This shot employs mostly 2D cards, but the devil on the right is bumped out a bit and the devil on the left is 3D, since his arms change perspective in the camera parallax. Also, the round jar on the floor behind him had to be full 3D since complex rounded forms do not look right in 2D fakery.

For those interested in the technique, read on. For the rest of you: NERD ALERT! Technical jargon coming your way!
Here’s the basic process. I used Photoshop and Maya, but the principles are the same in other 3D software.

Camera Projection in Maya


  • Open hi-res flat art. Plan dissection into layers; anything at a different depth or that will be animated will be broken out into its own layer.
  • Cut out all layers. Painting in Quick Mask Mode is fastest. (Paint inside layer, invert selection)
  • Save out alpha channel (Save selection as…). Use descriptive names; you will be choosing from a list in Maya.
  • With selection still loaded, CTRL+J to copy pixels to new layer. Name the new layer to match the corresponding alpha channel. Group layer (Layers palette menu > New Group from Layers). Maya links to groups, not individual layers (although Maya still calls them “layer sets”). Each group should have the same name as the layer it holds.
  • Paint in portions of each layer that were covered by other layers in the flattened image. Start with patch tool and fill in from existing parts, then touch up.
  • OPTIONAL: export layers as individual files if you want compatibility with programs that don’t support PSD networks. File > Scripts > Export Layers to Files (Not useful with Maya as Maya doesn’t support embedded transparency, only alpha channels. For Maya, use only the master layered PSD file with alphas and layer groups individually labeled.)


Set Up Camera and Render Settings

  • Create a perspective camera named “proj_cam”
  • Set its film aspect ratio to the one your image uses (a 1.36 aspect ratio is good for our purposes – to be exact divide width by height of source image).
  • Set Fit resolution gate to Overscan
  • Under Display Options, turn on Display Film Gate and Display Resolution. Add a little Overscan.
  • Under Environment, select Image Plane and browse to your original image. Adjust alpha gain to see the grid beyond your image. Set Fit to Fill and Fit to film gate. Set Display to looking through camera.
  • With Camera selected, CTRL+D to duplicate camera in the same spot. Name the new camera render_cam.
  • Lock translate/rotate/scale of proj_cam
  • Use render_cam  to animate. Final animation can be done later, but set at least one keyframe to hold the placement matching cam_proj, ideally at the final frame (as our animated cards usually end on the card frame). For animated cards, we shoot for 4-second animations, so set timeline at 120 frames (at 30fps) and set a keyframe on the final frame.
  • Open Render Settings and set Renderable Camera to cam_render. Set Image Size > Width and Height to 2X the output resolution (animated cards should be at 512x376 so resolution can be set to 1024x752). That way we can composite at a larger resolution and down-res later.
    File Output: Use name.#.ext with frame padding 3. Set Frame Range from 1 to 120. Image format can be Tiff or something else universally compatible.
    On the Maya Software tab, set Quality to Production Quality.

Import Textures

  • Switch to camera_proj to use the image plane as a guide. Create a plane orthogonal to the camera that covers the layer from the camera’s POV. (Plane just needs to cover the element/layer in the image plane).
  • Right click over the new polyplane and create a new lambert. Name it after the composite level (example: lambert_foreground). Move Ambient Color slider to white (value 1) and Diffuse to black (value 0).
  • In the color swatch, launch Create Render Node window and rt-click over psdFileTex: Create as Projection. In projection1 node, set Proj Type to Perspective, and under Camera Projection Attributes: Link to Camera choose proj_cam.
  • In the psdfileTex node, set Link to Layer Set to point to a specific layer
  • Set Alpha to Use to point to a specific alpha (this is optional since layer transparency is supported)
  • Repeat process for every layer, arranging the planes in ZDepth roughly corresponding to their perceived depth relationships to each other.


For most objects, you can use 2½D techniques: use the sculpt polygon tool to “bump out” the planes a bit for more believable parallax. 

For objects close to the camera or for more elaborate camera moves (orbits) or to deform/animate objects, you’ll need to convert them to full 3D objects. Create a mesh that approximates the shape and pull the edge vertices carefully to the silhouette extents from the cam_proj perspective. In the Hypershade, employ Edit > Convert to File Texture and set it to save out a PSD (ZBrush likes PSD best) of a sufficient resolution (1024x1024?). Note that both the object and the lambert node need to be selected during this. Once the texture pixels are baked into the objects UV space, you can use any texture tools you need to “paint in” areas of missing texture that the camera move reveals. Photoshop, ZBrush, or Maya’s own paint tools can accomplish this.

Hope you enjoyed this behind-the-scenes info. To see a bunch of the animated cards in one place, here’s a link: http://imgur.com/a/H7C3F

Thursday, December 4, 2014

Tuesday, December 2, 2014

8 Maids A Milking

Almost forgot I had a blog! Been busy. The wife and I both have pieces in the 12 Days of Christmas Art Opening Thursday at 6:00pm, Tin Umbrella Coffee in Seattle, Washington. May I present "8 Maids A-Milking."

Sunday, February 17, 2013


The 3D model for Satyr, Sinister's right-hand man. Here are some early concept sketches.