2026年10月3日：先行修正の条件演算子を維持し、貼付先・明度の値・1から数えた表情番号を揃えました。
今回AE本体での表示・レンダリング確認は行っていません。
ノベルゲームやシナリオ演出のように、発言中のキャラクター画像を自動で切り替える方法を解説します。
セリフや進行に合わせて、話しているキャラクターを前面に表示して明るくし、表情を切り替える表現をエクスプレッションで制御します。
コンポジションに使用する素材を配置する
- キャラクター素材として、表情差分の連番画像を3枚用意します。
- 「master」という名前のコンポジションを作成し、用意した素材レイヤーを配置します。
連番画像レイヤーの設定
今回は5体のキャラクターを配置する構成とします。
各レイヤーからコンポジションマーカー内のエクスプレッションを参照して一括管理できるように設定します。
- 各画像レイヤーの名称を「1」「2」「3」「4」「5」と連番で設定します。
- 各画像レイヤーに「色相/彩度」を適用し、チャンネルはマスターにして「マスターの明度」へ次の式を貼ります（不透明度へは貼りません）。
//1つ目のコメント
eval(comp("master").marker.key(1).comment)- 各画像を3Dレイヤーにして「位置」の次元を分割し、分割した「Z位置」へ次の式を貼ります（通常の3成分の位置には貼りません）。
//2つ目のコメント
eval(comp("master").marker.key(2).comment)- 番号1・2・3の練習画像を24fpsの連番として解釈し、タイムリマップを有効にして次の式をタイムリマップへ貼ります。
var requested = Math.round(thisComp.layer("controll").effect("キャラ1")(1).value);
var step = thisLayer.source.frameDuration;
var frames = Math.floor(thisLayer.source.duration / step + 0.000001);
var result = value;
if (isFinite(requested) && isFinite(step) && step > 0 && frames >= 1) {
result = (Math.max(1, Math.min(requested, frames)) - 1) * step;
}
result;
キャラ1は各レイヤーに合わせてキャラ2〜5へ変更します。
表情番号1が1枚目、3が3枚目です。
0以下は1枚目、枚数を超えた値は最後のフレームへ制限します。
コントローラー用ヌルレイヤーの作成
- タイムラインの最上位に「controll」という名前のヌルレイヤーを新規作成します。
- スライダー制御を6つ追加し、状態制御とキャラ1〜5へ改名します。状態1〜5が発言者、6が全員、0が全員を暗くする値です。キャラ1〜5の初期値は1にします。切替用スライダーのキーはホールド補間にします。
- コンポジションにマーカーを2つ追加します。
マーカー1：明るさ（明暗）制御用エクスプレッション
var state = Math.round(comp("master").layer("controll").effect("状態制御")(1).value);
var selected = Number(thisLayer.name);
(state == 6 || state == selected) ? 0 : -50;
画像レイヤー名を条件として判定し、表示状態を切り替えています。
状態6では全員のマスター明度が0になり、元の明るさで表示します。
状態2ならレイヤー2だけが0、他は-50で暗くなります。
100で白くする式とは異なります。
マーカー2：描画順（Z位置）制御用エクスプレッション
var state = Math.round(comp("master").layer("controll").effect("状態制御")(1).value);
var selected = Number(thisLayer.name);
(state == 6 || state == selected) ? -1 : 0;
画像レイヤー名を条件にして判定し、Z位置の値を切り替えています。
状態2ならレイヤー2のZは-1、他は0です。
状態6では全員が-1になり、互いの前後関係は変わりません。
実際の重なりはカメラやレンダラーでも変わるため、プレビューで確認します。
設定した2つのマーカーに記述されたコードを各画像レイヤーが参照し、レイヤー名に応じた条件分岐で動作します。
アニメーションキーフレームの設定
ヌルレイヤーのスライダー制御プロパティに対して、状態切り替えや表情変更のキーフレームを打ってアニメーションを作成します。
正しく設定できていれば、各レイヤーを直接触ることなくヌルレイヤー「controll」側のスライダー操作だけで演出全体の制御が完結します。
参考：レイヤーマーカーから値を取得する記述方法
次は別の方法です。
レイヤーマーカーの最初のコメントへ表情番号1・2・3だけを入れ、タイムリマップから数値として読みます。
マーカーなしや整数以外なら式を入れる前の値を返します。
var result = value;
if (thisLayer.marker.numKeys >= 1) {
var number = Number(thisLayer.marker.key(1).comment);
var step = thisLayer.source.frameDuration;
var frames = Math.floor(thisLayer.source.duration / step + 0.000001);
if (isFinite(number) && number >= 1 && number % 1 == 0 &&
isFinite(step) && step > 0 && frames >= 1) {
result = (Math.min(number, frames) - 1) * step;
}
}
result;
番号3を24fpsで時刻へ変換すると、0から数えたフレーム2なので次の0.083333…秒になります。
framesToTimeのfpsを省略するとコンポのfpsが使われます。
framesToTime(2, 24);レイヤースタイル併用時の描画順に関する注意点
キャラクターを暗くする処理にエフェクト「色相/彩度」を使用していますが、レイヤーに「レイヤースタイル」を併用するとレンダリング順序の関係で描画結果が意図通りにならない場合があります。
After Effectsのほかの操作やテクニックについては、まとめ記事もあわせてご覧ください。
既存GitHubの参考コードは旧版の場合があります。
今回の貼付先と式は本文を使います。
マーカーコメントに他者から受け取ったコードを貼って実行しません。
テキストレイヤーを扱う記事は、ほかにもあります。
状態と表情を確認する練習例
本稿は、カメラ・親レイヤー・レイヤースタイルのない練習コンポで元のZが0の例です。
コンポは30fps、3枚の連番素材は24fpsで解釈し、masterとcontrollの名前を揃えます。
| 入力・条件 | 期待する結果 | 確認点 |
|---|---|---|
| 状態2・キャラ2=3 | 2番の明度0・Z=-1・表情3 | 他の明度-50・Z=0 |
| 状態6 | 全員の明度0・Z=-1 | 相対的な順序は変わらない |
| 表情1／24fps | 素材時刻0 | 1枚目 |
| 表情3／24fps | 素材時刻2/24秒 | コンポfpsと区別 |
エラーの場合は名前の一致、コンポマーカー2つの存在、明度と分割Z位置への貼付先を確認します。
マーカー1と2は時間上の順序で参照するため、後から順序を入れ替えません。
戻し方と旧画像の範囲
変更前にコンポと各プロパティ値を保管します。
戻すときは追加した式をオフにし、明度・Z位置・タイムリマップを保管した値へ戻します。
元からあるキーを削除せず、今回追加したキーや制御は練習コピーで整理します。
上の画像は既存記事の参考画像で、今回の修正式を実機で撮影したものではありません。
レイヤースタイル、別カメラ、別レンダラーとの併用は今回未確認です。
参照資料
Adobeの色補正エフェクト資料と時間変換・マーカー参照資料を参照しています。
最終調査日：2026年10月3日。
数値の分岐はローカル検査で、AE本体の明度・表情・描画順の確認とは区別しています。
