murathany7/personnage-2d

Personnages 2D

Lisez d'abord les règles de la mascotte de la marque (brands/<slug>/README.md, Mascotte). Une mascotte de marque est uniquement dessinée à partir des fichiers de la marque ; ne la redessinez jamais de mémoire.

Rig SVG (sans fichier designer)

1. Dessinez le personnage en tant que <svg> en ligne à partir de formes simples dans les couleurs de la marque. Nommez les parties : #body, #eyes, #mouth-closed, #mouth-open, #arm-l, #arm-r (certaines peuvent être omises).
2. const c = SvgRig(svgEl) puis enchaînez : .idle(from, to), .blink([t…]), .talk(from, to), .wave(t), .hop(t).
3. Les bras pivotent au niveau du coin inférieur intérieur du cadre du bras. Si un bras s'écarte du corps, définissez data-pivot="x% y%" sur celui-ci.
4. Voix off parlée : lip sync (section suivante). Sans Rhubarb, un flap de lèvres plus simple : le mot commence à partir de scripts/transcribe.sh audio/vo.wav audio/vo passé sous forme de .talk(0, 0, { beats: [...] }).
5. Réutilisation : une fois le personnage approuvé, sauvegardez son SVG dans brands/<slug>/assets/characters/ et ajoutez-le au README de la marque.

Lip sync (un personnage parle la voix off)

1. Repères par ligne VO : scripts/lipsync.sh audio/vo.wav audio/vo.visemes.json --dialog audio/vo.txt (Rhubarb Lip Sync ; note d'installation dans le script). Utilisez le script approuvé comme fichier de dialogue. Secondes pour chaque ligne.
2. Chargez <script src="../audio/vo.visemes.js"> et <script src="/engines/lipsync.js"> dans la composition.
3. Rig SVG : dessinez les formes de bouche comme #mouth-A … #mouth-H, avec #mouth-closed (ou #mouth-X) comme bouche au repos. A (lèvres serrées), B (légèrement ouvert, dents), C (ouvert), D (grand ouvert), E (O), F (OO) supportent l'essentiel ; G (F/V) et H (L) reviennent à A et C s'ils ne sont pas dessinés. Ensuite .lipsync(LipSync.cues("vo.visemes"), { offset: <début VO> }), un appel par ligne. Utilisez .talk() ou .lipsync() pour une ligne, pas les deux. Exemple : examples/engines-demo/index.html.
4. Mascotte n'existant que sous forme d'image (un PNG de la marque) : LipSync.mountMouth(wrapper, { cx, cy, w, aspect, shapes: LipSync.mouthSet({ ink, cover }) }) dessine une bouche par-dessus (cover = la couleur du visage, cachant la bouche propre de l'image pendant qu'elle parle ; au repos, la bouche de l'image apparaît). cx, cy, w sont des fractions de l'image : mesurez une fois, vérifiez les images fixes à quelques repères, et conservez les nombres dans le README de la marque (Mascotte). Ensuite LipSync.addToTimeline(Studio.tl, cues, mouth, { offset }).
5. Une bouche dessinée sur la mascotte d'une marque est une nouvelle œuvre : le propriétaire de la marque l'approuve avant que quoi que ce soit avec celle-ci soit publié.
6. Gardez le visage vivant pendant qu'il parle : un clignement toutes les 2 à 4 s, un petit hochement de tête sur les mots accentués. LipSync.talking(cues, t, offset) indique quand le personnage parle.
7. QA : images fixes à quelques instants de repères à côté du fichier de repères (chaque bouche correspond-elle au son ?), puis une écoute avec le mix.

Règles et côté 3D : engines/README.md, Lip sync.

Lottie (fichier designer)

Studio.lottie(el, "/brands/<slug>/assets/lottie/<file>.json", { start, loop, speed }). Chargez /core/node_modules/lottie-web/build/player/lottie.min.js avant l'exécution. Vérifiez que le fichier n'utilise pas d'expressions ou d'effets que lottie-web ne peut pas dessiner (rendu d'une image fixe, comparez avec l'aperçu du designer).

Rive (fichier designer)

riveLayer(el, "/brands/<slug>/assets/<file>.riv", { animation | stateMachine, start, loop, inputs }) depuis engines/rive.js. Une timeline (animation) est posée directement à partir de t. Une machine d'état est parcourue à partir de 0 au taux d'images, donc donnez ses entrées en temps : inputs: [{ at: 1.2, name: "wave" }, { at: 2, name: "mood", value: 2 }] (pas de valeur = déclencheur). Rendez quelques images fixes dans deux ordres (--workers 1, puis --workers 2 avec les temps inversés) et vérifiez que les md5 correspondent. examples/reel-layer/rive.html est une page de vérification fonctionnelle.

Craft du personnage

• Anticipation avant un mouvement (un petit écrasement avant un saut), dépassement après (back.out).
• Clignement toutes les 2 à 4 s à intervalles irréguliers. Un personnage immobile a l'air mort.
• Maintenez les poses assez longtemps pour être lisibles (≥ 0,4 s) sur un téléphone.