Personajes 2D
Primero, lee las reglas de la mascota de la marca (brands/<slug>/README.md, Mascota). La mascota de una marca solo se dibuja a partir de los archivos de la propia marca; nunca la redibujes de memoria.
Rig SVG (sin archivo de diseñador)
- Dibuja el personaje como un
<svg>en línea con formas simples en los colores de la marca. Nombra las partes:#body,#eyes,#mouth-closed,#mouth-open,#arm-l,#arm-r(pueden omitirse algunas). const c = SvgRig(svgEl)y luego encadena:.idle(from, to),.blink([t…]),.talk(from, to),.wave(t),.hop(t).- Los brazos pivotan en la esquina interior inferior de la caja del brazo. Si un brazo se separa del cuerpo, establece
data-pivot="x% y%"en él. - Locución hablada: sincronización de labios (siguiente sección). Sin Rhubarb, un movimiento de labios más simple: la palabra comienza desde
scripts/transcribe.sh audio/vo.wav audio/vopasado como.talk(0, 0, { beats: [...] }). - Reutilización: una vez que un personaje es aprobado, guarda su SVG en
brands/<slug>/assets/characters/y agrégalo al README de la marca.
Sincronización de labios (un personaje habla la locución)
- Pistas por línea de VO:
scripts/lipsync.sh audio/vo.wav audio/vo.visemes.json --dialog audio/vo.txt(Rhubarb Lip Sync; nota de instalación en el script). Usa el guion aprobado como archivo de diálogo. Segundos para cada línea. - Carga
<script src="../audio/vo.visemes.js">y<script src="/engines/lipsync.js">en la composición. - Rig SVG: dibuja las formas de la boca como
#mouth-A…#mouth-H, con#mouth-closed(o#mouth-X) como la boca en reposo. A (labios presionados), B (ligeramente abierta, dientes), C (abierta), D (muy abierta), E (O), F (UU) cubren la mayor parte; G (F/V) y H (L) vuelven a A y C si no se dibujan. Luego.lipsync(LipSync.cues("vo.visemes"), { offset: <inicio VO> }), una llamada por línea. Usa.talk()o.lipsync()para una línea, no ambos. Ejemplo:examples/engines-demo/index.html. - Mascota que solo existe como imagen (un PNG de la marca):
LipSync.mountMouth(wrapper, { cx, cy, w, aspect, shapes: LipSync.mouthSet({ ink, cover }) })dibuja una boca sobre ella (cover= el color del rostro, ocultando la boca propia de la imagen mientras habla; en reposo se ve la boca de la imagen).cx,cy,wson fracciones de la imagen: mide una vez, verifica fotogramas en algunas pistas y guarda los números en el README de la marca (Mascota). LuegoLipSync.addToTimeline(Studio.tl, cues, mouth, { offset }). - Una boca dibujada en la mascota de una marca es una obra de arte nueva: el dueño de la marca la aprueba antes de publicar cualquier cosa que la contenga.
- Mantén el rostro vivo mientras habla: un parpadeo cada 2–4 s, un pequeño asentimiento en palabras acentuadas.
LipSync.talking(cues, t, offset)indica cuándo está hablando el personaje. - Control de calidad: fotogramas en algunos tiempos de pista junto al archivo de pistas (¿cada boca coincide con el sonido?), luego una escucha con la mezcla.
Reglas y el lado 3D: engines/README.md, Sincronización de labios.
Lottie (archivo de diseñador)
Studio.lottie(el, "/brands/<slug>/assets/lottie/<file>.json", { start, loop, speed }). Carga
/core/node_modules/lottie-web/build/player/lottie.min.js antes del runtime. Verifica que el archivo no use
expresiones o efectos que lottie-web no pueda dibujar (renderiza un fotograma, compáralo con la vista previa del diseñador).
Rive (archivo de diseñador)
riveLayer(el, "/brands/<slug>/assets/<file>.riv", { animation | stateMachine, start, loop, inputs }) desde
engines/rive.js. Una línea de tiempo (animation) se posa directamente desde t. Una máquina de estados se avanza desde 0 a la velocidad
de fotogramas, así que proporciona sus entradas como tiempos: inputs: [{ at: 1.2, name: "wave" }, { at: 2, name: "mood", value: 2 }] (sin valor
= disparador). Renderiza algunos fotogramas en dos órdenes (--workers 1, luego --workers 2 con los tiempos invertidos) y verifica
que los md5 coincidan. examples/reel-layer/rive.html es una página de verificación funcional.
Artesanía del personaje
- Anticipación antes de un movimiento (una pequeña compresión antes de un salto), sobreextensión después (
back.out). - Parpadeo cada 2–4 s en intervalos irregulares. Un personaje estático parece muerto.
- Mantén las poses el tiempo suficiente para que se lean (≥ 0.4 s) en un teléfono móvil.