モーショングラフィックスとタイトル

シェイプ、静止画、テキストで構成される作品のためのレシピ集。これらはmontagentのループのビルドステップに組み込まれます。まだmontagentをロードしていない場合は、先にロードしてください。

作業を始める前に、作品の種類に応じたリファレンスファイルを開いてください：

作品の種類	開くファイル
ロンチスポット、プロダクトCM、SNS広告、イントロ、アウトロ	ロンチスポット構造
ロゴリビール、ロゴスティング、ループするもの	ロゴループ
トレイラー、スラムエフェクト、グリッチエフェクト、フラッシュエフェクト、HUDエフェクト	トレイラーエフェクト

新しい作品やリデザインの場合は、レイアウトを選ぶ前にクリエイティブディレクションを読んでください。そこでは、ネイティブMontagentにおけるビジュアルコンセプト、構図、振付について説明しています。特定の編集の場合は、関連するレシピのみを読み、既存のディレクションを維持してください。

ビートシートで計画する

要素を書き始める前に、ビートシートを書きましょう。すべての登場、カラーチェンジ、カット、退場を1つの表にまとめ、montagent-craftが提供するグリッドのビート（テンポ、ダウンビート、フレームスナップ、どのイベントがビートに乗るか）に従って配置します。

ビートシートからジェネレータースクリプトを使ってプロジェクトを構築すれば、リタイミングは1行の編集で済みます。

レシピ

すべてのレシピは、答えではなく開始範囲を提供します。各レシピの最後にはルックステップがあります。先に進む前にmontagent-craftをロードし、ステップに従って確認してください。

ポップ

小さなオーバーシュートを持ち、落ち着くエントランス効果。オーバーシュートはカーブで表現します。3つのキーフレームではなく、yが1を超えるベジェ曲線を持つ1組のキーフレームを使用します。

{
  "frame": {"width": 1920, "height": 1080}, "fps": 30, "background": "#101418", "duration": 2000, "output": "out/pop.mp4",
  "tracks": [
    {"name": "badge", "layer": 10, "elements": [
      {"id": "badge", "type": "ellipse", "start": 500, "end": 2000, "x": 960, "y": [{"t": 500, "v": 580}, {"t": 900, "v": 540, "ease": [0.34, 1.56, 0.64, 1]}], "origin": "center", "width": 240, "height": 240, "fill": "#FF5A36", "scale": [{"t": 500, "v": [0.5, 0.5]}, {"t": 900, "v": [1.0, 1.0], "ease": [0.34, 1.56, 0.64, 1]}]}
    ]}
  ]
}

長さ： 300～450ミリ秒。短いとスナップ感、長いと浮遊感。
開始スケール： テキストやカードは0.5～0.7、小さなシェイプやバッジは0。
オーバーシュート： [0.34, 1.56, 0.64, 1]で約10%オーバーします。遊び心のある効果には2番目の数値を1.8に上げ、コーポレート感を出すには1.3に下げます。作品内のすべてのポップで同じカーブを維持してください。
上昇： y軸に20～60ピクセルの移動を同じカーブで加えると、重みが増します。行に並ぶポップでは省略します。
連続： 各アイテムが自身のビートに着地する場合は1ビート、同じビート内のアイテム間は60～120ミリ秒。
確認： frameを開始位置から長さの40%の位置で表示し、オーバーシュートがピークになる場所を確認し、フレームの端や隣接要素にクリップしていないかチェックします。その後、最初のポップの直前から最後のポップの直後までのスパンでpreviewします。

ホールド、そしてクリア

エントランスの最後のキーフレームはすでにホールドしているため、ホールドにコストはかかりません。エグジットは、退場が始まる瞬間に、ホールドされた値のキーフレームから始まります。validateはそのキーフレームをR-EASE-INERTとして報告しますが、ファインディングガイドでそれが想定内である理由を説明しています。

エグジットの長さ： 200～350ミリ秒、ease-in。エグジットはエントランスより速く動作します。
エグジットの動き： フェードに加えて20～40ピクセルの移動、またはスケールダウンして0.9に。ハードカットの場合は、新しい値への単一のstepキーフレームを使用します（スタータープロジェクトのタイトルを参照）。
ホールドの長さ： montagent-craftが示す読み取り時間。
グループのエグジット： グループ全体が一緒に退場するか、読み順に30～60ミリ秒ずつ連続して退場します。
確認： frameをエグジット直前の最後の描画フレームで表示し、グループ全体が完全に入力され、静止していることを確認します。

単語のカラーチェンジ

行内の単語の色を、ビート上でその単語のランにhighlightを指定して変更します。これにより、要素は1つだけ維持されます。クロスフェードするための2つ目のコピーは不要で、要素自体の色は行の色のままです。

{
  "frame": {"width": 1920, "height": 1080}, "fps": 30, "background": "#101418", "duration": 3000, "output": "out/accent.mp4",
  "fonts": {"title": [{"file": "fonts/Inter-Bold.ttf"}]},
  "fontVendor": {"fonts/Inter-Bold.ttf": {"licence": "OFL-1.1", "source": "https://github.com/rsms/inter", "sha256": "288316099b1e0a47a4716d159098005eef7c0066921f34e3200393dbdb01947f"}},
  "tracks": [
    {"name": "line", "layer": 20, "elements": [
      {"id": "line", "type": "text", "start": 0, "end": 3000, "x": 960, "y": 540, "origin": "center", "width": 1600, "height": 140, "font": "title", "size": 110, "color": "#F5F0E6", "align": "center", "runs": [{"text": "Video your agent can "}, {"text": "read.", "highlight": {"start": 2000, "end": 3000, "color": "#FF5A36"}}], "caption": false}
    ]}
  ]
}

タイミング： 変更はビート上で行われ、単語のエントランス上では決して行われません。最初に単語を読むために、少なくとも半ビートの時間を確保してください。
強調： 単語が独自の要素である場合、同じビートでスケールバンプ（1.0から1.06～1.1へ、200～300ミリ秒で戻る）を加えると、変更が際立ちます。
確認： frameを変更の1フレーム前と1フレーム後で表示し、変更された単語が1つだけであることを確認します。

キネティックテキストとタイプライター風テキスト

すべての文字、単語、または行が一定のステップ（everyミリ秒）で同じモーションカーブを共有する場合、単一のtext要素を維持し、units（by：letter、word、またはline; order：forward、reverse、center_out、またはedges_in）で連続させます。以下は、見出しが中心から外側に向かってフォーカスが合う例です：

{
  "frame": {"width": 1920, "height": 1080}, "fps": 30, "background": "#101418", "duration": 2000, "output": "out/evaporate.mp4",
  "fonts": {"title": [{"file": "fonts/Inter-Bold.ttf"}]},
  "fontVendor": {"fonts/Inter-Bold.ttf": {"licence": "OFL-1.1", "source": "https://github.com/rsms/inter", "sha256": "288316099b1e0a47a4716d159098005eef7c0066921f34e3200393dbdb01947f"}},
  "tracks": [
    {"name": "title", "layer": 20, "elements": [
      {"id": "evaporate", "type": "text", "start": 0, "end": 2000, "x": 960, "y": 540, "origin": "center", "width": 1400, "height": 160, "font": "title", "size": 108, "color": "#F5F0E6", "align": "center", "runs": [{"text": "SHARP FOCUS"}], "units": {"by": "letter", "order": "center_out", "every": 45, "y": [{"t": 0, "v": 20}, {"t": 360, "v": 0, "ease": "ease-out"}], "opacity": [{"t": 0, "v": 0}, {"t": 360, "v": 1, "ease": "ease-out"}], "blur": [{"t": 0, "v": 24}, {"t": 360, "v": 0, "ease": "ease-out"}]}, "caption": false}
    ]}
  ]
}

エバポレート / オプティカルフォーカスイン（blur）： units内でblurを16～32 pxから0へ300～450ミリ秒（ease-out）でキーイングし、opacity（0 -> 1）と小さなyのリフト（16～28 px -> 0）またはscale（[1.08, 1.08] -> [1.0, 1.0]）を組み合わせます。blurが0、opacityが1に達すると、レンダラーは追加レイヤーコストゼロの高速パスを取ります。
対称オーダー（center_out、edges_in）： center_outは中央のユニット（数が偶数の場合は中央のペア）から始まり、両端に向かってステップアウトします。edges_inは最初と最後のユニットが同時に始まり、中央に向かって収束します。
進行波（A -> ピーク -> A）： After EffectsのRange Selector（triangle、round、smooth）の代わりに、unitsに3キーフレームのリターンカーブを記述します。例："y": [{"t": 0, "v": 0}, {"t": 180, "v": -28, "ease": "ease-out"}, {"t": 360, "v": 0, "ease": "ease-in-out"}]（またはscale / blurパルス）。そして、everyがピークを行全体に波紋のように広げます。カスタムタイミングで1つの単語や文字を分離するには、unitを持つ独自のランに分割します。
グリフはtextとして保持（グリフをpathに変換しない）： path要素は1つの輪郭（holesのないpoints）を持つため、マルチコンターグリフ（O、A、B、8、i、?、%）をpathに変換すると、内部のカウンターが塗りつぶされたり、島がドロップされたりします（ADR-0224）。テキストはtextとして保持し、stroke、units、path、effectsでスタイルまたはアニメーション化します。
不規則なビートタイムまたはタイピングカーソル（scripts/type_on.py）： 単語が不規則なビートタイムスタンプに着地する場合、または文字にステッピングcursorが必要な場合、python3 scripts/type_on.py <project> <spec>（--helpでスペックを確認）を実行します。measureで行を測定し、ユニットごとに1つのtext要素（"by": "word"と"enter": "pop"およびtimes / highlights、または60～150ミリ秒で点滅するcursorを持つ"by": "letter"）を出力し、それぞれにcaption: falseをマークします。
トラッキングされたタイトル： タイトルを文字に分割しないでください。letter_spacingを持つ1つのtext要素を記述します。単位はemの1000分の1（各文字の後にsize × letter_spacing / 1000ピクセル、負の値で詰める）。タイトルを離すようにキーイングします："letter_spacing": [{"t": 0, "v": 0}, {"t": 800, "v": 120, "ease": [0.65, 0, 0.35, 1]}]。ゼロ以外の値はオプションの合字をオフにし、アラビア語などの結合スクリプトはスペーシングを取りません。
縦書きカラムと横向きスパイン： Montagentにはwriting_modeプロパティがありません（ADR-0224）。直立した積み重ねカラム（CJK縦書きコピーまたは積み重ねマーキー）の場合は、狭いtextボックス内で書記素を\n（"text": "東\n京\n都"）で結合し、"align": "center"と"line_height": 1.0または1.1を使用します。1行に2～3桁の数字またはラテン文字のイニシャルを保持し（"text": "第\n25\n回"、縦中横）、"by": "line"で連続させることで、水平方向の数字が1つの単位として動くようにします。横向きラテンスパインの場合は、水平text要素を設定し、"rotation": -90（下から上に読む）または"rotation": 90（上から下に読む）で回転させます。
確認： previewでその行が現れるスパンを確認します。次に、静止状態でframeし、間隔が1行として読め、単語や文字の境界でギャップが広がっていないことを確認します。

ワイプによるリビール

ワイプは、端を滑らせて何かを覆い隠したり現したりします。対象物の上にオクルーダーを配置します。対象物の背後とまったく同じ色で塗りつぶされた矩形です。次に、オクルーダーをその遠い端を中心に縮小し、近い端がスイープするようにします。その端に沿って走るアクセントバーがあると、ワイプが意図的であることが明確になります。

{
  "frame": {"width": 1920, "height": 1080}, "fps": 30, "background": "#101418", "duration": 2000, "output": "out/wipe.mp4",
  "tracks": [
    {"name": "mark", "layer": 10, "elements": [
      {"id": "mark", "type": "image", "start": 0, "end": 2000, "source": "media/still.png", "x": 960, "y": 540, "origin": "center", "width": 360, "height": 360, "fit": "contain"}
    ]},
    {"name": "occluder", "layer": 11, "elements": [
      {"id": "occluder", "type": "rect", "start": 0, "end": 1000, "x": 1160, "y": 540, "origin": "center-right", "width": 400, "height": 400, "fill": "#101418", "scale": [{"t": 400, "v": [1.0, 1.0]}, {"t": 900, "v": [0.0, 1.0], "ease": [0.65, 0, 0.35, 1]}]}
    ]},
    {"name": "edge", "layer": 12, "elements": [
      {"id": "edge", "type": "rect", "start": 400, "end": 1000, "x": [{"t": 400, "v": 760}, {"t": 900, "v": 1160, "ease": [0.65, 0, 0.35, 1]}], "y": 540, "origin": "center", "width": 16, "height": 420, "fill": "#FF5A36", "opacity": [{"t": 900, "v": 1.0}, {"t": 1000, "v": 0.0, "ease": "ease-in"}]}
    ]}
  ]
}

長さ： 400～600ミリ秒、[0.65, 0, 0.35, 1]：なだらかに始まり、なだらかに終わるスイープ。
オクルーダー： 対象物よりもすべての辺で20～40ピクセル大きく、その背後の背景と同じ塗りつぶし。開始キーフレームはワイプが始まる位置に配置されるため、対象物はその時点まで覆われたままになります。
エッジバー： 8～24ピクセル幅、オクルーダーより5～10%高く、同じカーブと時間で移動します。スイープが完了した後、100～200ミリ秒かけて消えます。
方向： 読み方向にワイプ。ワイプオフするには、近い端からオクルーダーを元に戻します。
複雑な背景： オクルーダーはフラットな色に対してのみ機能します。写真、グラデーション、フッテージの上では、代わりに要素自身のmaskをキーイングします：{"name": "mask", "shape": "rect", "x": 0, "y": 0, "width": [{"t": 400, "v": 0}, {"t": 900, "v": 400, "ease": [0.65, 0, 0.35, 1]}], "height": 400}は、オクルーダーなしで400×400要素を左端から覆いを解きます。矩形は要素ローカルで、要素の左上からの相対位置です。幅がゼロのマスクは要素を非表示にするため、リビールは覆われた状態から始まります。ソフトエッジにはfeatherを追加します。
確認： frameをスイープの中央で表示し、エッジバーがオクルーダーの端を正確にカバーしていることを確認します。次に、スイープの直後にframeし、オクルーダーが何も残っていないことを確認します。

プッシュ、スライド、ワイプによるハンドオーバー

1つのカード、静止画、シーンから次のものへと動きを持って移行するには、push、slide、wipeの種類を持つtransitionで2つを橋渡しします。両方の要素にキーイングされたxは結合部でずれてしまう可能性がありますが、トランジションは2つの半分をピクセル単位で結合し、validateがそれをチェックします。

{
  "frame": {"width": 1920, "height": 1080}, "fps": 30, "background": "#101418", "duration": 3000, "output": "out/handover.mp4",
  "tracks": [
    {"name": "first", "layer": 10, "elements": [
      {"id": "card-1", "type": "rect", "start": 0, "end": 1700, "x": 0, "y": 0, "origin": "top-left", "width": 1920, "height": 1080, "fill": "#FF5A36"}
    ]},
    {"name": "second", "layer": 11, "elements": [
      {"id": "card-2", "type": "rect", "start": 1200, "end": 3000, "x": 0, "y": 0, "origin": "top-left", "width": 1920, "height": 1080, "fill": "#2E86FF"}
    ]},
    {"name": "handover", "layer": 12, "elements": [
      {"id": "handover", "type": "transition", "start": 1200, "end": 1700, "kind": "push", "from": "card-1", "to": "card-2", "direction": "left", "ease": [0.65, 0, 0.35, 1]}
    ]}
  ]
}

種類： 2つが1つのストリップ（ページ、ステップ、カルーセル）に属する場合はpush。新しいものが静止しているものの上に着地する場合はslide。古いものをその場に留めて切り取りたい場合はwipe。
方向： モーションが移動する方向。leftは新しいものを右から持ってきて、読み方向に従います。
長さ： 400～600ミリ秒、[0.65, 0, 0.35, 1]。トランジションのstartとendは、2つが共有する正確な時間です。
スライドの重なり： slideでは、入ってくる要素はより高いlayerに配置する必要があります。
確認： frameをトランジションの途中で表示し、2つの要素の間に表示アーティファクトやギャップがないか確認します。

カードフリップとドアスイング（透視投影）

要素を3D回転させるには、rotationYまたはrotationXをキーイングします。これらは透視投影で動作し、originを奥行きの基点として設定します。

{
  "frame": {"width": 1920, "height": 1080}, "fps": 30, "background": "#101418", "duration": 3000, "output": "out/flip.mp4",
  "tracks": [
    {"name": "card", "layer": 10, "elements": [
      {"id": "card", "type": "rect", "start": 0, "end": 3000, "x": 960, "y": 540, "origin": "center", "width": 400, "height": 560, "fill": "#FF5A36", "rotationY": [{"t": 500, "v": 0}, {"t": 1500, "v": -180, "ease": [0.65, 0, 0.35, 1], "ease-out": [0.55, 0, 0.45, 1]}]}
    ]}
  ]
}

カードフリップ（rotationY）： 原点をcenterに設定し、0から-180または180度へキーイングします。両面表示： 面を表示したままにするには、1つのtextまたはrect要素のコンテンツとして設定し、backfaceプロパティを追加します（例："backface": {"text": "裏面", "fill": "#2E86FF"}）。
ドアスイング（rotationY、オフセット原点）： 原点を左端（origin": "left"）または右端（origin": "right"）に設定して、ドアのようにスイングさせます。
上下のフリップ（rotationX）： 同様に、originをtopまたはbottomに設定して、上下にフリップします。
エッジの傾き（skew）： 代わりにskewXまたはskewYを使用すると、2Dの傾き効果が得られます。高速で、透視投影は不要です。
確認： frameを回転の中間点で表示し、クリッピングや予期しない透視投影の影響がないか確認します。

ループ

ループは、startとendが異なるタイムライン上の要素として定義され、loop: trueを設定するか、loopBehaviour： "loop" を設定することで実現します。

{
  "frame": {"width": 1920, "height": 1080}, "fps": 30, "background": "#101418", "duration": 4000, "output": "out/loop.mp4",
  "tracks": [
    {"name": "logo", "layer": 10, "elements": [
      {"id": "logo", "type": "ellipse", "start": 0, "end": 4000, "x": 960, "y": 540, "origin": "center", "width": 240, "height": 240, "fill": "#FF5A36", "scale": [{"t": 0, "v": [0.9, 0.9]}, {"t": 1000, "v": [1.0, 1.0], "ease": [0.34, 1.56, 0.64, 1]}, {"t": 2000, "v": [0.9, 0.9], "ease": "ease-in"}], "loop": true}
    ]}
  ]
}

ループのタイミング： ループはduration全体をカバーする必要はありません。loop： trueを設定すると、要素は自身のタイムラインの終わりに達すると最初のキーフレームに戻り、スムーズに繰り返します。
ループ可能なアニメーション： ループは、開始状態が終了状態にスムーズに接続するように設計する必要があります（例：パルス、回転、色の遷移）。
ループ中の連続： ループ内で連続効果を使用すると、各反復の開始時にリセットされます。
確認： frameを複数のループサイクル（例：t = 0、t = 1000、t = 2000、t = 3000）で表示し、シームレスに接続していることを確認します。

トレイラーエフェクト（スラムタイトル、グリッチカット、HUD）

トレイラーエフェクトには、高速なカット、歪み、オーバーレイが含まれます。これらのレシピは、作品に緊迫感とエネルギーを加えるために設計されています。

スラムタイトル： タイトルが高速でスケールイン（例えば、1.5から1.0へ100ミリ秒未満で）し、しばしばカメラの振動やフラッシュを伴います。scaleを使用し、easeでsteps(1)または非常にタイトなベジェカーブを試します。
グリッチカット： 1～2フレームの意図的に破損したビデオまたは色ずれ。frameオフセットとopacityの高速キーイングでシミュレートできます。opacityを高速でオン/オフにしたり、xまたはyを数ピクセルオフセットします。
HUD（ヘッドアップディスプレイ）： 多くの場合、シェイプ（長方形、楕円、線）と等幅フォントのテキスト、およびopacityとstroke（ストローク）を使用した、クリーンで未来的な外観のオーバーレイ。ターゲットするlayerが適切であることを確認します。
確認： frameを各カットポイントとフラッシュで表示し、タイミングが意図したとおりに機能していることを確認します。previewは高速カットのリズムを確認するのに役立ちます。

クリエイティブディレクション

新しい作品やリデザインの場合は、レシピを適用する前にクリエイティブディレクションを参照してください。以下の原則を考慮してください：

ビジュアルコンセプト： 作品のコアとなるアイデアと雰囲気は何ですか？
構成： 要素はフレーム内でどのように配置され、バランスが取れていますか？
振付： 要素はどのように動き、相互作用しますか？

ネイティブMontagentは、これらの原則を直接実装する方法を提供します。montagent-craftは、グリッド、レイアウト、およびコアとなるアニメーションのタイミングを設定するのに役立ちます。

インポートとアセット管理

画像（imageタイプ）： sourceでファイルを指定します。
フォント： Montagent.ttf以外のフォントの場合は、fontsセクションとfontVendorセクション（ライセンスとソース情報を含む）を使用します。
その他のアセット： montagent-craftのインポート機能を使用して、メディアファイルやデータを管理します。

バリデーションとワークフロー

validate： プロジェクトに対してvalidateを実行し、montagentのルールに準拠しているか確認します。予想される警告（例：R-EASE-INERT）は、それぞれのレシピまたはガイドで説明されています。
montagent-craft： プロジェクトの構築、タイムラインの管理、ルックステップの実行に使用します。
montagent-craft measure： テキスト行の寸法を測定し、正確なレイアウトに使用します。
ルックステップ： 各レシピの最後にあるルックステップに従い、進む前に各効果の正確性と品質を検証します。

モーショングラフィックスとタイトル（Montagent用）