Metlivi ブログ

変形するキャラクターパーツ上でマスクされた影の不透明度をアニメートする方法

変形するキャラクターパーツ上でマスクされた影をアニメートするには、影に独自のアートワークを与え、パーツの変形に追従させ、その不透明度を独立してアニメートします。マスクは影が表示される場所を定義し、影の不透明度は影がどれだけ強く表示されるかを定義します。

このチュートリアルは、すでに変形パーツを持っており、そのシェーディングをベースアートワークを変更せずに、ドリフトすることなくスムーズにフェードさせたい2Dキャラクタクリエイター向けです。Live2D Cubismのパラメータワークフローを使用し、次にSpineでの同等のコントロールを説明します。

2026年10月29日7分で読めますMetlivi Editorial Team
セクション 1

1. 影、境界、移動コントロールを分離する

アニメーションを追加する前に、3つの要素を特定します:ベースアートワーク、別個の影オーバーレイ、パーツを動かす変形。説明のためのセットアップとして、これらを PartBase、PartShadow、PartWarp と呼びます。これらの名前は整理のための提案であり、組み込みオブジェクトではありません。

シャドウArtMeshを選択し、そのDeformer、Clipping ID、Draw Order、Opacityフィールドを検査します。Cubismはこれらを別々のプロパティとして公開しているため、アタッチメント、マスク、レイヤー、透明度を個別に確認できます。シャドウをドロー順でベースアートワークの上に配置し、一時的に十分な不透明度を与えて明確に検査できるようにします。 Live2D: インスペクタパレット

リグする前に不透明度が何を意味するかを決めてください。特定の曲がりで常に影を濃くしたい場合、それをその動きに結びつけるのが適切かもしれません。同じポーズを保ったままフェードさせる必要がある場合は、独立したシャドウパラメータを使用します。以下の手順ではその独立した制御を使用します。

セクション 2

2. 影を変形パーツに追従させる

PartBase と PartShadow を、それらの共有移動を提供するワープディフォーマの下に配置します。Cubismワープディフォーマは複数の子オブジェクトをまとめて変形できるため、オーバーレイを基礎アートワークに固定するのに役立ちます。意図した動き全体でアートワークが収まるようにディフォーマを作成またはリサイズします。 Live2D: ワープディフォーマ

シャドウの不透明度を一定に保ったまま変形をテストします。極端なポーズから別の極端なポーズへ動かし、中間を検査します。認識しやすい特徴を見てください:シャドウの曲線エッジが同じ輪郭の横に留まっているか、その狭い端が同じ領域に固定されているか?

共有親は、その親が適用する変形を処理します。それは、ベースArtMeshへの個別の頂点編集がシャドウにも再現されていることを保証しません。オーバーレイがドリフトする場合、各オブジェクトが実際にどのように形作られているかを検査してください。リグの判断として、共有モーションを実用的な範囲で共通のディフォーマに移動するか、シャドウ独自の形状をベースに追従するように調整してください。

セクション 3

3. 影をパーツのシルエットにクリップする

PartBase を選択し、そのArtMesh IDをコピーします。PartShadow を選択し、そのIDをシャドウのClipping IDフィールドにペーストします。これにより、ベースArtMeshがクリッピングソース、シャドウがクリッピング対象アートワークになります。通常のパーツ内に含まれるシャドウの場合、Reverse maskはオフのままにします。 Live2D: クリッピングマスク、Live2D: インスペクタパレット

この実用的な境界テストを使用してください:シャドウアートワークをベースシルエットからわずかに飛び出させ、変形をスクラブします。クリッピングされた結果は意図した境界内に留まるはずです。これは、単にオーバーレイが早すぎる終了をする問題から、マスキングの問題を分離します。

クリッピングと変形は異なる問題を解決します。正しい境界は余分なアートワークを隠せますが、シャドウの内部形状がまだドリフトしている可能性があります。先に進む前に、外側のシルエットとその中でのシャドウの位置の両方を確認してください。

セクション 4

4. 独立したシャドウ不透明度パラメータを構築する

ShadowOpacity という通常のパラメータを作成し、最小値0、デフォルト0、最大値1とします。この範囲は説明のための設計選択です。Cubismパラメータには設定可能な最小値、デフォルト値、最大値があり、登録されたフォームはキー間で補間されます。 Live2D: パラメータについて

既存のポーズキーフォームのないシャドウArtMeshの場合、以下の手順を使用してください:

  1. PartShadow を選択します。
  2. パラメータパレットで ShadowOpacity を選択します。
  3. 「2キーフォーム追加」を使用し、0と1にキーがあることを確認します。
  4. パラメータ値0で、シャドウのインスペクタ不透明度を0%に設定します。
  5. パラメータ値1で、不透明度を説明用の最大値40%に設定します。
  6. キー間をスクラブし、意図したシェーディングのみが変化することを確認します。

Cubismの文書化されたキーフォーム手順は、オブジェクトを選択し、そのパラメータを選択し、2つまたは3つのキーフォームを追加することから始まります。ここで編集するプロパティは、選択されたArtMeshの不透明度です。これらの変更中、ベースアートワークは未選択のままにしてください。 Live2D: パラメータへのキーの追加/削除、Live2D: インスペクタパレット

すでに複数のポーズキーフォームを持つシャドウの場合、シャドウ専用の専用ディフォーマをその上に挿入し、そこに不透明度パラメータを割り当てることを検討してください。この推奨階層は、フェード制御をシャドウの既存の形状編集から分離します。Cubismディフォーマは変形だけでなく不透明度調整もサポートします。 Live2D: ワープディフォーマ

セクション 5

5. パラメータを時間でアニメートする

モデルを保存し、アニメーションシーンに読み込み、モデルトラックのLive2D Parametersグループを展開します。目的の各フレームで ShadowOpacity の値を入力します。Cubismはパラメータ値を変更するとタイムラインキーを作成し、再生時にそれらのキー間を補間します。 Live2D: 6. アニメーションの作成

説明用の30fpsテストとして、以下の値を使用します。これらはフェードイン、短いホールド、フェードアウトを説明しており、指定されたタイミングではありません。

フレーム ShadowOpacity値 意図した結果
0 0 影なし
12 1 影が設定された最大値に達する
24 1 影が最大値を維持
36 0 影がフェードアウト

同じ区間でパーツの変形をアニメートします。次に、パーツを最も圧縮したポーズで保持したままフェードを繰り返します。これらを別々にテストすることで、望ましくない変化が形状から来るのかフェードから来るのかを特定しやすくなります。

グラフエディタを開いてパラメータの遷移を検査し、タイミングを調整します。また、モデルトラックと再生ワークエリアがテスト全体をカバーしていることを確認してください。Cubismのアニメーションチュートリアルでは、トラックが短いとシーンが終了する前にモデル全体が消えてしまうことが説明されています。 Live2D: 6. アニメーションの作成

セクション 6

6. 不整合な不透明度とエッジアーティファクトを診断する

さらにキーを追加する前に、この診断順序を使用してください。これは上記の個別のコントロールから導かれた実用的なシーケンスです。

症状 最初の確認 次のアクション
ベースアートワークもフェードする 選択オブジェクトと不透明度コントローラの子 コントローラをシャドウのみに制限する
曲げ時にシャドウがドリフトする 共有変形と個別メッシュ編集 不透明度を変える前に動きを修正する
ポーズキー間でシャドウの強さが変わる 既存キーフォームに保存された不透明度 それらのフォームの意図しない値を検査する
シャドウがパーツ外にはみ出す Clipping IDとマスクの可用性 意図したクリッピングソースを復元する

既存のキーフォームに不整合な不透明度値が含まれる場合、Cubismの複数キーフォーム編集機能で、選択範囲の不透明度を一括編集できます。同じ値を共有すべきフォームのみを選択し、Opacityを有効にし、適用前に影響を受けるオブジェクトを見てください。意図的な差異は保持し、無差別にすべてのフォームを上書きしないでください。 Live2D: 複数キーフォーム編集機能

薄いリムがある場合、マスクの半透明エッジを検査してください。Live2Dは、拡大した複製マスクを使用し、その表示不透明度を0%にしてオリジナルと共に変形させる回避策を文書化しています。また、クリッピングが予期せず解除される場合、欠落しているエンドポイントキーフォームと隠れたマスクソースを確認してください。マスクの振る舞いは実装によって異なる可能性があるため、意図したレンダラでの書き出し外観を検証してください。 Live2D: クリッピングマスク

セクション 7

7. 同じ分離をSpineで適用する

Spineでは、シャドウスロットのアルファをそのColorプロパティを通じてアニメートします。スロットカラーはアタッチメントの不透明度を制御し、キーを打てます。アタッチメントの個別のカラーにはキーを打てません。シャドウを独自のスロットに保持し、フェードが意図したオーバーレイに影響するようにしてください。 Spineユーザーガイド: スロット

境界については、パーツ周りにクリッピングアタッチメントを作成します。シャドウをそのクリッピング範囲内に配置し、End slotを明示的に設定します:クリッピングはそのスロットを通じて包括的に適用されます。クリッピングポリゴンはウェイトを通じてボーンに追従でき、その頂点位置もアニメートできます。この境界は、シャドウのアルファアニメーションとは独立して変形に追従する必要があります。 Spineユーザーガイド: クリッピングアタッチメント

フェード後にシャドウが非表示のままになる場合、Spineは透明度に達した後にスロットアタッチメントキーでアタッチメントを非表示にすることを推奨します。アルファゼロだけでは描画負荷がかかる可能性があります。フェードインするシャドウの場合、可視フェードが始まる前にアタッチメントを復元してください。 Spineユーザーガイド: スロット

ニュートラルポーズ、両方の変形極値、中間ポーズで、シャドウを不透明度ゼロ、部分、最大でテストして完了です。機能するセットアップでは、動き全体を通じてシャドウの配置と境界を保ったままシャドウの強さを変更できます。

セクション 8

出典

関連記事

このテーマをさらに見る