murathany7/character-2d

Personagens 2D

Leia primeiro as regras do mascote da marca (brands/<slug>/README.md, Mascote). Um mascote de marca é desenhado apenas a partir dos arquivos da própria marca; nunca o redesenhe de memória.

Rig SVG (sem arquivo de designer)

1. Desenhe o personagem como um <svg> inline com formas simples nas cores da marca. Nomeie as partes: #body, #eyes, #mouth-closed, #mouth-open, #arm-l, #arm-r (qualquer uma pode ser omitida).
2. const c = SvgRig(svgEl) e então encadeie: .idle(from, to), .blink([t…]), .talk(from, to), .wave(t), .hop(t).
3. Os braços giram no canto interno inferior da caixa do braço. Se um braço balançar para fora do corpo, defina data-pivot="x% y%" nele.
4. Narração: sincronia labial (próxima seção). Sem Rhubarb, uma batida de lábio mais simples: a palavra começa a partir de scripts/transcribe.sh audio/vo.wav audio/vo passado como .talk(0, 0, { beats: [...] }).
5. Reúso: uma vez que o personagem é aprovado, salve seu SVG em brands/<slug>/assets/characters/ e adicione-o ao README da marca.

Sincronia labial (um personagem fala a narração)

1. Pistas por linha de VO: scripts/lipsync.sh audio/vo.wav audio/vo.visemes.json --dialog audio/vo.txt (Rhubarb Lip Sync; nota de instalação no script). Use o roteiro aprovado como arquivo de diálogo. Segundos para cada linha.
2. Carregue <script src="../audio/vo.visemes.js"> e <script src="/engines/lipsync.js"> na composição.
3. Rig SVG: desenhe as formas da boca como #mouth-A … #mouth-H, com #mouth-closed (ou #mouth-X) como a boca de repouso. A (lábios pressionados), B (levemente aberto, dentes), C (aberto), D (bem aberto), E (O), F (OO) carregam a maior parte; G (F/V) e H (L) recaem em A e C se não forem desenhados. Em seguida, .lipsync(LipSync.cues("vo.visemes"), { offset: <início da VO> }), uma chamada por linha. Use .talk() ou .lipsync() para uma linha, não ambos. Exemplo: examples/engines-demo/index.html.
4. Mascote que existe apenas como imagem (um PNG da marca): LipSync.mountMouth(wrapper, { cx, cy, w, aspect, shapes: LipSync.mouthSet({ ink, cover }) }) desenha uma boca sobre ele (cover = a cor do rosto, escondendo a boca própria da imagem enquanto fala; em repouso a boca da imagem aparece). cx, cy, w são frações da imagem: meça uma vez, verifique imagens estáticas em algumas pistas e mantenha os números no README da marca (Mascote). Então LipSync.addToTimeline(Studio.tl, cues, mouth, { offset }).
5. Uma boca desenhada no mascote de uma marca é uma nova obra de arte: o proprietário da marca a aprova antes que qualquer coisa com ela seja publicada.
6. Mantenha o rosto vivo enquanto fala: uma piscada a cada 2–4 s, um pequeno aceno em palavras acentuadas. LipSync.talking(cues, t, offset) indica quando o personagem está falando.
7. QA: imagens estáticas em alguns momentos das pistas junto ao arquivo de pistas (cada boca corresponde ao som?), depois uma audição com a mixagem.

Regras e o lado 3D: engines/README.md, Sincronia labial.

Lottie (arquivo de designer)

Studio.lottie(el, "/brands/<slug>/assets/lottie/<file>.json", { start, loop, speed }). Carregue /core/node_modules/lottie-web/build/player/lottie.min.js antes do runtime. Verifique se o arquivo não usa nenhuma expressão ou efeito que o lottie-web não possa desenhar (renderize uma imagem estática, compare com a pré-visualização do designer).

Rive (arquivo de designer)

riveLayer(el, "/brands/<slug>/assets/<file>.riv", { animation | stateMachine, start, loop, inputs }) de engines/rive.js. Uma timeline (animation) é posada diretamente de t. Uma máquina de estados é avançada a partir de 0 na taxa de quadros, então dê suas entradas como tempos: inputs: [{ at: 1.2, name: "wave" }, { at: 2, name: "mood", value: 2 }] (sem valor = gatilho). Renderize algumas imagens estáticas em duas ordens (--workers 1, depois --workers 2 com os tempos invertidos) e verifique se os md5s coincidem. examples/reel-layer/rive.html é uma página de verificação funcional.

Técnica de personagem

• Antecipação antes de um movimento (uma pequena compressão antes de um pulo), overshoot depois (back.out).
• Pisque a cada 2–4 s em intervalos irregulares. Um personagem parado parece morto.
• Segure as poses tempo suficiente para serem lidas (≥ 0,4 s) em um telefone.