2D-Charaktere
Lesen Sie zuerst die Regeln für das Markenmaskottchen (brands/<slug>/README.md, Maskottchen). Ein Markenmaskottchen wird nur aus den eigenen Dateien der Marke gezeichnet; zeichnen Sie es niemals aus dem Gedächtnis neu.
SVG-Rig (keine Designerdatei)
- Zeichnen Sie den Charakter als eingebettetes
<svg>aus einfachen Formen in den Markenfarben. Benennen Sie die Teile:#body,#eyes,#mouth-closed,#mouth-open,#arm-l,#arm-r(jeweils optional). const c = SvgRig(svgEl)und dann verketten:.idle(von, bis),.blink([t…]),.talk(von, bis),.wave(t),.hop(t).- Arme drehen sich um die untere innere Ecke des Armkastens. Wenn ein Arm vom Körper wegschwingt, setzen Sie
data-pivot="x% y%"darauf. - Sprachaufnahme sprechen: Lippensynchronisation (nächster Abschnitt). Ohne Rhubarb ein einfacherer Lippenklapp: Wortbeginne von
scripts/transcribe.sh audio/vo.wav audio/voübergeben als.talk(0, 0, { beats: [...] }). - Wiederverwendung: Sobald ein Charakter genehmigt ist, speichern Sie sein SVG in
brands/<slug>/assets/characters/und fügen Sie es dem Marken-README hinzu.
Lippensynchronisation (ein Charakter spricht die Sprachaufnahme)
- Cues pro VO-Zeile:
scripts/lipsync.sh audio/vo.wav audio/vo.visemes.json --dialog audio/vo.txt(Rhubarb Lip Sync; Installationshinweis im Skript). Verwenden Sie das genehmigte Skript als Dialogdatei. Sekunden für jede Zeile. - Laden Sie
<script src="../audio/vo.visemes.js">und<script src="/engines/lipsync.js">in der Komposition. - SVG-Rig: Zeichnen Sie die Mundformen als
#mouth-A…#mouth-H, wobei#mouth-closed(oder#mouth-X) den Ruhemund darstellt. A (Lippen gepresst), B (leicht geöffnet, Zähne), C (offen), D (weit offen), E (O), F (OO) tragen den Großteil; G (F/V) und H (L) fallen auf A und C zurück, falls nicht gezeichnet. Dann.lipsync(LipSync.cues("vo.visemes"), { offset: <VO-Start> }), ein Aufruf pro Zeile. Verwenden Sie.talk()oder.lipsync()für eine Zeile, nicht beides. Beispiel:examples/engines-demo/index.html. - Maskottchen, das nur als Bild existiert (ein PNG von der Marke):
LipSync.mountMouth(wrapper, { cx, cy, w, aspect, shapes: LipSync.mouthSet({ ink, cover }) })zeichnet einen Mund darüber (cover= die Gesichtsfarbe, verdeckt den eigenen Mund des Bildes während des Sprechens; im Ruhezustand zeigt das Bild seinen Mund).cx,cy,wsind Bruchteile des Bildes: einmal messen, Standbilder bei einigen Cues überprüfen und die Zahlen im Marken-README behalten (Maskottchen). DanachLipSync.addToTimeline(Studio.tl, cues, mouth, { offset }). - Ein gezeichneter Mund auf einem Markenmaskottchen ist ein neues Kunstwerk: Der Markeninhaber genehmigt es, bevor etwas damit veröffentlicht wird.
- Halten Sie das Gesicht lebendig, während es spricht: ein Blinzeln alle 2–4 s, ein kleines Nicken bei betonten Wörtern.
LipSync.talking(cues, t, offset)gibt an, wann der Charakter spricht. - Qualitätssicherung: Standbilder zu einigen Cue-Zeiten neben der Cue-Datei (passt jeder Mund zum Ton?), dann einmal anhören mit dem Mix.
Regeln und die 3D-Seite: engines/README.md, Lippensynchronisation.
Lottie (Designerdatei)
Studio.lottie(el, "/brands/<slug>/assets/lottie/<file>.json", { start, loop, speed }). Laden Sie
/core/node_modules/lottie-web/build/player/lottie.min.js vor der Runtime. Überprüfen Sie, dass die Datei keine Ausdrücke oder Effekte verwendet, die lottie-web nicht zeichnen kann (ein Standbild rendern, mit der Designer-Vorschau vergleichen).
Rive (Designerdatei)
riveLayer(el, "/brands/<slug>/assets/<file>.riv", { animation | stateMachine, start, loop, inputs }) von
engines/rive.js. Eine Zeitleiste (animation) wird direkt von t aus posiert. Eine Zustandsmaschine wird von 0 an mit der Bildrate schrittweise durchlaufen, geben Sie ihre Eingaben also als Zeiten: inputs: [{ at: 1.2, name: "wave" }, { at: 2, name: "mood", value: 2 }] (kein Wert = Auslöser). Rendern Sie einige Standbilder in zwei Reihenfolgen (--workers 1, dann --workers 2 mit umgekehrten Zeiten) und prüfen Sie, ob die md5s übereinstimmen. examples/reel-layer/rive.html ist eine funktionierende Testseite.
Charakter-Handwerk
- Antizipation vor einer Bewegung (ein kleines Zusammendrücken vor einem Hüpfer), Überschwingen danach (
back.out). - Blinzeln alle 2–4 s in unregelmäßigen Abständen. Ein stiller Charakter wirkt leblos.
- Halten Sie Posen lange genug, um sie auf einem Handy lesen zu können (≥ 0,4 s).