On this page

In the character picker, animators can create a 2D layout with simple buttons to select character controls in an animation scene. The character picker includes various tools for creating and customizing a picker layout for a rig.

Character picker

The picker layout is created in the character picker pane, where you can add images, buttons, and labels to create a custom layout for a character. The character picker pane is active when you are in the animate state. If you are outside the animate state, the character picker pane will be empty.

Setup

You can create a character picker layout in two ways - using an APEX Add Character Picker SOP or directly in an animation scene. Both methods save the picker layout in a .pick file in the character folder structure.

Create a layout using an APEX Add Character Picker SOP

In this example, we create a picker layout for the Electra test geometry using an APEX Add Character Picker SOP:

Create a layout using an APEX Add Character Picker SOP
  1. On the Electra SOP, set Output to Skin Surface. This outputs Electra’s shape as its 1st output and Electra’s skeleton as its 2nd output.

  2. The APEX Pack Character SOP adds Electra’s shape and skeleton to a character folder structure. Turn on Add FK and Bone Deform Components to create a rig for the character with FK and bone deform functionality.

    We now have character elements at the root of the character folder structure. See the folder structure in the rig tree view - in the rig tree view, set Type to Packed Folders:

    /
    -- Base.rig
    -- Base.shp
    -- Base.skel
    ...
    
  3. The input to the APEX Add Character Picker SOP must be a character folder structure with a .rig file at the root. When you create a layout using the APEX Add Character Picker SOP, the SOP adds a picker layout named <rig_name>.pick to the character folder structure. We can see this in the rig tree view:

    /
    -- Base.pick
    -- Base.rig
    -- Base.shp
    -- Base.skel
    ...
    
  4. Enter the APEX Add Character Picker viewer state, which is a read-only version of the animate state - select the APEX Add Character Picker SOP, turn on its display flag, and click Animate on the left toolbar. Once you enter the viewer state, the parameter editor is replaced with the character picker pane.

    You can also use the standalone character picker pane - click the New Tab icon at the top of a pane and select New Pane Tab Type ▸ Animation ▸ APEX Character Picker.

Create a layout in an animation scene

In this example, we create a picker layout for the Electra test geometry directly in an animation scene:

Create a layout in an animation scene
  1. As in the previous example, pipe the Electra SOP into an APEX Pack Character SOP to pack Electra’s character elements into a character folder structure. On the APEX Pack Character SOP, turn on Add FK and Bone Deform Components.

  2. The APEX Scene Add Character SOP adds the character elements to a character (.char) folder in the character folder structure. This character is then added to an animation scene. Specify a name for the character in the Character Name parameter. In this example, we set Character Name to electra.

  3. Enter the animate state - select the APEX Scene Animate SOP, turn on its display flag, and click Animate on the left toolbar.

  4. Open the character picker pane - click the New Tab icon at the top of a pane and select New Pane Tab Type ▸ Animation ▸ APEX Character Picker.

    Once you start editing the picker layout, the layout will be saved as a scene.pick file at the root of the character folder structure. We can see this in the rig tree view:

    /
    -- electra.char/
        -- Base.rig
        -- Base.shp
        -- Base.skel
    -- scene.pick
    

Note

A picker layout that is created in an animation scene can reference multiple characters and props.

Character picker pane

When you enter the animate state, the character picker pane will be in pick mode or edit mode, indicated by the icon on the top toolbar. In pick mode, the pane is locked and the picker layout cannot be modified. In edit mode, the pane is unlocked for editing, and you can drag buttons and images from the catalog onto the canvas.

Character picker pane

Note

If you already have a picker layout for the character (either created upstream using an APEX Add Character Picker SOP or already embedded in the character like the Electra and Otto test geometries), the tabs from the upstream layout will be greyed out and cannot be edited.

You can work within two different layers in edit mode - the background layer and the button layer:

Background layer

In the background layer, you can add images to the canvas that act as a guide for placing buttons. For example, if you are creating a picker layout for a biped character or a character’s hands, you could use biped or hand shapes as the background image.

Button layer

In the button layer, you can add buttons to the canvas that link to controls on the character rig.

To switch between the two layers, click the appropriate layer button on the top toolbar. Each layer has a distinct set of toolbar options.

Within each layer, you can have multiple views. Add a view by clicking above the canvas. Duplicate or rename a view by clicking the tab.

You can also split a view into multiple sections by selecting Split View Left/Right or Split View Top/Bottom from the canvas' context menu.

Create the background

In the background layer, you can change the size of the canvas, and add images and labels to the picker layout.

  1. Click the Background button on the top toolbar to go to the background layer.

  2. To set the canvas size:

    • Type in the Canvas field on the top toolbar.

      or

    • Click on the top toolbar and drag the canvas to resize it. Hold ⇧ Shift and drag to keep the canvas centered while resizing. Hold ⌃ Ctrl and drag a corner of the canvas to keep the aspect ratio. Click again to exit canvas resize mode.

  3. Drag and drop from the image catalog onto the canvas.

  4. Labels are text that you can add to the canvas:

    • To add a label, drag from the catalog onto the canvas.

    • To update the label text, double-click the label, or change the Text field on the top toolbar. You can also change the font size and the label color from the top toolbar.

Add buttons

In the button layer, you can add buttons to the canvas that link to controls on the character rig.

  1. Click Buttons on the top toolbar to go to the button layer.

  2. Buttons link to controls on the character rig. If you select a button, its associated (target) control will be selected in the viewport. To add a button:

    • Select a control or multiple controls in the viewport, then drag and drop from the button catalog onto the canvas. The created button will target those controls.

    • If you drag and drop from the button catalog onto the canvas without first selecting any controls in the viewport, the created button will not target any controls.

    • You can also select a button from the button catalog, hold ⌃ Ctrl, and click on the canvas to place the button at the mouse position.

    To add multiple buttons:

    • Select multiple controls in the viewport (the selection order is important), click the canvas, and select Add Button per Control. Click the canvas, then move the mouse to lay out the buttons. While positioning the buttons, press L to toggle between placing the buttons in a line or a grid. The buttons are laid out in the order the controls were selected in the viewport.

      Add a button for each control
  3. You can also create buttons that select selection sets:

    • Select the selection set(s).

    • click the canvas and select Add Button per Selection Set.

    • Click the canvas, then move the mouse to lay out the buttons. While positioning the buttons, press L to toggle between placing the buttons in a line or a grid. Each button selects one of the selection sets.

  4. To change a button’s target control, do one of the following:

    • Select the button, select the new control(s) in the viewport, and click beside Target on the top toolbar of the character picker pane.

    • Select the button, click beside Target, and in the window that pops up, select the new control(s) and click Accept.

    • click a button and select Edit Target Controls. In the window that pops up, select the new control(s), and click Accept.

    • Select the new control(s) in the viewport, click a button, and select Set from Viewport Selection or Add from Viewport Selection.

Create buttons from character controls

You can quickly create a set of buttons based on the character’s controls. In this example, we create buttons for a character’s finger controls:

  1. In the viewport, select the finger controls for the left hand.

  2. On the top toolbar of the character picker pane, click and select Create from Rig.

  3. In the Create from Rig window that pops up, set Controls to Selected and Projection to Right.

  4. Click Create Buttons. The finger buttons are projected onto the canvas.

  5. Drag a corner of the button selection to change the spacing between the buttons. If you want to keep the button sizes the same, select Preserve button sizes mode on the top left corner of the button selection.

    Change the button spacing to fit the hand image
  6. Mirror the buttons to the other hand - select all the finger buttons, click one of the buttons, and select Mirror Button.

Test the picker layout

To test the picker layout, exit edit mode by clicking on the top toolbar. The icon indicates that you are in pick mode.

Test the layout to make sure the buttons select the expected controls in the viewport. Hold ⇧ Shift to select multiple buttons, and ⌃ Ctrl to deselect buttons.

Import and export a picker layout

Character picker layouts are saved as .pick files in the character folder structure. If the picker layout is created using an APEX Add Character Picker SOP, the layout is saved as <rig_name>.pick. If the layout is created in an animation scene, it is saved as scene.pick. The scene.pick can reference multiple characters.

You can also import and export picker layouts to and from disk as .json files (use the import/export options in the menu on the top toolbar).

Example picker layouts

The Electra and Otto test geometries have a character picker layout embedded in their character folder structures:

  1. Put down an Electra or Otto SOP in the network editor.

  2. Set Output to APEX Scene.

  3. Enter the animate state - select the SOP, turn on its display flag, and click Animate on the left toolbar.

  4. Open the character picker pane to see the picker layout for the character. Drag the three dots on the side and bottom of the view to see additional layouts. The top right layout is for the character’s ragdoll:

    Otto’s picker layout

Hotkeys

In the table below, an “element” is a button, image, or label.

To...Do this

Pan

drag

or

Hold Space and drag

Zoom in and out of the canvas

Do one of the following:

  • Hold Space and drag

  • Hold Alt and drag

Frame the canvas

Press F.

Pan and zoom to show the selected elements

Press Space + G.

Add a button

In the button layer, hold ⌃ Ctrl and click on the canvas to place the button at the mouse position.

Show/hide the name of a button

Select the button and press N.

Select all the elements

⇧ Shift click the canvas.

Resize the elements

Hold ⇧ Shift and drag to keep the element centered while resizing.

Hold ⌃ Ctrl and drag a corner of the element to keep the aspect ratio.

Move an element along the x or y axis

Hold ⌃ Ctrl while dragging.

Swap the positions of two buttons

Select two buttons and press S.

Lay out the buttons when placing multiple buttons

When using Add Button per Control or Add Button per Selection Set, press L while dragging to toggle between placing the buttons in a line or a grid.

Lay out the elements in a grid

Select the elements and press L.

Toggle snapping to other elements on the canvas

Press ⇧ Shift + X. This toggles the Snap to Items option.

Snap to 15 degree increments when rotating an element

Hold ⌃ Ctrl while rotating.

How-to

In the table below, an “element” is a button, image, or label.

To...Do this

Add a view

Click beside the current view.

Rename or duplicate a view

click the tab and select Rename Tab or Duplicate Tab.

Reorder the views

Drag the tab.

Delete a view

Click on the tab.

Split a view into multiple sections

click the canvas and select Split View Left/Right or Split View Top/Bottom.

or

Click on the top left of the canvas, and select Split View Left/Right or Split View Top/Bottom.

Resize the canvas

In the background layer, do one of the following:

  • Type in the Canvas field on the top toolbar.

  • Click on the top toolbar and drag the canvas. Hold ⇧ Shift and drag to keep the canvas centered while resizing. Hold ⌃ Ctrl and drag a corner of the canvas to keep the aspect ratio. Click again to exit canvas resize mode.

  • If you have an image on the canvas, you can click the image and select Set Canvas Size from Image.

  • the canvas and select Fit Canvas to Contents, which resizes the canvas to fit all the elements on the canvas - buttons, images, and labels.

Change the background color of the canvas

On the top toolbar of the background layer, click the color chip beside .

Add an image or label

In the background layer:

  • Drag and drop from the catalog onto the canvas. To add a label, drag from the catalog onto the canvas.

    or

  • click the canvas and choose from the Add Image and Add Label options.

Add a button

In the button layer:

  1. Select a control or multiple controls in the viewport.

  2. Drag and drop from the button catalog onto the canvas.

    or

    Select a button in the button catalog, hold ⌃ Ctrl, and click on the canvas to place the button at the mouse position.

    or

    Select a button in the button catalog, click the canvas, and select Add Button.

Add multiple buttons

In the button layer:

  1. Select multiple controls in the viewport (the selection order is important).

  2. click the canvas and select Add Button per Control.

  3. Click the canvas, then move the mouse to lay out the buttons. While positioning the buttons, press L to toggle between placing the buttons in a line or a grid. The buttons are laid out in the order the controls were selected in the viewport.

Change a button’s target control

In the button layer:

  • Select the button, select the new control(s) in the viewport, and click beside Target on the top toolbar of the character picker pane.

  • Select the button, click beside Target, and in the window that pops up, select the new control(s) and click Accept.

  • click a button and select Edit Target Controls. In the window that pops up, select the new control(s), and click Accept.

  • Select the new control(s) in the viewport, click a button, and select Set from Viewport Selection or Add from Viewport Selection.

Create buttons from a character’s controls

See create buttons from character controls.

Create buttons that target controls on the other side of a rig

In the button layer:

  1. Select the button(s).

  2. click one of the buttons and select Mirror Button.

Create buttons that select selection sets

In the button layer:

  1. Select the selection set(s).

  2. click the canvas and select Add Button per Selection Set.

  3. Click the canvas, then move the mouse to lay out the buttons. While positioning the buttons, press L to toggle between placing the buttons in a line or a grid. Each button selects one of the selection sets.

Change the name of a button

In the button layer, do one of the following:

  • Select the button and update the Name field on the top toolbar.

  • click the button and select Edit Name.

  • Double-click the button.

Show/hide the name of a button

In the button layer, do one of the following:

  • Select the button and toggle on the top toolbar.

  • click the button and turn off Show Name.

  • Select the button and press N.

Change the shape of a button

In the button layer, drag another button shape from the catalog onto the button.

Change the color of a button

In the button layer, select the button and click the color chip on the top toolbar.

or

click the button and select Edit Color. After selecting the new color, click OK.

Swap the positions of two buttons

  1. Select two buttons.

  2. one of the buttons and select Swap Positions.

    or

    Press S.

Change the character associated with a button

In the button layer:

  1. Select the button, click on the top toolbar, and select Replace Characters in Selected Buttons.

    or

    click the button and select Replace Characters.

  2. In the windows that pop up, select the character to replace, and the new character to associate with the button.

Change the buttons to target another character’s controls

For example, if you have buttons that target a particular character’s controls, and you want those buttons to target another character’s controls:

  1. On the top toolbar, click and select Replace Characters in Current Tab or Replace Characters in All Tabs.

  2. In the windows that pop up, select the original character to replace, then select the new character to associate with the original character’s buttons.

Select elements

On the top toolbar, click , and select Box Select or Lasso Select.

Hold ⇧ Shift to select multiple buttons.

Hold ⌃ Ctrl to deselect buttons.

Select all the elements

⇧ Shift click the canvas.

Delete elements

Press ⌦ Del or ⌫ Backspace.

For buttons, click the button and select Delete.

For images, click the image and press Delete Image.

For labels, click the label and select Delete Label.

Resize elements

To resize an element:

  • Drag the sides or corners of the element.

  • Hold ⇧ Shift and drag to keep the element centered while resizing.

  • Hold ⌃ Ctrl and drag a corner of the element to keep the aspect ratio.

  • Select multiple elements to resize them together.

  • To resize multiple elements without moving their position:

    • Click on the top left of the canvas and select Selection ▸ Individual. The elements will be individually selected. You can then drag one of the elements to resize all the elements together.

    • You can also hold ⇧ Shift and drag to keep the elements centered while resizing.

Resizing options for buttons:

  • Resize a button to fit the button name - click the button and select Size ▸ Fit to Name.

  • Resize buttons to the smallest button in the selection - click one of the buttons and select Size ▸ Set to Minimum.

  • Resize buttons to the size of a particular button - select multiple buttons, click the button you want all the other buttons to match, and select Size ▸ Match Size.

Resizing options for images:

  • click the image and select Scale to Canvas.

Lay out elements

Select multiple elements and do one of the following:

  • Align the elements using the Align options on the top toolbar.

  • Evenly space the elements using the Distribute options on the top toolbar.

  • Press L to lay out the elements in a grid.

  • If Selection is set to Group (in the canvas' context menu), there are two options in the top left corner of the selection:

    • Scales the spacing and size of the elements.

    • Scales the element spacing but keeps the element sizes the same.

Use a grid to help position elements

click the canvas, and turn on Show Grid and Snapping ▸ Snap to Grid.

Snap elements to the grid or other elements

click the canvas and select the options in the Snapping submenu. Press ⇧ Shift + X to toggle the Snap to Items option.

Rotate an element

Drag the circle above the element:

Rotate handle

Hold ⌃ Ctrl while rotating to snap to 15 degree increments.

To reset the rotation, click the element and select Reset Rotation.

Flip or duplicate an image

In the background layer, click the image and select Flip Horizontal, Flip Vertical, or Duplicate Image.

Move an image to the front or back

In the background layer, click the image and select Bring to Front or Send to Back.

Change a label’s text, font, or color

  1. In the background layer, select the label.

  2. Change the label’s text by double-clicking the label, editing the Text field on the top toolbar, or clicking the label and selecting Edit Text.

  3. Change the label’s font and color on the top toolbar.

Turn off tooltips that list a button’s associated controls

Click on the top toolbar and turn off Show Target Controls in Tooltips. This turns off the tooltip that’s displayed when hovering over a button.

See also

KineFX

Overview

Preparing character elements

Rigging with APEX graphs

Building rig graphs with APEX Script

Rigging with rig components

Animating in the viewport

Customizing the animate state

SOP-based animation

Deformation

Animation retargeting

Pre-H20

Panes

Appendix