Layers and composition

Use layers to separate roughs, clean-up, paint, and reusable parts of a character. A group can contain raster layers, vector layers, or other groups.

const character = panel.addGroup('Character', { id: 'character' });
const rough = panel.addRasterLayer('Rough', { opacity: .3 }, character.id);
const ink = panel.addVectorLayer('Ink', {}, character.id);
const shade = panel.addRasterLayer('Shading', {
  blendMode: 'multiply', opacity: .6,
}, character.id);

Layers render in their stored order, with later layers over earlier ones. Group transforms and opacity affect their children.

For full input shapes, see LayerOptions, LayerChanges, Transform, and Pivot in API types.

Move, rotate, or hide a layerCopy Anchor Link

character.set({ transform: { x: 80, y: 0, scaleX: 1, scaleY: 1, rotation: .1 } });
rough.set({ visible: false });
shade.set({ opacity: .4 });

Rotation is in radians. Set a layer pivot to control its rotation and scale origin. The base transform places artwork; keyframes change placement over time.

Select specific artworkCopy Anchor Link

project.select({ panelId: panel.id, layerId: ink.id, elementIds: [contourId] })
  .transform({ x: 20, y: -10 });

An element selection changes those elements' placement. Selecting the layer without element IDs changes the layer. Use layer.edit(id, updater) to change source geometry instead of moving the whole element.

Clip and maskCopy Anchor Link

clipToBelow: true clips a layer to the preceding layer's alpha. Use it for shading or highlights that should remain inside a painted silhouette.

const silhouette = panel.addVectorLayer('Silhouette');
// Draw the silhouette into this layer before adding the highlights.
const highlights = panel.addRasterLayer('Highlights', { clipToBelow: true });

For an explicit mask, set maskLayerId to another layer in the same sibling stack. The mask's alpha controls visibility. Clear a mask with layer.set({ maskLayerId: null }). Masks and clipping are compositing operations; the source artwork remains editable.

Supported blend modes are source-over, multiply, screen, overlay, darken, and lighten.

Change stacking and parentingCopy Anchor Link

project.production.moveLayer(shade.id, ink.id);
project.production.reparentLayer(ink.id, character.id);

moveLayer places a layer before another sibling; omit the destination to move it to the end of its stack. reparentLayer changes its group; use null for the panel root and beforeLayerId to choose the destination stack position. Reparenting changes the coordinate hierarchy, so review placement when parent transforms differ. Mask and drawing-sequence relationships must remain valid.

production.removeLayer(id) removes a layer and its descendants. A selection's remove() deletes selected elements or its selected layer. Review locks block changes by other actors; deleting locked artwork requires releasing the lock first. Use a transaction for related changes and render before saving.

Partial transforms and pivotsCopy Anchor Link

Layer transforms contain X/Y translation, X/Y scale and radian rotation. Negative scale can mirror artwork. A layer pivot is in local coordinates. An element selection composes an affine placement matrix; a contour edit instead changes source coordinates. Those operations produce different future rotation and scaling behavior.

When feedback refers to a visible screen location, use coordinate conversion at the relevant frame. Parent transforms, animation and camera placement all contribute to that mapping.

Find a layer in a later sessionCopy Anchor Link

const matches = project.production.find({ panelId: panel.id, name: 'Ink', limit: 10 });
console.log(matches);
const layer = project.production.layer(matches[0].id);

Read the returned IDs and kinds before editing. Names can change; retain stable IDs for repeatable revisions. See review and revision for a complete loop.