Metlivi Blog

How to Animate a Masked Shadow’s Opacity on a Deforming Character Part

To animate a masked shadow on a deforming character part, give the shadow its own artwork, make it follow the part’s deformation, and animate its opacity independently. The mask defines where the shadow can appear; the shadow’s opacity defines how strongly it appears.

This walkthrough is for a 2D character creator who already has a deforming part and wants its shading to fade smoothly without drifting or changing the base artwork. It uses Live2D Cubism’s parameter workflow, then explains the equivalent controls in Spine.

October 29, 20267 min readBy Metlivi Editorial Team
Section 1

1. Separate the shadow, boundary, and movement controls

Before adding animation, identify three elements: the base artwork, a separate shadow overlay, and the deformation that moves the part. For an illustrative setup, call these PartBase, PartShadow, and PartWarp. These names are organizational suggestions, not built-in objects.

Select the shadow ArtMesh and inspect its Deformer, Clipping ID, Draw Order, and Opacity fields. Cubism exposes these as separate properties, so you can check attachment, masking, layering, and transparency individually. Place the shadow above the base artwork in draw order and temporarily give it enough opacity to inspect clearly. Live2D: Inspector palette

Decide what the opacity should mean before rigging it. If the shadow should always darken at a particular bend, tying it to that movement may be appropriate. If you need to fade it while holding the same pose, use an independent shadow parameter. The following steps use that independent control.

Section 2

2. Make the shadow follow the deforming part

Put PartBase and PartShadow beneath the warp deformer that supplies their shared movement. Cubism warp deformers can deform multiple child objects together, which makes them useful for keeping an overlay attached to the underlying artwork. Create or resize the deformer to accommodate the artwork throughout its intended movement. Live2D: Warp Deformer

Test the deformation with shadow opacity held constant. Move from one extreme pose to the other and inspect the middle. Look at recognizable features: does the shadow’s curved edge remain beside the same contour, and does its narrow end stay attached to the same area?

A shared parent handles the deformation that parent applies. It does not establish that separate vertex edits on the base ArtMesh have also been reproduced on the shadow. If the overlay drifts, inspect how each object is actually being shaped. As a rigging decision, move the shared motion into their common deformer where practical, or adjust the shadow’s own forms to follow the base.

Section 3

3. Clip the shadow to the part’s silhouette

Select PartBase and copy its ArtMesh ID. Select PartShadow and paste that ID into the shadow’s Clipping ID field. This makes the base ArtMesh the clipping source and the shadow the clipped artwork. Leave Reverse mask off for an ordinary shadow contained inside the part. Live2D: Clipping Mask, Live2D: Inspector palette

Use this practical boundary test: let the shadow artwork extend slightly beyond the base silhouette, then scrub the deformation. The clipped result should remain within the intended boundary. This separates a masking problem from an overlay that simply ends too early.

Clipping and deformation solve different problems. A correct boundary can conceal excess artwork while the shadow’s internal shape still drifts. Check both the outside silhouette and the shadow’s position within it before proceeding.

Section 4

4. Build an independent shadow-opacity parameter

Create a regular parameter named ShadowOpacity, with minimum 0, default 0, and maximum 1. This range is an illustrative design choice. Cubism parameters have configurable minimum, default, and maximum values, and their registered forms interpolate between keys. Live2D: About Parameters

For a shadow ArtMesh without existing pose keyforms, use this procedure:

  1. Select PartShadow.
  2. Select ShadowOpacity in the Parameter palette.
  3. Use Add 2 Keyforms and confirm keys at 0 and 1.
  4. At parameter value 0, set the shadow’s Inspector opacity to 0%.
  5. At parameter value 1, set its opacity to an illustrative maximum of 40%.
  6. Scrub between the keys and confirm that only the intended shading changes.

Cubism’s documented keyform procedure starts by selecting the object, selecting its parameter, and adding two or three keyforms. Here, the edited property is the selected ArtMesh’s opacity. Keep the base artwork unselected while making these changes. Live2D: Add/Delete Keys to/from parameters, Live2D: Inspector palette

For a shadow that already has several pose keyforms, consider inserting a dedicated deformer above only the shadow and assigning the opacity parameter there. This suggested hierarchy keeps the fade control separate from the shadow’s existing shape edits. Cubism deformers support opacity adjustments as well as deformation. Live2D: Warp Deformer

Section 5

5. Animate the parameter over time

Save the model, load it into an Animation scene, and expand the model track’s Live2D Parameters group. At each desired frame, enter a value for ShadowOpacity. Cubism creates timeline keys when you change parameter values, and playback interpolates between those keys. Live2D: 6. Creating Animations

For an illustrative 30 fps test, use the following values. They describe a fade in, a brief hold, and a fade out; they are not prescribed timings.

Frame ShadowOpacity value Intended result
0 0 Shadow absent
12 1 Shadow reaches its configured maximum
24 1 Shadow remains at maximum
36 0 Shadow fades away

Animate the part’s deformation across the same interval. Then repeat the fade while holding the part at its most compressed pose. Testing these separately makes it easier to identify whether an unwanted change comes from the shape or the fade.

Open the Graph Editor to inspect the parameter’s transition and adjust its timing. Also ensure the model track and playback work area cover the entire test; Cubism’s animation tutorial explains that a shorter track can make the whole model disappear before the scene ends. Live2D: 6. Creating Animations

Section 6

6. Diagnose inconsistent opacity and edge artifacts

Use this diagnostic order before adding more keys. It is a practical sequence derived from the separate controls above.

Symptom First check Next action
Base artwork fades too Selected object and opacity-controller children Restrict the controller to the shadow
Shadow drifts during bending Shared deformation and separate mesh edits Correct movement before changing opacity
Shadow strength changes between pose keys Stored opacity on existing keyforms Inspect those forms for unintended values
Shadow spills outside the part Clipping ID and mask availability Restore the intended clipping source

When existing keyforms contain inconsistent opacity values, Cubism’s Multiple Keys Editing function can batch-edit opacity across a selected range. Select only the forms that should share a value, enable Opacity, and review the affected objects before applying. Preserve intentional differences rather than overwriting every form indiscriminately. Live2D: Multiple Keys Editing Function

For a pale rim, inspect the mask’s translucent edge. Live2D documents a workaround using an enlarged duplicate mask, with its displayed opacity at 0%, transformed alongside the original. Also check missing endpoint keyforms and hidden mask sources when clipping unexpectedly releases. Verify the exported appearance in the intended renderer because mask behavior can vary by implementation. Live2D: Clipping Mask

Section 7

7. Apply the same separation in Spine

In Spine, animate the shadow slot’s alpha through its Color property. Slot color controls attachment opacity and can be keyed; the attachment’s separate color cannot be keyed. Keep the shadow in its own slot so the fade affects the intended overlay. Spine User Guide: Slots

For the boundary, create a clipping attachment around the part. Arrange the shadow within its clipping range and explicitly set End slot: clipping applies through that slot inclusively. The clipping polygon can follow bones through weights, and its vertex positions can also be animated. This boundary needs to follow the deformation independently of the shadow’s alpha animation. Spine User Guide: Clipping attachments

If the shadow will remain absent after fading, Spine recommends hiding its attachment with a slot attachment key after reaching transparency. Alpha zero alone can still incur drawing work. For a shadow that fades back in, restore the attachment before its visible fade begins. Spine User Guide: Slots

Finish by testing the shadow at zero, partial, and maximum opacity in the neutral pose, both deformation extremes, and intermediate poses. A working setup lets you change shadow strength while preserving its placement and boundary throughout the movement.

Section 8

Sources

Related reading

Keep exploring this topic