murathany7/character-2d

2Dキャラクター

最初にブランドのマスコットルールを読んでください（brands/<slug>/README.md、マスコットセクション）。ブランドマスコットはブランド自身のファイルからのみ描画し、記憶から再描画しないでください。

SVGリグ（デザイナーファイルなし）

1. ブランドカラーのシンプルな図形からインライン<svg>でキャラクターを描きます。パーツに名前を付けます： #body、#eyes、#mouth-closed、#mouth-open、#arm-l、#arm-r（一部省略可）。
2. const c = SvgRig(svgEl) とし、メソッドをチェーンします：.idle(from, to)、.blink([t…])、.talk(from, to)、.wave(t)、.hop(t)。
3. 腕は、その腕の矩形の内側下隅を支点に回転します。腕が体から離れて振れる場合は、data-pivot="x% y%" を設定します。
4. 音声ナレーション：リップシンク（次のセクション）。Rhubarbがない場合、簡易的なリップフラップ：scripts/transcribe.sh audio/vo.wav audio/vo で生成されたビートを .talk(0, 0, { beats: [...] }) として渡します。
5. 再利用：キャラクターが承認されたら、そのSVGを brands/<slug>/assets/characters/ に保存し、ブランドのREADMEに追加します。

リップシンク（キャラクターが音声を話す）

1. VOラインごとのキュー：scripts/lipsync.sh audio/vo.wav audio/vo.visemes.json --dialog audio/vo.txt（Rhubarb Lip Sync；スクリプト内にインストールメモあり）。承認済みのスクリプトをダイアログファイルとして使用します。各ラインの秒数。
2. コンポジションで <script src="../audio/vo.visemes.js"> と <script src="/engines/lipsync.js"> を読み込みます。
3. SVGリグ： 口の形状を #mouth-A … #mouth-H として描き、#mouth-closed（または #mouth-X）を静止時の口とします。A（唇を閉じる）、B（やや開く、歯が見える）、C（開く）、D（大きく開く）、E（Oの形）、F（OOの形）が大部分を担います；G（F/V）とH（L）は描かれていなければAとCにフォールバックします。その後、1行につき1回 .lipsync(LipSync.cues("vo.visemes"), { offset: <VO開始時間> }) を呼び出します。1行に対して .talk() または .lipsync() のどちらかを使用し、両方は使用しません。例：examples/engines-demo/index.html。
4. 画像としてのみ存在するマスコット（ブランドのPNG）：LipSync.mountMouth(wrapper, { cx, cy, w, aspect, shapes: LipSync.mouthSet({ ink, cover }) }) でその上に口を描画します（cover = 顔の色。会話中は画像の元の口を隠します；静止時は画像の口が表示されます）。cx、cy、w は画像の比率で指定：一度測定し、いくつかのキューで静止画を確認し、数値をブランドのREADME（マスコット）に保持します。その後、LipSync.addToTimeline(Studio.tl, cues, mouth, { offset }) を実行します。
5. ブランドのマスコットに描かれた口は新しいアートワークです：何かを公開する前に、ブランド所有者が承認します。
6. 会話中も顔を生き生きと保つ：2～4秒ごとにまばたき、強調された単語で小さくうなずく。LipSync.talking(cues, t, offset) でキャラクターが話しているタイミングを取得します。
7. QA：キュー数か所の静止画をキューファイルと比較（各口の形は音と合っているか？）、最後にミックスを含めて1回聴取します。

ルールと3D側：engines/README.md、リップシンクセクションを参照。

Lottie（デザイナーファイル）

Studio.lottie(el, "/brands/<slug>/assets/lottie/<file>.json", { start, loop, speed })。ランタイムの前に /core/node_modules/lottie-web/build/player/lottie.min.js を読み込みます。ファイルがlottie-webで描画できないエクスプレッションやエフェクトを使用していないことを確認します（静止画をレンダリングし、デザイナーのプレビューと比較）。

Rive（デザイナーファイル）

riveLayer(el, "/brands/<slug>/assets/<file>.riv", { animation | stateMachine, start, loop, inputs })（engines/rive.jsから）。タイムライン（animation）は t から直接ポーズが設定されます。ステートマシンはフレームレートで0からステップ実行されるため、入力は時間として与えます：inputs: [{ at: 1.2, name: "wave" }, { at: 2, name: "mood", value: 2 }]（値なし = トリガー）。2つの順序で数枚の静止画をレンダリングし（--workers 1、次に時間を逆にして --workers 2）、md5が一致することを確認します。examples/reel-layer/rive.html は動作確認ページです。

キャラクタークラフト

• 動作の前に予備動作（ホップ前の小さな押しつぶし）、後にオーバーシュート（back.out）。
• 2～4秒ごとに不規則な間隔でまばたき。静止したキャラクターは死んでいるように見えます。
• ポーズはスマートフォンでも読める十分な長さ（0.4秒以上）保持します。